The Timeline component displays events, milestones, or steps in chronological order with visual indicators showing progress and completion state.
Project Started
Initial project kickoff and requirements gathering.
Development Phase
Core feature implementation in progress.
Launch
Public release and documentation.
<Timeline defaultValue={2}>
<TimelineItem step={1}>
<TimelineIndicator />
<TimelineSeparator />
<TimelineTitle>Project Started</TimelineTitle>
<TimelineDate>Jan 15, 2024</TimelineDate>
<TimelineContent>
Initial project kickoff and requirements gathering.
</TimelineContent>
</TimelineItem>
{/* ... more items */}
</Timeline>
Control spacing with size prop: sm, md (default), or lg.
Small Size
Compact spacing for dense timelines.
Second Item
More content here.
<Timeline defaultValue={2} size="sm">
{/* Compact spacing */}
</Timeline>
<Timeline defaultValue={2} size="lg">
{/* Larger spacing */}
</Timeline>
Use the icon prop on TimelineIndicator to display Lucide icons:
Completed
This step is done.
In Progress
Currently working on this.
Launch
Ready for deployment.
<TimelineIndicator icon="check" />
<TimelineIndicator icon="clock" />
<TimelineIndicator icon="rocket" />
Show step numbers instead of dots with showNumber:
<TimelineIndicator showNumber data-step={1} />
Apply custom colors to indicators and separators:
<TimelineIndicator color="#10b981" />
<TimelineSeparator color="#10b981" />
<TimelineBadge variant="success">Completed</TimelineBadge>
Customize the separator with lineStyle:
<TimelineSeparator lineStyle="dashed" />
<TimelineSeparator lineStyle="dotted" />
<TimelineSeparator lineStyle="solid" />
Move indicators to the right with iconPosition="right":
Right-aligned indicator
The indicator appears on the right side.
In Progress
Currently being worked on.
<Timeline iconPosition="right">
{/* Indicators on the right */}
</Timeline>
Use collapsed prop for expandable content:
Expandable Content
Regular Content
This content is always visible.
<TimelineContent collapsed>
Long content that can be expanded...
</TimelineContent>
Use orientation="horizontal" for a horizontal layout:
<Timeline orientation="horizontal">
{/* Horizontal layout */}
</Timeline>
Use variant="card" for a boxed look:
Documentation Created
Initial documentation structure and content.
Feature Branch Merged
New features integrated into main branch.
<Timeline variant="card">
{/* Each item has a card-like appearance */}
</Timeline>
The root component that wraps all timeline items.
The initial active step (1-indexed). Steps at or below this value are marked as completed.
Controlled active step value.
Callback when the active step changes.
orientation
'vertical' | 'horizontal'
default: vertical
Layout orientation of the timeline.
variant
'default' | 'outline' | 'ghost' | 'card'
default: default
size
'sm' | 'md' | 'lg'
default: md
Size preset controlling spacing and indicator sizes.
iconPosition
'left' | 'right'
default: left
Position of the indicator on each item.
Container for each timeline entry.
The step number for this item (1-indexed). Used to determine completion state.
The circular indicator showing completion state.
Lucide icon name to display (e.g., "check", "rocket", "clock").
Custom icon size in pixels.
Image URL for avatar/logo display.
Show step number instead of dot. Requires data-step prop.
Custom color for the indicator (CSS color value).
The line connecting timeline items.
Custom color for the line.
lineStyle
'solid' | 'dashed' | 'dotted'
default: solid
Style of the connecting line.
The heading text for a timeline item. Automatically aligns with the indicator.
as
'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span'
default: h3
Optional description content below the title.
When true, content is hidden with a "Show more" toggle.
Date/time display for the timeline item.
position
'inline' | 'above' | 'below' | 'side'
default: inline
Position of the date relative to the title.
Value for the datetime attribute (for accessibility).
Display images within timeline items.
imageSize
'sm' | 'md' | 'lg' | 'full'
default: md
Size preset for the image.
rounded
'none' | 'sm' | 'md' | 'lg' | 'full'
default: md
Display tags or labels within timeline items.
variant
'default' | 'primary' | 'success' | 'warning' | 'danger'
default: default
Color variant for the badge.