Milestone Chart

Component 1

About

A horizontal timeline component that shows milestone checkpoints along a progress track, marking which ones have been reached.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Milestone Chart to your project and fits it to your theme.

Code

How Milestone Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { MilestoneChart } from "@/components/ui/milestone-chart";

export default function MilestoneChartDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-8">
      <MilestoneChart
        milestones={[
          { id: "1", label: "Doors Open", date: "18:00", reached: true },
          { id: "2", label: "Soundcheck", date: "19:00", reached: true },
          { id: "3", label: "Main Stage", date: "20:30", reached: false },
          { id: "4", label: "Curtain Call", date: "23:00", reached: false },
        ]}
      />
    </div>
  );
}