{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-01",
  "title": "Header 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/header-01/Header01.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Boxes, Menu, X } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'\n\nexport function Header01() {\n  const [mobileOpen, setMobileOpen] = React.useState(false)\n\n  return (\n    <header className=\"bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur\">\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center justify-between px-6\">\n        <a href=\"#\" className=\"flex items-center gap-2\">\n          <div className=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n            <Boxes className=\"size-4\" />\n          </div>\n          <span className=\"text-base font-semibold\">Acme</span>\n        </a>\n\n        <nav className=\"hidden items-center gap-6 md:flex\" aria-label=\"Primary\">\n          <a href=\"#features\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Features</a>\n          <a href=\"#pricing\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Pricing</a>\n          <a href=\"#customers\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Customers</a>\n          <a href=\"#docs\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Docs</a>\n          <a href=\"#blog\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Blog</a>\n        </nav>\n\n        <div className=\"hidden items-center gap-2 md:flex\">\n          <Button variant=\"ghost\" size=\"sm\">Sign in</Button>\n          <Button size=\"sm\">Start free trial</Button>\n        </div>\n\n        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\" aria-label=\"Open menu\">\n              <Menu className=\"size-5\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"right\" className=\"w-72\">\n            <div className=\"flex h-full flex-col\">\n              <div className=\"flex items-center justify-between border-b px-4 py-3\">\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md\">\n                    <Boxes className=\"size-3.5\" />\n                  </div>\n                  <span className=\"text-sm font-semibold\">Acme</span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-8\"\n                  aria-label=\"Close menu\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  <X className=\"size-4\" />\n                </Button>\n              </div>\n              <nav className=\"flex flex-1 flex-col gap-1 p-4\" aria-label=\"Mobile\">\n                <a\n                  href=\"#features\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Features\n                </a>\n                <a\n                  href=\"#pricing\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Pricing\n                </a>\n                <a\n                  href=\"#customers\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Customers\n                </a>\n                <a\n                  href=\"#docs\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Docs\n                </a>\n                <a\n                  href=\"#blog\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Blog\n                </a>\n              </nav>\n              <div className=\"flex flex-col gap-2 border-t p-4\">\n                <Button variant=\"outline\" className=\"w-full\">Sign in</Button>\n                <Button className=\"w-full\">Start free trial</Button>\n              </div>\n            </div>\n          </SheetContent>\n        </Sheet>\n      </div>\n    </header>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Header01.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/sheet.json"
  ],
  "description": "Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, \"Sign in\" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.",
  "categories": [
    "marketing"
  ]
}