Timeline

Component 1

About

A vertical list of dated events — an activity feed, audit log or project history — with colored/icon markers, optional alternating layout, locale-aware timestamps and a loading skeleton state.

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";

import { Flag, Rocket, Users, Wrench } from "lucide-react";

// Milestones on both sides of the line - on one side on phones
export default function Alternate() {
  return (
    <Timeline
      alternate
      items={[
        {
          description: "Scope and budget approved",
          icon: <Flag />,
          time: new Date(2026, 0, 12),
          title: "Kick-off",
        },
        {
          description: "24 interviews with dispatchers",
          icon: <Users />,
          time: new Date(2026, 2, 2),
          title: "User research",
        },
        {
          description: "Two depots, 40 drivers",
          icon: <Wrench />,
          time: new Date(2026, 5, 15),
          title: "Pilot in Brno",
        },
        {
          description: "All 14 depots",
          icon: <Rocket />,
          pending: true,
          time: new Date(2026, 9, 1),
          title: "Nationwide launch",
        },
      ]}
      timeFormat={{ dateStyle: "medium" }}
    />
  );
}