Timeline
Displays a timeline of events.
Powered by
Origin UIInstallation
bash
npx shadcn@latest add @redpanda/timelinebash
pnpm dlx shadcn@latest add @redpanda/timelinebash
yarn dlx shadcn@latest add @redpanda/timelinebash
bunx shadcn@latest add @redpanda/timelinebash
nubx shadcn@latest add @redpanda/timelinebash
aube dlx shadcn@latest add @redpanda/timelineWhen to use
Timeline displays chronological events. Use this decision tree:
Usage
tsx
import { Timeline, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle,} from '@/registry/components/timeline';tsx
<Timeline defaultValue={3}> {items.map((item) => ( <TimelineItem key={item.id} step={item.id}> <TimelineHeader> <TimelineSeparator /> <TimelineTitle className="-mt-0.5">{item.title}</TimelineTitle> <TimelineIndicator /> </TimelineHeader> </TimelineItem> ))}</Timeline>Examples
Default
Detailed
Activity
Activity (Card)
Credits
- We use Origin UI for the timeline component and style.
Activity rows
Use Timeline variant="activity" for a compact activity list without the stepper
rail offset. Its items align icons, avatars, and content in a row, with 12-pixel
vertical padding and a 12-pixel gap. Content uses the standard foreground rather
than the stepper’s secondary description color.
Both activity demos use this recipe. A containing CardContent owns horizontal
padding, so its rows do not add another horizontal inset. This intentionally
standardizes the old custom activity spacing; the default stepper geometry and
controlled step APIs are unchanged.