Browse components
Timeline
Vertical timeline whose glowing progress line fills as you scroll, lighting up markers and revealing entries.
Installation
npx shadcn@latest add @glint-ui/timelineFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/timeline.json
Usage
import { Timeline } from "@/components/ui/timeline";
<Timeline
scrollContainerRef={scrollerRef}
items={[
{ date: "Jan 2025", title: "First commit", description: "Where it all began." },
{ date: "Jul 2025", title: "v1.0 launch" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { date, title, description?, icon? }. |
| scrollContainerRef | ReactNode | — | Ref to the scrolling element. Defaults to the window. |
| anchor | number | 0.5 | Viewport position of the progress head (0 top, 1 bottom). |
| color | string | "#a3e635" | Progress line and marker color. |
| distance | number | 24 | Px entries slide up while fading in. |
| className | string | — | Extra classes for the root element. |