A vertical or horizontal timeline for showing a sequence of dated events, steps, or milestones with connected indicators and separators.
import {
Timeline,
TimelineContent,
TimelineDate,
TimelineHeader,
TimelineIndicator,
TimelineItem,
TimelineSeparator,
TimelineTitle,
} from "@/components/ui/timeline";
export default function TimelineDemo() {
return (
<Timeline defaultValue={2} className="w-full max-w-md">
<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>
<TimelineItem step={2}>
<TimelineHeader>
<TimelineDate>April 2024</TimelineDate>
<TimelineTitle>Beta Release</TimelineTitle>
</TimelineHeader>
<TimelineIndicator />
<TimelineSeparator />
<TimelineContent>
Launched the beta version for early testers and feedback.
</TimelineContent>
</TimelineItem>
<TimelineItem step={3}>
<TimelineHeader>
<TimelineDate>June 2024</TimelineDate>
<TimelineTitle>Official Launch</TimelineTitle>
</TimelineHeader>
<TimelineIndicator />
<TimelineSeparator />
<TimelineContent>
The platform is now live for all users worldwide.
</TimelineContent>
</TimelineItem>
</Timeline>
);
}
Part of ReUI — browse the full library on 21st.dev.