Horizontal Track

Milestones laid out on a horizontal track, grouped by time horizon from now to six months out.

Preview

Now

Next Quarter

6 Months

Today

Installation

npx shadcn add https://www.reflet.app/r/milestone-track-view.json

Usage

import { MilestoneTrackView } from "@/components/ui/milestone-track-view";

import { MilestoneTrackView } from "@/components/ui/milestone-track-view";

const MILESTONES = [
  {
    id: "m1",
    name: "Public Beta Launch",
    emoji: "🚀",
    colorHex: "#0b6e99",
    horizonLabel: "Now",
    horizonShort: "Now",
    targetDate: "Mar 15",
    progress: { total: 8, completed: 5, inProgress: 2, percentage: 63 },
  },
  // ...
];

export function TrackViewDemo() {
  return <MilestoneTrackView milestones={MILESTONES} />;
}

Features

Milestones sit in three zones by horizonShort: "Now", "3mo" (Next Quarter) and "6mo" (6 Months).
Farther zones get slightly more width, so the track reads as time stretching out.
Each milestone is tinted with its own colorHex.
Click a milestone to show its completed and total item counts; click again to hide them.