{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-transparent-scroll",
  "title": "Header — Transparent Over Hero",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/header-transparent-scroll/HeaderTransparentScroll.tsx",
      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Menu, Layers } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst links = [\n  { label: 'Product', href: '#product' },\n  { label: 'Solutions', href: '#solutions' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Docs', href: '#docs' },\n]\n\nexport function HeaderTransparentScroll() {\n  // Starts unscrolled so server and first client paint agree; the listener is\n  // the only thing that swaps in the solid surface.\n  const [scrolled, setScrolled] = useState(false)\n  const [open, setOpen] = useState(false)\n\n  useEffect(() => {\n    const onScroll = () => setScrolled(window.scrollY > 24)\n    onScroll()\n    window.addEventListener('scroll', onScroll, { passive: true })\n    return () => window.removeEventListener('scroll', onScroll)\n  }, [])\n\n  return (\n    <header\n      data-slot=\"header-transparent-scroll\"\n      className={`fixed inset-x-0 top-0 z-40 transition-colors duration-200 ${\n        scrolled ? 'border-border bg-background/85 border-b backdrop-blur' : 'border-b border-transparent'\n      }`}\n    >\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n        <a href=\"#top\" className=\"flex items-center gap-2 font-semibold tracking-tight\">\n          <Layers className=\"text-primary size-5\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n\n        <nav className=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n          {links.map((link) => (\n            <a\n              key={link.href}\n              href={link.href}\n              className=\"text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n\n        <div className=\"ml-auto hidden items-center gap-2 md:flex\">\n          <Button variant=\"ghost\" size=\"sm\">\n            Sign in\n          </Button>\n          <Button size=\"sm\">Start free</Button>\n        </div>\n\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"ml-auto md:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"right\" className=\"w-72\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav className=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n              {links.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  onClick={() => setOpen(false)}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n            <Separator className=\"my-5\" />\n            <div className=\"grid gap-2\">\n              <Button variant=\"outline\">Sign in</Button>\n              <Button>Start free</Button>\n            </div>\n          </SheetContent>\n        </Sheet>\n      </div>\n    </header>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeaderTransparentScroll.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/sheet.json"
  ],
  "description": "Marketing navbar that starts transparent over the hero and fades in a bordered, blurred surface once the page scrolls, with a nav row, theme-neutral CTA pair, and a mobile sheet.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}