{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changelog-01",
  "title": "Changelog 01",
  "description": "Timeline-style changelog listing product updates with version numbers, release dates, and descriptions. Use it on product or documentation sites to communicate release history and build trust with power users.",
  "dependencies": [],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "src/registry/blocks/changelog-01/changelog.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\n\ninterface ChangelogEntry {\n  version: string;\n  date: string;\n  title: string;\n  description?: string;\n  highlights?: string[];\n  img?: string;\n  type?: \"feature\" | \"improvement\" | \"fix\" | \"breaking\";\n}\n\ninterface Changelog01Props {\n  label?: string;\n  title?: string;\n  description?: string;\n  entries?: ChangelogEntry[];\n  className?: string;\n}\n\nconst typeColors: Record<string, string> = {\n  feature: \"bg-emerald-100 text-emerald-700\",\n  improvement: \"bg-blue-100 text-blue-700\",\n  fix: \"bg-amber-100 text-amber-700\",\n  breaking: \"bg-red-100 text-red-700\",\n};\n\nconst typeLabels: Record<string, string> = {\n  feature: \"New Feature\",\n  improvement: \"Improvement\",\n  fix: \"Bug Fix\",\n  breaking: \"Breaking Change\",\n};\n\nconst ChangelogEntryCard = ({\n  version,\n  date,\n  title,\n  description,\n  highlights,\n  img,\n  type,\n}: ChangelogEntry) => (\n  <div className=\"relative pb-12 pl-8 last:pb-0\">\n    <div className=\"absolute top-3 bottom-0 left-[7px] w-px bg-border last:hidden\" />\n    <div className=\"absolute top-1.5 left-0 size-4 rounded-full border-2 border-primary bg-primary\" />\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Badge variant=\"outline\" className=\"font-mono text-xs\">\n          {version}\n        </Badge>\n        {type && (\n          <Badge className={cn(\"text-xs font-medium\", typeColors[type])}>\n            {typeLabels[type]}\n          </Badge>\n        )}\n      </div>\n      <h3 className=\"text-xl font-medium tracking-tight\">{title}</h3>\n      <span className=\"text-sm text-muted-foreground\">{date}</span>\n      {description && (\n        <p className=\"leading-relaxed text-muted-foreground\">{description}</p>\n      )}\n      {img && (\n        <div className=\"overflow-hidden rounded-md border bg-muted/30\">\n          <img\n            src={img}\n            alt={title}\n            className=\"aspect-video w-full object-cover\"\n          />\n        </div>\n      )}\n      {highlights && highlights.length > 0 && (\n        <ul className=\"flex flex-col gap-2 pt-2\">\n          {highlights.map((highlight, index) => (\n            <li\n              key={index}\n              className=\"flex items-start gap-2 text-sm text-muted-foreground\"\n            >\n              <span className=\"mt-2 size-1 shrink-0 rounded-full bg-muted-foreground\" />\n              {highlight}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  </div>\n);\n\nconst Changelog01 = ({\n  label = \"Changelog\",\n  title = \"Our journey\",\n  description = \"Follow along as we ship new features, improvements, and fixes to make our product better every day.\",\n  entries = [\n    {\n      version: \"v2.4.0\",\n      date: \"January 15, 2025\",\n      title: \"AI-Powered Code Suggestions\",\n      description:\n        \"Introducing intelligent code suggestions powered by machine learning. Get real-time recommendations as you type.\",\n      img: \"https://www.shadcnship.com/images/image-preview.webp\",\n      type: \"feature\",\n      highlights: [\n        \"Context-aware code completions\",\n        \"Support for 15+ programming languages\",\n        \"Customizable suggestion preferences\",\n      ],\n    },\n    {\n      version: \"v2.3.2\",\n      date: \"January 8, 2025\",\n      title: \"Performance Improvements\",\n      description:\n        \"We've optimized the core engine for faster load times and smoother interactions across the platform.\",\n      type: \"improvement\",\n      highlights: [\n        \"50% faster initial page load\",\n        \"Reduced memory footprint\",\n        \"Improved caching strategy\",\n      ],\n    },\n    {\n      version: \"v2.3.1\",\n      date: \"December 20, 2024\",\n      title: \"Bug Fixes & Stability\",\n      description:\n        \"Addressed several reported issues to improve overall stability and user experience.\",\n      type: \"fix\",\n      highlights: [\n        \"Fixed authentication edge cases\",\n        \"Resolved file sync conflicts\",\n        \"Corrected timezone display issues\",\n      ],\n    },\n    {\n      version: \"v2.3.0\",\n      date: \"December 10, 2024\",\n      title: \"Team Collaboration Features\",\n      description:\n        \"Real-time collaboration tools that make working with your team seamless and intuitive.\",\n      img: \"https://www.shadcnship.com/images/image-preview.webp\",\n      highlights: [\n        \"Live cursor tracking\",\n        \"Inline comments and mentions\",\n        \"Activity feed and notifications\",\n      ],\n    },\n  ],\n  className,\n}: Changelog01Props) => (\n  <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n    <div className=\"mx-auto max-w-5xl\">\n      <div className=\"mb-12 flex flex-col gap-4\">\n        <p className=\"text-sm font-semibold tracking-widest text-muted-foreground uppercase\">\n          {label}\n        </p>\n        <h2 className=\"text-4xl font-medium tracking-tight md:text-5xl\">\n          {title}\n        </h2>\n        <p className=\"text-muted-foreground md:text-lg\">{description}</p>\n      </div>\n      <div className=\"relative\">\n        {entries.map((entry, index) => (\n          <ChangelogEntryCard key={index} {...entry} />\n        ))}\n      </div>\n    </div>\n  </section>\n);\n\nexport default Changelog01;\n",
      "type": "registry:component",
      "target": "components/changelog-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/changelog-01.webp",
    "imageDark": "/r/previews/changelog-01-dark.webp",
    "prose": {
      "about": "Changelog 01 is a timeline-style product changelog section that lists releases with version numbers, dates, release titles, descriptions, and bullet-point highlights. Each entry is displayed as a card alongside a vertical timeline connector. Built with shadcn/ui Card and Badge components, it accepts an array of release objects and renders them in reverse chronological order. Release type badges (feature, fix, breaking) are configurable per entry.",
      "whenToUse": [
        "Product pages or documentation sites that need a public release history to build transparency with users",
        "SaaS products where communicating shipping velocity builds trust and justifies subscription pricing",
        "Developer tools where power users care about version history and breaking change notices",
        "Open-source projects that want a polished public changelog without a third-party service"
      ],
      "notes": "Keep highlight bullet points to three or four items per release. Long release notes belong in a dedicated documentation page — link to it from the changelog entry rather than expanding the card."
    }
  },
  "categories": [
    "content"
  ],
  "type": "registry:block"
}