{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "announcement-3",
  "title": "Persisted Dismissible Banner",
  "description": "Single-line announcement banner that remembers its dismissal in localStorage over a page placeholder, with a link to show it again.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/announcement/3/announcement-block.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst STORAGE_KEY = \"acme-announcement-3-dismissed\"\n\nexport default function AnnouncementBlock() {\n  const [mounted, setMounted] = useState(false)\n  const [dismissed, setDismissed] = useState(false)\n\n  useEffect(() => {\n    const id = requestAnimationFrame(() => {\n      try {\n        if (localStorage.getItem(STORAGE_KEY) === \"true\") {\n          setDismissed(true)\n        }\n      } catch {}\n      setMounted(true)\n    })\n    return () => cancelAnimationFrame(id)\n  }, [])\n\n  function handleDismiss() {\n    setDismissed(true)\n    try {\n      localStorage.setItem(STORAGE_KEY, \"true\")\n    } catch {}\n  }\n\n  function handleReset() {\n    setDismissed(false)\n    try {\n      localStorage.removeItem(STORAGE_KEY)\n    } catch {}\n  }\n\n  return (\n    <section className=\"flex min-h-svh w-full flex-col items-center bg-muted/30 px-6 py-16 text-foreground\">\n      <div className=\"w-full max-w-5xl\">\n        {mounted && !dismissed && (\n          <div className=\"flex w-full items-center gap-3 rounded-lg border border-border bg-primary px-4 py-2.5 text-sm text-primary-foreground shadow-sm\">\n            <IconPlaceholder\n              lucide=\"Rocket\"\n              tabler=\"IconRocket\"\n              hugeicons=\"RocketIcon\"\n              phosphor=\"Rocket\"\n              remixicon=\"RiRocket2Line\"\n              className=\"hidden size-4 shrink-0 sm:block\"\n              aria-hidden=\"true\"\n            />\n            <p className=\"min-w-0 flex-1 truncate font-medium\">\n              <span className=\"font-semibold\">Acme Cloud is live.</span>{\" \"}\n              <span className=\"text-primary-foreground/80\">\n                Deploy in seconds with zero config.\n              </span>{\" \"}\n              <Button\n                variant=\"link\"\n                size=\"sm\"\n                render={<a href=\"#\" />}\n                nativeButton={false}\n                className=\"h-auto p-0 align-baseline text-primary-foreground underline underline-offset-2 hover:text-primary-foreground/80\"\n              >\n                Get Started\n              </Button>\n            </p>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label=\"Dismiss announcement\"\n              onClick={handleDismiss}\n              className=\"-mr-1 shrink-0 hover:bg-primary-foreground/10 hover:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"X\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"X\"\n                remixicon=\"RiCloseLine\"\n                aria-hidden=\"true\"\n              />\n            </Button>\n          </div>\n        )}\n\n        <div className=\"mx-auto mt-8 w-4/5 space-y-6\" aria-hidden=\"true\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"h-6 w-28 rounded-md bg-muted\" />\n            <div className=\"hidden items-center gap-3 sm:flex\">\n              <div className=\"h-3 w-12 rounded-md bg-muted\" />\n              <div className=\"h-3 w-12 rounded-md bg-muted\" />\n              <div className=\"h-7 w-16 rounded-md bg-muted\" />\n            </div>\n          </div>\n\n          <div className=\"space-y-2\">\n            <div className=\"h-6 w-1/2 rounded-md bg-muted\" />\n            <div className=\"h-3 w-full rounded-md bg-muted\" />\n            <div className=\"h-3 w-4/5 rounded-md bg-muted\" />\n          </div>\n\n          <div className=\"grid gap-3 sm:grid-cols-3\">\n            <div className=\"h-20 rounded-md bg-muted\" />\n            <div className=\"h-20 rounded-md bg-muted\" />\n            <div className=\"h-20 rounded-md bg-muted\" />\n          </div>\n        </div>\n\n        {mounted && dismissed && (\n          <p className=\"mt-8 text-center text-xs text-muted-foreground\">\n            Banner dismissed and saved to your browser.{\" \"}\n            <Button\n              variant=\"link\"\n              size=\"sm\"\n              onClick={handleReset}\n              className=\"h-auto p-0 align-baseline text-xs\"\n            >\n              Show It Again\n            </Button>\n          </p>\n        )}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "438px",
    "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": [
    "announcement"
  ],
  "type": "registry:block"
}