Timeline
Displays a vertical sequence of events, milestone dates, and activity logs connected by a timeline line.
6.4 KB
•Updated on August 21, 2026
Examples
With Left-Aligned Dates
With Custom Indicators
With Icons
Alternating Layout
Deployment Pipeline with Details
Milestones with Status Colors
Horizontal Orientation
Compact Horizontal Roadmap
Deployment Log Feed
Activity Feed with User Avatars
Interactive Horizontal Timeline
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-timelineUsage
Code
import {
Timeline,
TimelineContent,
TimelineDate,
TimelineHeader,
TimelineIndicator,
TimelineItem,
TimelineSeparator,
TimelineTitle,
} from '@/components/spaceui/timeline'Code
<Timeline>
<TimelineItem step={1}>
<TimelineHeader>
<TimelineDate>March 2024</TimelineDate>
<TimelineTitle>Project Initialized</TimelineTitle>
</TimelineHeader>
<TimelineIndicator />
<TimelineSeparator />
<TimelineContent>Successfully set up the project repository and initial architecture.</TimelineContent>
</TimelineItem>
</Timeline>API Reference
Timeline
The root component for the timeline.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number | 1 | The initial active step. |
value | number | - | The current active step (controlled). |
onValueChange | (value: number) => void | - | Callback fired when the active step changes. |
orientation | horizontal|vertical | vertical | The layout orientation of the timeline. |
TimelineItem
A single item in the timeline.
| Prop | Type | Default | Description |
|---|---|---|---|
step | number | - | Required. The step number for this item. |
TimelineDate
The date or time label for a timeline item.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the date label. |
TimelineTitle
The title for a timeline item.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the title. |
TimelineIndicator
The visual indicator (usually a dot) for a timeline item.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the indicator. |
TimelineSeparator
The line connecting timeline indicators.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the separator line. |
TimelineHeader
A container for the date and title.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the header container. |
TimelineContent
The main descriptive content for a timeline item.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the content container. |
All 12 variations
Activity feed timeline with user avatars
Compact horizontal milestone timeline
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
On This Page
ExamplesWith Left-Aligned DatesWith Custom IndicatorsWith IconsAlternating LayoutDeployment Pipeline with DetailsMilestones with Status ColorsHorizontal OrientationCompact Horizontal RoadmapDeployment Log FeedActivity Feed with User AvatarsInteractive Horizontal TimelineInstallationUsageAPI ReferenceTimelineTimelineItemTimelineDateTimelineTitleTimelineIndicatorTimelineSeparatorTimelineHeaderTimelineContentAll 12 variationsActivity feed timeline with user avatarsCompact horizontal milestone timeline
Powered by