Roadmap Timeline

Quarterly roadmap strip with violet-ringed milestone dots spaced along a rail and labels underneath.

Q2 · roadmap

KickoffApr 01

Design freezeMay 06

BetaMay 27

GA launchJun 17

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

Import & use

import { Calendar28 } from "@/components/beste/piece/calendar28";

<Calendar28
  quarter="Q2 · roadmap"
  milestones={[
    {
      "label": "Kickoff",
      "when": "Apr 01"
    },
    {
      "label": "Design freeze",
      "when": "May 06"
    },
    {
      "label": "Beta",
      "when": "May 27"
    },
    {
      "label": "GA launch",
      "when": "Jun 17"
    }
  ]}
/>