Dashboard Timeline

A dashboard-style milestone view: a summary bar of overall progress above a vertical timeline.

Preview

19%

6/31

6 done

5 in progress

Installation

npx shadcn add https://www.reflet.app/r/milestone-dashboard-timeline.json

Usage

import { MilestoneDashboardTimeline } from "@/components/ui/milestone-dashboard-timeline";

import { MilestoneDashboardTimeline } from "@/components/ui/milestone-dashboard-timeline";

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 DashboardTimelineDemo() {
  return <MilestoneDashboardTimeline milestones={MILESTONES} />;
}

Features

A summary bar on top: overall progress ring, items done out of total, and in-progress count.
Milestones below on a vertical timeline, each with a split bar for done and in-progress items.
Clicking a milestone plays a short sweep across its row and shows its details.