{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline-1",
  "title": "Milestone Rail With Status",
  "description": "Vertical timeline of milestones on a left rail, each node carrying a date, a Shipped, In Progress, or Planned badge, a title, and supporting copy.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/timeline/1/timeline-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\nimport type * as React from \"react\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\n/** An icon held in data and rendered later, e.g. `<item.icon className=\"size-4\" />`. */\ntype IconRenderer = (props: IconProps) => React.ReactNode\n\ntype Status = \"Shipped\" | \"In Progress\" | \"Planned\"\n\nconst milestones: {\n  date: string\n  title: string\n  copy: string\n  icon: IconRenderer\n  status: Status\n}[] = [\n  {\n    date: \"Jan 2024\",\n    title: \"Acme founded\",\n    copy: \"Three engineers set out to make shipping software feel calm again, starting with a single internal tool.\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Sprout\"\n        tabler=\"IconSeedling\"\n        hugeicons=\"Plant01Icon\"\n        phosphor=\"Leaf\"\n        remixicon=\"RiSeedlingLine\"\n        {...p}\n      />\n    ),\n    status: \"Shipped\",\n  },\n  {\n    date: \"Jun 2024\",\n    title: \"Private beta\",\n    copy: \"The first 200 teams joined the waitlist and helped shape the core workflow over a summer of weekly releases.\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Flag\"\n        tabler=\"IconFlag\"\n        hugeicons=\"FlagIcon\"\n        phosphor=\"Flag\"\n        remixicon=\"RiFlagLine\"\n        {...p}\n      />\n    ),\n    status: \"Shipped\",\n  },\n  {\n    date: \"Nov 2024\",\n    title: \"Public launch\",\n    copy: \"Acme opened to everyone with a free tier, full light and dark themes, and a CLI that installs blocks in seconds.\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Rocket\"\n        tabler=\"IconRocket\"\n        hugeicons=\"RocketIcon\"\n        phosphor=\"Rocket\"\n        remixicon=\"RiRocketLine\"\n        {...p}\n      />\n    ),\n    status: \"Shipped\",\n  },\n  {\n    date: \"Mar 2025\",\n    title: \"Team workspaces\",\n    copy: \"Role-based access, shared libraries, and audit trails landed so larger organizations could adopt Acme safely.\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Users\"\n        tabler=\"IconUsersGroup\"\n        hugeicons=\"UserGroupIcon\"\n        phosphor=\"UsersThree\"\n        remixicon=\"RiTeamLine\"\n        {...p}\n      />\n    ),\n    status: \"In Progress\",\n  },\n  {\n    date: \"Q3 2025\",\n    title: \"AI assist\",\n    copy: \"Inline suggestions and natural-language search are next, generating production-ready sections from a short prompt.\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Sparkles\"\n        tabler=\"IconSparkles\"\n        hugeicons=\"SparklesIcon\"\n        phosphor=\"Sparkle\"\n        remixicon=\"RiSparkling2Line\"\n        {...p}\n      />\n    ),\n    status: \"Planned\",\n  },\n]\n\nconst statusVariant: Record<Status, \"default\" | \"secondary\" | \"outline\"> = {\n  Shipped: \"default\",\n  \"In Progress\": \"secondary\",\n  Planned: \"outline\",\n}\n\nexport default function TimelineBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-2xl\">\n        <div className=\"mb-12\">\n          <Badge variant=\"outline\" className=\"mb-4\">\n            Milestones\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight\">\n            From idea to launch\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            The releases that shaped Acme, and what is coming next.\n          </p>\n        </div>\n\n        <ol className=\"flex flex-col\">\n          {milestones.map((item, i) => {\n            const last = i === milestones.length - 1\n            return (\n              <li key={item.title} className=\"flex gap-5\">\n                <div className=\"flex flex-col items-center\">\n                  <span className=\"flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-card text-foreground\">\n                    <item.icon className=\"size-5\" aria-hidden=\"true\" />\n                  </span>\n                  {!last && (\n                    <span\n                      className=\"w-px flex-1 bg-border\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </div>\n\n                <div className={last ? \"pb-0\" : \"pb-10\"}>\n                  <div className=\"flex flex-wrap items-center gap-2.5\">\n                    <span className=\"font-mono text-xs text-muted-foreground tabular-nums\">\n                      {item.date}\n                    </span>\n                    <Badge variant={statusVariant[item.status]}>\n                      {item.status}\n                    </Badge>\n                  </div>\n                  <h3 className=\"mt-2 font-heading text-base font-semibold\">\n                    {item.title}\n                  </h3>\n                  <p className=\"mt-1.5 text-sm/relaxed text-muted-foreground\">\n                    {item.copy}\n                  </p>\n                </div>\n              </li>\n            )\n          })}\n        </ol>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/timeline-1.tsx"
    }
  ],
  "meta": {
    "height": "974px",
    "tier": "free"
  },
  "categories": [
    "timeline"
  ],
  "type": "registry:block"
}