{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "announcement-1",
  "title": "Dismissible Bar And Callout",
  "description": "Dismissible top announcement bar above a centered release callout card with a What's New badge, headline, and two call-to-action buttons.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/announcement/1/announcement-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nexport default function AnnouncementBlock() {\n  const [dismissed, setDismissed] = useState(false)\n\n  return (\n    <section className=\"flex min-h-svh w-full flex-col items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <div className=\"w-full max-w-2xl\">\n        {!dismissed && (\n          <div className=\"flex w-full items-center justify-between gap-3 rounded-lg border border-border bg-primary px-4 py-2.5 text-primary-foreground\">\n            <div className=\"flex items-center gap-2 text-sm font-medium\">\n              <IconPlaceholder\n                lucide=\"Megaphone\"\n                tabler=\"IconSpeakerphone\"\n                hugeicons=\"MegaphoneIcon\"\n                phosphor=\"Megaphone\"\n                remixicon=\"RiMegaphoneLine\"\n                className=\"size-4 shrink-0\"\n                aria-hidden=\"true\"\n              />\n              <span>\n                Acme 3.0 is here: faster, smarter, and redesigned.{\" \"}\n                <Button\n                  variant=\"link\"\n                  size=\"sm\"\n                  render={<a href=\"#\" />}\n                  nativeButton={false}\n                  className=\"h-auto p-0 text-primary-foreground underline underline-offset-2 hover:text-primary-foreground/80\"\n                >\n                  Read The Announcement\n                  <span className=\"sr-only\"> (opens in same tab)</span>\n                </Button>\n              </span>\n            </div>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label=\"Dismiss announcement\"\n              onClick={() => setDismissed(true)}\n              className=\"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=\"mt-6 rounded-lg border border-border bg-card px-6 py-10 text-center sm:px-10\">\n          <Badge variant=\"secondary\">\n            <IconPlaceholder\n              lucide=\"Sparkles\"\n              tabler=\"IconSparkles\"\n              hugeicons=\"SparklesIcon\"\n              phosphor=\"Sparkle\"\n              remixicon=\"RiSparkling2Line\"\n              data-icon=\"inline-start\"\n              aria-hidden=\"true\"\n            />\n            What&apos;s New\n          </Badge>\n          <h2 className=\"mt-4 font-heading text-2xl font-bold tracking-tight sm:text-3xl\">\n            Introducing Acme 3.0\n          </h2>\n          <p className=\"mx-auto mt-3 max-w-md text-sm text-muted-foreground\">\n            A faster engine, a redesigned workspace, and powerful new\n            automations. Everything your team needs to ship sooner.\n          </p>\n          <div className=\"mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n            <Button\n              render={<a href=\"#\" />}\n              nativeButton={false}\n              className=\"w-full sm:w-auto\"\n            >\n              Explore The Release\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            <Button\n              variant=\"outline\"\n              render={<a href=\"#\" />}\n              nativeButton={false}\n              className=\"w-full sm:w-auto\"\n            >\n              View Changelog\n            </Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "444px",
    "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"
}