About
A horizontal or vertical timeline for displaying ordered events, process steps, milestones, or roadmaps, with optional custom markers and alternating layout.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Timeline to your project and fits it to your theme.
Code
How Timeline is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Timeline } from "@/components/ui/timeline";
export default function TimelineDemo() {
return (
<div className="w-full max-w-3xl mx-auto p-8">
<Timeline>
<Timeline.Item label="Q1 2024">
Defined scope and core architecture
</Timeline.Item>
<Timeline.Item label="Q2 2024">Built component library</Timeline.Item>
<Timeline.Item label="Q3 2024">Public beta launch</Timeline.Item>
<Timeline.Item label="Q4 2024">v1.0 GA release</Timeline.Item>
</Timeline>
</div>
);
}
More by slide-cn
View all
Slide Image
8
Title Slide
6
Radial Gradient Background