Milestone Timeline

Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.

Milestones

DesignApr 2

BuildApr 12

QAApr 22

LaunchMay 3

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Dashboard26 } from "@/components/beste/piece/dashboard26";

<Dashboard26
  heading="Milestones"
  steps={[
    {
      "label": "Design",
      "date": "Apr 2"
    },
    {
      "label": "Build",
      "date": "Apr 12"
    },
    {
      "label": "QA",
      "date": "Apr 22"
    },
    {
      "label": "Launch",
      "date": "May 3"
    }
  ]}
  current={2}
  tone="violet"
/>