{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "header-01",
  "title": "Sticky Top Navbar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/header-01/Header01.svelte",
      "content": "<script lang=\"ts\">\n  import { Boxes, Menu, X } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Sheet, SheetContent, SheetTrigger } from '$lib/components/ui/sheet'\n\n  let mobileOpen = $state(false)\n</script>\n\n<header\n  data-slot=\"header-01\"\n  class=\"bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur\"\n>\n  <div class=\"mx-auto flex h-16 max-w-6xl items-center justify-between px-6\">\n    <!-- svelte-ignore a11y_invalid_attribute: placeholder brand href mirrors the Vue twin; point it at a real route. -->\n    <a href=\"#\" class=\"flex items-center gap-2\">\n      <div class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n        <Boxes class=\"size-4\" />\n      </div>\n      <span class=\"text-base font-semibold\">Acme</span>\n    </a>\n\n    <nav class=\"hidden items-center gap-6 md:flex\" aria-label=\"Primary\">\n      <a href=\"#features\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Features</a>\n      <a href=\"#pricing\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Pricing</a>\n      <a href=\"#customers\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Customers</a>\n      <a href=\"#docs\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Docs</a>\n      <a href=\"#blog\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Blog</a>\n    </nav>\n\n    <div class=\"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 bind:open={mobileOpen}>\n      <SheetTrigger>\n        {#snippet child({ props })}\n          <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\" aria-label=\"Open menu\" {...props}>\n            <Menu class=\"size-5\" />\n          </Button>\n        {/snippet}\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"w-72\">\n        <div class=\"flex h-full flex-col\">\n          <div class=\"flex items-center justify-between border-b px-4 py-3\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md\">\n                <Boxes class=\"size-3.5\" />\n              </div>\n              <span class=\"text-sm font-semibold\">Acme</span>\n            </div>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"size-8\"\n              aria-label=\"Close menu\"\n              onclick={() => (mobileOpen = false)}\n            >\n              <X class=\"size-4\" />\n            </Button>\n          </div>\n          <nav class=\"flex flex-1 flex-col gap-1 p-4\" aria-label=\"Mobile\">\n            <a\n              href=\"#features\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n              onclick={() => (mobileOpen = false)}\n              >Features</a\n            >\n            <a\n              href=\"#pricing\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n              onclick={() => (mobileOpen = false)}\n              >Pricing</a\n            >\n            <a\n              href=\"#customers\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n              onclick={() => (mobileOpen = false)}\n              >Customers</a\n            >\n            <a\n              href=\"#docs\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n              onclick={() => (mobileOpen = false)}\n              >Docs</a\n            >\n            <a\n              href=\"#blog\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n              onclick={() => (mobileOpen = false)}\n              >Blog</a\n            >\n          </nav>\n          <div class=\"flex flex-col gap-2 border-t p-4\">\n            <Button variant=\"outline\" class=\"w-full\">Sign in</Button>\n            <Button class=\"w-full\">Start free trial</Button>\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </div>\n</header>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/header-01/Header01.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/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"
  ],
  "deprecated": true,
  "replacedBy": "header"
}