{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "changelog-3",
  "title": "In-App What's New Card",
  "description": "Compact what's new card with a version pill, release date, highlighted changes with type icons and badges, and a full changelog link.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/changelog/3/changelog-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardFooter, CardHeader } from \"@/components/ui/card\"\nimport { Separator } from \"@/components/ui/separator\"\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 ChangeType = \"New\" | \"Improved\" | \"Fixed\"\n\nconst changes: {\n  type: ChangeType\n  icon: IconRenderer\n  title: string\n  description: string\n}[] = [\n  {\n    type: \"New\",\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    title: \"Command palette\",\n    description:\n      \"Jump anywhere with Command K, now across your whole workspace.\",\n  },\n  {\n    type: \"Improved\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Gauge\"\n        tabler=\"IconGauge\"\n        hugeicons=\"GaugeIcon\"\n        phosphor=\"Gauge\"\n        remixicon=\"RiSpeedUpLine\"\n        {...p}\n      />\n    ),\n    title: \"Faster billing\",\n    description: \"The billing page loads about twice as fast on large teams.\",\n  },\n  {\n    type: \"Fixed\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Bug\"\n        tabler=\"IconBug\"\n        hugeicons=\"BugIcon\"\n        phosphor=\"Bug\"\n        remixicon=\"RiBugLine\"\n        {...p}\n      />\n    ),\n    title: \"Workspace rename\",\n    description: \"Renaming a busy workspace no longer triggers a sync error.\",\n  },\n]\n\nconst typeVariant: Record<ChangeType, \"default\" | \"secondary\" | \"outline\"> = {\n  New: \"default\",\n  Improved: \"secondary\",\n  Fixed: \"outline\",\n}\n\nexport default function ChangelogBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <Card className=\"w-full max-w-sm gap-0 py-0\">\n        <CardHeader className=\"gap-0 border-b border-border p-5\">\n          <div className=\"flex items-center justify-between gap-3\">\n            <span className=\"text-base font-semibold tracking-tight\">\n              What&apos;s New\n            </span>\n            <Badge variant=\"secondary\" className=\"font-mono tabular-nums\">\n              2.4.0\n            </Badge>\n          </div>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            Released Jun 18, 2026\n          </p>\n        </CardHeader>\n\n        <CardContent className=\"flex flex-col p-0\">\n          {changes.map((change, i) => (\n            <div key={change.title}>\n              {i > 0 && <Separator />}\n              <div className=\"flex items-start gap-3 p-4\">\n                <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/50 text-muted-foreground\">\n                  <change.icon className=\"size-4.5\" aria-hidden=\"true\" />\n                </span>\n                <div className=\"flex flex-col gap-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <h3 className=\"font-heading text-sm font-semibold\">\n                      {change.title}\n                    </h3>\n                    <Badge variant={typeVariant[change.type]}>\n                      {change.type}\n                    </Badge>\n                  </div>\n                  <p className=\"text-xs/relaxed text-muted-foreground\">\n                    {change.description}\n                  </p>\n                </div>\n              </div>\n            </div>\n          ))}\n        </CardContent>\n\n        <CardFooter className=\"border-t border-border p-3\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"w-full justify-between\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n          >\n            View Full Changelog\n            <IconPlaceholder\n              lucide=\"ArrowRight\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRightIcon\"\n              phosphor=\"ArrowRight\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        </CardFooter>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/changelog-3.tsx"
    }
  ],
  "meta": {
    "height": "565px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "changelog"
  ],
  "type": "registry:block"
}