All componentssolidsubtleoutlinesmmdlgxl
Timeline
Chronological events with indicators, connectors, and per-item content slots.
v2.0 releasedAug 12
New theming engine and 40 fresh blocks.
v1.5 releasedJun 03
Slot recipes for every component.
v1.0 releasedApr 21
First stable release.
Variants
v2.0 releasedAug 12
New theming engine and 40 fresh blocks.
v1.5 releasedJun 03
Slot recipes for every component.
v1.0 releasedApr 21
First stable release.
v2.0 releasedAug 12
New theming engine and 40 fresh blocks.
v1.5 releasedJun 03
Slot recipes for every component.
v1.0 releasedApr 21
First stable release.
v2.0 releasedAug 12
New theming engine and 40 fresh blocks.
v1.5 releasedJun 03
Slot recipes for every component.
v1.0 releasedApr 21
First stable release.
Sizes
v2.0 releasedAug 12
New theming engine and 40 fresh blocks.
v1.5 releasedJun 03
Slot recipes for every component.
v1.0 releasedApr 21
First stable release.
v2.0 releasedAug 12
New theming engine and 40 fresh blocks.
v1.5 releasedJun 03
Slot recipes for every component.
v1.0 releasedApr 21
First stable release.
v2.0 releasedAug 12
New theming engine and 40 fresh blocks.
v1.5 releasedJun 03
Slot recipes for every component.
v1.0 releasedApr 21
First stable release.
v2.0 releasedAug 12
New theming engine and 40 fresh blocks.
v1.5 releasedJun 03
Slot recipes for every component.
v1.0 releasedApr 21
First stable release.
Install
zsh — timeline
1bunx stylexblocks add timelineUsage — Base UI
timeline.tsx
123456789101112131415161718192021222324252627282930import { Timeline } from "#components/ui/base-ui/timeline.tsx";
const events = [ { title: "v2.0 released", date: "Aug 12", note: "New theming engine." }, { title: "v1.0 released", date: "Apr 21", note: "First stable release." },];
export function Example() { return ( // variant/size resolve once on Root; parts inherit them via context and // expose data-* attributes. The connector wraps the separator rail and // the indicator dot — omit the separator on the last item to end the rail. <Timeline.Root variant="solid" size="md"> {events.map((event, i) => ( <Timeline.Item key={event.title}> <Timeline.Connector> {i < events.length - 1 ? <Timeline.Separator /> : null} <Timeline.Indicator /> </Timeline.Connector> <Timeline.Content> <Timeline.Title> {event.title} <span>{event.date}</span> </Timeline.Title> <Timeline.Description>{event.note}</Timeline.Description> </Timeline.Content> </Timeline.Item> ))} </Timeline.Root> );}