Timeline

Component 1

About

A composable timeline for displaying a sequence of chronological events, dates, or steps with vertical/horizontal orientation, alternating layout, RTL support, and completed/active/pending states.

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,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineHeader,
  TimelineItem,
  TimelineTime,
  TimelineTitle,
} from "@/components/ui/timeline";

const timelineItems = [
  {
    id: "research-and-planning",
    dateTime: "2025-01",
    date: "Jan - Mar",
    title: "Q1",
    description: "Research and planning",
  },
  {
    id: "development-sprint",
    dateTime: "2025-04",
    date: "Apr - Jun",
    title: "Q2",
    description: "Development sprint",
  },
  {
    id: "beta-launch",
    dateTime: "2025-07",
    date: "Jul - Sep",
    title: "Q3",
    description: "Beta launch",
  },
];

export default function TimelineHorizontalDemo() {
  return (
    <Timeline orientation="horizontal" activeIndex={1}>
      {timelineItems.map((item) => (
        <TimelineItem key={item.id}>
          <TimelineDot />
          <TimelineConnector />
          <TimelineContent>
            <TimelineHeader>
              <TimelineTitle>{item.title}</TimelineTitle>
              <TimelineTime dateTime={item.dateTime}>{item.date}</TimelineTime>
            </TimelineHeader>
            <TimelineDescription>{item.description}</TimelineDescription>
          </TimelineContent>
        </TimelineItem>
      ))}
    </Timeline>
  );
}