{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "banner-01",
  "title": "Banner 01",
  "description": "Full-width announcement banner with a short message, an arrow link, and a dismiss button. Use it at the top of any page to surface time-sensitive promotions, feature launches, or important product updates.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/registry/blocks/banner-01/banner.tsx",
      "content": "import { ArrowUpRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface Banner01Props {\n  title?: string;\n  description?: string;\n  button?: {\n    text: string;\n    url?: string;\n    icon?: React.ReactNode;\n    variant?: \"default\" | \"outline\" | \"ghost\" | \"secondary\" | \"link\";\n  };\n  className?: string;\n}\n\nconst Banner01 = ({\n  title = \"Shadcn 2026\",\n  description = \"Join us in Paris from June 20 - 24 to see what's coming next.\",\n  button = {\n    text: \"Register now\",\n    url: \"#\",\n    variant: \"outline\",\n    icon: (\n      <ArrowUpRight className=\"size-4 transition-transform group-hover:translate-x-0.5\" />\n    ),\n  },\n  className,\n}: Banner01Props) => {\n  return (\n    <div className={cn(\"fixed top-0 w-full border-b bg-background\", className)}>\n      <div className=\"container mx-auto flex flex-col items-center justify-between gap-2 px-4 py-3 md:flex-row md:gap-4 md:px-6\">\n        <p className=\"flex-col text-sm\">\n          <span className=\"font-semibold\">{title}</span>\n          <span className=\"mx-2 text-muted-foreground\">·</span>\n          <span className=\"text-muted-foreground\">{description}</span>\n        </p>\n        {button && (\n          <Button\n            key={button.text}\n            variant={button.variant ?? \"default\"}\n            asChild\n          >\n            <a\n              href={button.url}\n              className=\"group flex w-full shrink-0 items-center gap-1 text-sm font-medium md:w-fit\"\n            >\n              {button.text}\n              {button.icon}\n            </a>\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Banner01;\n",
      "type": "registry:component",
      "target": "components/banner-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/banner-01.webp",
    "imageDark": "/r/previews/banner-01-dark.webp",
    "prose": {
      "about": "Banner 01 is a full-width announcement banner designed to appear at the very top of a page, above the navbar. It displays a short message with an inline arrow link and a dismiss button that hides the banner via local state. Built with shadcn/ui and Tailwind CSS, it is fully accessible with proper ARIA labels on the dismiss button. The banner text, link URL, and link label are all configurable via props.",
      "whenToUse": [
        "Time-sensitive promotions such as launch discounts, limited offers, or seasonal sales",
        "Feature announcements where you want every site visitor to see a specific message for a period of time",
        "Important product notices like scheduled maintenance windows or policy changes",
        "Product Hunt launches where surfacing the launch link to all visitors for a 24-hour period drives votes"
      ],
      "notes": "Persist the dismissed state in localStorage rather than component state if you want the banner to stay hidden across page navigations. The current implementation resets on page reload.",
      "faqs": [
        {
          "question": "Does the dismiss state persist across page reloads?",
          "answer": "No, by default it resets on reload since it uses component state. Persist it in localStorage in the dismiss handler if you want it to stay hidden."
        },
        {
          "question": "Can I use it without the arrow link?",
          "answer": "Yes, the link URL and label are props — omit them and the banner renders as a plain message with just the dismiss button."
        },
        {
          "question": "Where should it sit relative to my navbar?",
          "answer": "Above it. Banner 01 is designed to sit at the very top of the page, before the navbar."
        }
      ]
    }
  },
  "categories": [
    "cta"
  ],
  "type": "registry:block"
}