Development Progress Milestones

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon2.tsx instead.

Usage

The file also exports comingsoon2Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon2, comingsoon2Demo } from "@/components/blocks/coming-soon/comingsoon2";

export default function Page() {
  return <ComingSoon2 {...comingsoon2Demo} />;
}

Props

Types

export type MilestoneStatus = "done" | "in-progress" | "upcoming";

export interface Milestone {
  name: string;
  status: MilestoneStatus;
}

Behavior notes

• Fully static: the progress bar width and each milestone's badge variant are derived directly from props at render time, no client state.
• The `progress` value is clamped to the 0-100 range before being used as the bar's inline width so out-of-range props can't overflow the track.