{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "banner-02",
  "title": "Dismissible update banner",
  "description": "Muted-background release announcement with a close button that removes the bar on click.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/banner/banner-02.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { X } from \"lucide-react\"\n\nexport default function Banner02() {\n  const [visible, setVisible] = React.useState(true)\n\n  if (!visible) return null\n\n  return (\n    <div className=\"relative w-full bg-muted px-10 py-3\">\n      <p className=\"text-center text-sm text-foreground\">\n        <span className=\"font-semibold\">v2.0 is live.</span>{\" \"}\n        Tailwind v4 support, new block categories, and a refreshed docs site.\n      </p>\n      <button\n        type=\"button\"\n        onClick={() => setVisible(false)}\n        aria-label=\"Dismiss\"\n        className=\"absolute right-3 top-1/2 -translate-y-1/2 grid size-7 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-background hover:text-foreground\"\n      >\n        <X className=\"size-4\" />\n      </button>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/banner-02.tsx"
    }
  ],
  "categories": [
    "banner"
  ],
  "type": "registry:block"
}