Timeline Rail
Clean horizontal timeline with dots on a rail, small diagonal labels above, and captions below.
Basic
Variants
Installation
npx shadcn-extras@latest add timeline-rail
Component API
TimelineRail
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TimelineItem[] | — | Ordered items to render as dots along the rail. |
| size | 'sm' | 'md' | 'md' | Density of dots and vertical offsets. |
| emphasizeActiveTrail | boolean | true | Darken rail up to the last item with active: true. |
| labelAngle | number | 45 | Rotation (degrees) for the top labels. |
| gapClassName | string | 'gap-14' | Horizontal gap between dots (Tailwind class). |
| lineColorClass | string | 'bg-zinc-300 dark:bg-zinc-700' | Rail color. |
| lineThickness | number | 6 | Rail thickness in pixels. |
| dotClass | string | 'bg-zinc-400 dark:bg-zinc-600' | Inactive dot class. |
| dotActiveClass | string | 'bg-zinc-900 dark:bg-zinc-100' | Active dot class. |
| className | string | — | Root element classes. |
| railClassName | string | — | Rail wrapper classes. |
| itemClassName | string | — | Per-item container classes. |
| labelClassName | string | — | Top label classes. |
| captionClassName | string | — | Bottom caption classes. |
| renderLabel | (item, i) => ReactNode | — | Custom renderer for the top label. |
| renderCaption | (item, i) => ReactNode | — | Custom renderer for the bottom caption. |