Timescale
Ruler-style timeline for plotting milestones along a horizontal or vertical axis.
Installation
pnpm dlx shadcn@latest add @ncdai/timescale
Usage
import {
TimescaleAge,
TimescaleContent,
TimescaleHeader,
TimescaleIntroScroll,
TimescaleItem,
TimescaleRail,
TimescaleRoot,
TimescaleTick,
TimescaleTrack,
TimescaleViewport,
TimescaleYear,
} from "@/components/timescale"<TimescaleIntroScroll>
<TimescaleRoot>
<TimescaleHeader>
<TimescaleAge />
<TimescaleYear />
</TimescaleHeader>
<TimescaleViewport>
<TimescaleTrack>
<TimescaleRail />
<TimescaleItem>
<TimescaleTick />
<TimescaleAge />
<TimescaleYear />
<TimescaleContent />
</TimescaleItem>
</TimescaleTrack>
</TimescaleViewport>
</TimescaleRoot>
</TimescaleIntroScroll>Composition
Use the following composition to build a Timescale
TimescaleRoot
├── TimescaleHeader
│ ├── TimescaleAge
│ └── TimescaleYear
└── TimescaleViewport
└── TimescaleTrack
├── TimescaleRail
└── TimescaleItem
├── TimescaleTick
├── TimescaleAge
├── TimescaleYear
└── TimescaleContentWrap in TimescaleIntroScroll to scroll a horizontal Timescale to its latest item on mount, respecting prefers-reduced-motion.
API reference
TimescaleRoot
Prop
Type