Timeline

08:00
Morning brief
Weather, calendar and headlines
12:30
Inbox digest
Unread mail since the morning
18:00
Price check
Flights to Tokyo under ¥3,000
22:00
Daily log
What got done today

Installation

pnpm dlx shadcn@latest add @paneui/timeline

Usage

import { Timeline, TimelineDescription, TimelineItem, TimelineTitle } from "@/components/ui/timeline"

<Timeline>
  <TimelineItem time="08:00" action={<Button variant="ghost" size="icon-xs" aria-label="Delete"><TrashIcon /></Button>}>
    <TimelineTitle>Morning brief</TimelineTitle>
    <TimelineDescription>Weather, calendar and headlines</TimelineDescription>
  </TimelineItem>
</Timeline>

Composition

Timeline
└── TimelineItem
    ├── TimelineTitle
    └── TimelineDescription

Examples

Cards

Use cards when each entry carries more than two lines.

Time column

The column is 3.5rem wide; set --timeline-time on the Timeline for longer labels. Leave time out on every item to drop the column.

Hairline

The line starts at the first dot and ends at the last, so a single entry shows a dot alone.

API Reference

Also accepts every prop of ol.

TimelineItem

Also accepts every prop of li.

time: ReactNode; Text in the time column.
timeDetail: ReactNode; Quieter second line under the time, such as a date.
tone= "default": "default" | "primary" | "success" | "warning" | "destructive"; Dot colour; primary marks the current or next entry.
action: ReactNode; Trailing control aligned with the first line.

Prop	Type	Default	Description
time	ReactNode	—	Text in the time column.
timeDetail	ReactNode	—	Quieter second line under the time, such as a date.
tone	"default" \| "primary" \| "success" \| "warning" \| "destructive"	"default"	Dot colour; `primary` marks the current or next entry.
action	ReactNode	—	Trailing control aligned with the first line.

data-tone: The item's tone.

Data attribute	Description
data-tone	The item's tone.

TimelineTitle

Also accepts every prop of div.

TimelineDescription

Also accepts every prop of div.