Milestone Timeline

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/about/about62.tsx instead.

Usage

The file also exports about62Demo, 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 { About62, about62Demo } from "@/components/blocks/about/about62";

export default function Page() {
  return <About62 {...about62Demo} />;
}

Props

Types

type Milestone = {
  year: string;
  title: string;
  description: string;
};

Behavior notes

• Unlike About3, which pairs its vertical timeline with a stats column in a two-up grid, About62 runs the header full-width above the timeline and the timeline alone below it, in a single narrower max-w-3xl column.
• Each milestone's year renders as an outline Badge rather than About3's plain colored text, giving every entry a consistent pill shape regardless of year-string length.
• The timeline rail uses a background-colored ring around each dot (border-2 border-background) so the marker reads as a solid dot cut out of the line, instead of About3's plain filled circle with no ring.