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 — Ark UI
timeline.tsx
123456789101112131415161718192021222324252627282930import { Timeline } from "#components/ui/ark-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; every part inherits them via // context. 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> );}