The Timeline component lays events down a vertical rail that fills as the reader scrolls through them, scaling a single element rather than resizing it so the fill costs nothing on the main thread.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/timeline.jsonEverything Timeline accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| items (required) | TimelineItem[] | No default | The events to render, in order |
| container | RefObject<HTMLElement | null> | No default | Scroll container to track. Omit to track the window |
| nodeSize | number | 12 | Diameter of each node, in pixels |
| smooth | boolean | true | Ease the rail toward the true position instead of tracking it exactly |
| className | string | '' | Additional CSS classes applied to the list |
| TimelineItem: id | string | No default | Unique key for the entry |
| TimelineItem: title | string | No default | Heading for the entry |
| TimelineItem: meta | string | No default | Small line above the title — a date, a version, a stage |
| TimelineItem: body | string | No default | The entry's copy |
Required.
Step one
One command writes the four files and edits the three registries that have to know about it.
Step two
Motion lives in the same file as the markup, so there is one place to change how it feels.
Step three
The table is the source of truth: the playground controls are derived from it, not written twice.
Step four
The suite checks the reduced-motion guard, the title budget and a pixel baseline before it merges.