Timeline

Data Display

A vertical list of events with a dot marker and a connecting line.

Timeline and TimelineItem compose a vertical event feed. Each item draws a dot and a connecting line on the left, with title, description, and optional time on the right.

npx shadcn@latest add timeline

Default

A history of events with the most recent one highlighted.

Preview

Live

Deployed v2.4.1
2h ago
Rolled out the new billing experience to all workspaces.
Database migration
Yesterday
Migrated analytics tables to the new partitioned schema.
Workspace created
Apr 12
Shelf was provisioned with the Starter plan.

tsx

1<Timeline>
2  <TimelineItem
3    title="Deployed v2.4.1"
4    description="Rolled out the new billing experience."
5    time="2h ago"
6    active
7  />
8  <TimelineItem
9    title="Database migration"
10    description="Migrated analytics tables."
11    time="Yesterday"
12  />
13  <TimelineItem
14    title="Workspace created"
15    description="Provisioned with the Starter plan."
16    time="Apr 12"
17    last
18  />
19</Timeline>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
title	string	The event headline.
description	string	Optional supporting text.
time	string	Optional timestamp shown next to the title.
active	boolean= false	Highlights the dot with the primary color.
last	boolean= false	Drops the trailing connector line on the final item.