{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changelog-4",
  "title": "Vertical Release Timeline",
  "description": "Changelog as a vertical timeline with a connected dot rail, each release showing a version badge, date, title, and color-coded changes.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/changelog/4/changelog-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype ChangeType = \"Added\" | \"Improved\" | \"Fixed\"\n\ntype Release = {\n  version: string\n  date: string\n  title: string\n  changes: { type: ChangeType; text: string }[]\n}\n\nconst typeStyles: Record<ChangeType, string> = {\n  Added: \"text-success\",\n  Improved: \"text-info\",\n  Fixed: \"text-warning\",\n}\n\nconst releases: Release[] = [\n  {\n    version: \"3.4.0\",\n    date: \"Jul 9, 2026\",\n    title: \"Saved views and faster search\",\n    changes: [\n      {\n        type: \"Added\",\n        text: \"Save any filtered view and pin it to the sidebar\",\n      },\n      { type: \"Improved\", text: \"Search now returns results in under 100ms\" },\n      { type: \"Fixed\", text: \"Keyboard shortcuts no longer fire while typing\" },\n    ],\n  },\n  {\n    version: \"3.3.0\",\n    date: \"Jun 28, 2026\",\n    title: \"Team roles and audit log\",\n    changes: [\n      { type: \"Added\", text: \"Granular member roles for owners and editors\" },\n      { type: \"Added\", text: \"Exportable audit log for the last ninety days\" },\n      { type: \"Improved\", text: \"Invitations now expire after seven days\" },\n    ],\n  },\n  {\n    version: \"3.2.1\",\n    date: \"Jun 12, 2026\",\n    title: \"Stability and polish\",\n    changes: [\n      { type: \"Fixed\", text: \"Resolved a rare crash when reordering columns\" },\n      { type: \"Improved\", text: \"Reduced initial bundle size by roughly 18%\" },\n    ],\n  },\n]\n\nfunction ReleaseEntry({ release }: { release: Release }) {\n  return (\n    <div className=\"relative flex gap-6 pb-10 last:pb-0\">\n      <div className=\"absolute top-2 bottom-0 left-[5px] w-px bg-border\" />\n      <span className=\"relative z-10 mt-1.5 size-2.5 shrink-0 rounded-full bg-foreground ring-4 ring-background\" />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center gap-3\">\n          <Badge className=\"font-mono\">{release.version}</Badge>\n          <span className=\"text-xs text-muted-foreground tabular-nums\">\n            {release.date}\n          </span>\n        </div>\n        <h3 className=\"mt-3 font-heading text-lg font-semibold tracking-tight text-foreground\">\n          {release.title}\n        </h3>\n        <ul className=\"mt-3 flex flex-col gap-2\">\n          {release.changes.map((change, i) => (\n            <li key={i} className=\"flex items-baseline gap-2.5 text-sm\">\n              <span\n                className={\n                  \"w-16 shrink-0 text-xs font-medium \" + typeStyles[change.type]\n                }\n              >\n                {change.type}\n              </span>\n              <span className=\"text-pretty text-muted-foreground\">\n                {change.text}\n              </span>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  )\n}\n\nexport default function ChangelogBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"w-full max-w-2xl\">\n        <div className=\"mb-12 flex flex-col items-start\">\n          <Badge variant=\"secondary\">\n            <IconPlaceholder\n              lucide=\"Flashlight\"\n              tabler=\"IconBulb\"\n              hugeicons=\"FlashlightIcon\"\n              phosphor=\"Flashlight\"\n              remixicon=\"RiFlashlightLine\"\n              data-icon=\"inline-start\"\n              aria-hidden=\"true\"\n            />\n            Changelog\n          </Badge>\n          <h2 className=\"mt-4 font-heading text-2xl font-bold tracking-tight text-balance sm:text-3xl\">\n            What&apos;s New\n          </h2>\n          <p className=\"mt-2 text-pretty text-muted-foreground\">\n            Product updates and improvements, shipped every couple of weeks.\n          </p>\n        </div>\n\n        <div>\n          {releases.map((release) => (\n            <ReleaseEntry key={release.version} release={release} />\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/changelog-4.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "success": "oklch(0.432 0.095 166.913)",
      "warning": "oklch(0.473 0.137 46.201)",
      "info": "oklch(0.443 0.110 240.790)"
    },
    "dark": {
      "success": "oklch(0.765 0.177 163.223)",
      "warning": "oklch(0.828 0.189 84.429)",
      "info": "oklch(0.746 0.160 232.661)"
    }
  },
  "meta": {
    "height": "784px",
    "tier": "free"
  },
  "categories": [
    "changelog"
  ],
  "type": "registry:block"
}