{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-2",
  "type": "registry:block",
  "description": "Elegant responsive header with scroll-based styling, mobile drawer menu, and smooth transitions.",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/header/2/header.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Logo } from \"@/components/logo\";\nimport { MenuToggleIcon } from \"@/components/menu-toggle-icon\";\nimport { Button, buttonVariants } from \"@/components/ui/button\";\nimport { useScroll } from \"@/hooks/use-scroll\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Header() {\n  const [open, setOpen] = React.useState(false);\n  const scrolled = useScroll(10);\n\n  const links = [\n    {\n      label: \"Features\",\n      href: \"#\",\n    },\n    {\n      label: \"Pricing\",\n      href: \"#\",\n    },\n    {\n      label: \"About\",\n      href: \"#\",\n    },\n  ];\n\n  React.useEffect(() => {\n    if (open) {\n      // Disable scroll\n      document.body.style.overflow = \"hidden\";\n    } else {\n      // Re-enable scroll\n      document.body.style.overflow = \"\";\n    }\n\n    // Cleanup when component unmounts (important for Next.js)\n    return () => {\n      document.body.style.overflow = \"\";\n    };\n  }, [open]);\n\n  return (\n    <header\n      className={cn(\n        \"sticky top-0 z-50 mx-auto w-full max-w-4xl border-transparent border-b md:rounded-md md:border md:transition-all md:ease-out\",\n        {\n          \"border-border bg-background/95 backdrop-blur-lg supports-[backdrop-filter]:bg-background/50 md:top-4 md:max-w-3xl md:shadow\":\n            scrolled,\n        }\n      )}\n    >\n      <nav\n        className={cn(\n          \"flex h-14 w-full items-center justify-between px-4 md:h-12 md:transition-all md:ease-out\",\n          {\n            \"md:px-2\": scrolled,\n          }\n        )}\n      >\n        <a className=\"rounded-md p-2 hover:bg-accent\" href=\"#\">\n          <Logo className=\"h-4\" />\n        </a>\n        <div className=\"hidden items-center gap-2 md:flex\">\n          {links.map((link, i) => (\n            <a\n              className={buttonVariants({ variant: \"ghost\" })}\n              href={link.href}\n              key={i}\n            >\n              {link.label}\n            </a>\n          ))}\n          <Button variant=\"outline\">Sign In</Button>\n          <Button>Get Started</Button>\n        </div>\n        <Button\n          className=\"md:hidden\"\n          onClick={() => setOpen(!open)}\n          size=\"icon\"\n          variant=\"outline\"\n        >\n          <MenuToggleIcon className=\"size-5\" duration={300} open={open} />\n        </Button>\n      </nav>\n\n      <MobileMenu className=\"flex flex-col justify-between gap-2\" open={open}>\n        <div className=\"grid gap-y-2\">\n          {links.map((link) => (\n            <a\n              className={buttonVariants({\n                variant: \"ghost\",\n                className: \"justify-start\",\n              })}\n              href={link.href}\n              key={link.label}\n            >\n              {link.label}\n            </a>\n          ))}\n        </div>\n        <div className=\"flex flex-col gap-2\">\n          <Button className=\"w-full bg-transparent\" variant=\"outline\">\n            Sign In\n          </Button>\n          <Button className=\"w-full\">Get Started</Button>\n        </div>\n      </MobileMenu>\n    </header>\n  );\n}\n\ntype MobileMenuProps = React.ComponentProps<\"div\"> & {\n  open: boolean;\n};\n\nfunction MobileMenu({ open, children, className, ...props }: MobileMenuProps) {\n  if (!open || typeof window === \"undefined\") {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        \"bg-background/95 backdrop-blur-lg supports-[backdrop-filter]:bg-background/50\",\n        \"fixed top-14 right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden border-y md:hidden\"\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className={cn(\n          \"data-[slot=open]:zoom-in-97 ease-out data-[slot=open]:animate-in\",\n          \"size-full p-4\",\n          className\n        )}\n        data-slot={open ? \"open\" : \"closed\"}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>,\n    document.body\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/logo.tsx",
      "content": "import type React from \"react\";\n\nexport const LogoIcon = (props: React.ComponentProps<\"svg\">) => (\n  <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <path\n      d=\"M 15.03125 23.851562 C 14.117188 23.609375 13.417969 23 13 22.101562 C 12.808594 21.691406 12.808594 21.613281 12.808594 18.375 C 12.808594 15.066406 12.808594 15.066406 13.097656 14.484375 C 13.429688 13.8125 13.898438 13.351562 14.585938 13.027344 C 15.074219 12.800781 15.074219 12.800781 18.386719 12.800781 C 21.699219 12.800781 21.699219 12.800781 22.28125 13.089844 C 22.953125 13.421875 23.414062 13.890625 23.738281 14.578125 C 23.964844 15.066406 23.964844 15.066406 23.988281 18.140625 C 24.015625 20.769531 24 21.285156 23.875 21.710938 C 23.5625 22.789062 22.769531 23.582031 21.699219 23.863281 C 20.964844 24.042969 15.746094 24.042969 15.03125 23.851562 Z M 21.679688 22.390625 C 21.863281 22.304688 22.117188 22.085938 22.246094 21.917969 C 22.480469 21.613281 22.480469 21.613281 22.480469 18.375 C 22.480469 15.136719 22.480469 15.136719 22.238281 14.824219 C 21.757812 14.1875 21.792969 14.195312 18.386719 14.195312 C 15.667969 14.195312 15.308594 14.214844 15.066406 14.34375 C 14.691406 14.542969 14.359375 14.960938 14.246094 15.355469 C 14.144531 15.753906 14.132812 20.847656 14.246094 21.328125 C 14.386719 21.9375 14.847656 22.398438 15.441406 22.519531 C 15.625 22.554688 17.027344 22.582031 18.5625 22.574219 C 21.105469 22.554688 21.375 22.539062 21.679688 22.390625 Z M 21.679688 22.390625 \"\n      opacity=\"50%\"\n    />\n    <path d=\"M 2.859375 23.085938 C 2.089844 22.84375 1.324219 22.15625 0.976562 21.398438 C 0.792969 20.996094 0.785156 20.882812 0.785156 17.636719 C 0.785156 14.28125 0.785156 14.28125 1.019531 13.785156 C 1.296875 13.1875 1.855469 12.609375 2.441406 12.324219 C 2.875 12.105469 2.875 12.105469 6.195312 12.078125 C 9.4375 12.054688 9.523438 12.0625 10.03125 12.246094 C 10.71875 12.507812 11.441406 13.21875 11.730469 13.933594 C 11.9375 14.457031 11.9375 14.472656 11.9375 17.636719 C 11.9375 21.136719 11.9375 21.128906 11.371094 21.953125 C 11.03125 22.433594 10.550781 22.800781 9.925781 23.035156 C 9.480469 23.199219 9.261719 23.207031 6.335938 23.199219 C 4.035156 23.199219 3.128906 23.164062 2.859375 23.085938 Z M 2.859375 23.085938 \" />\n    <path d=\"M 13.898438 11.695312 C 13.226562 11.4375 12.503906 10.703125 12.25 10.023438 C 12.070312 9.519531 12.058594 9.433594 12.085938 6.195312 C 12.113281 2.929688 12.113281 2.867188 12.3125 2.476562 C 12.636719 1.824219 13.070312 1.386719 13.707031 1.074219 C 14.289062 0.785156 14.289062 0.785156 17.644531 0.785156 C 20.90625 0.785156 21.007812 0.792969 21.410156 0.976562 C 21.984375 1.238281 22.65625 1.890625 22.933594 2.476562 C 23.179688 2.964844 23.179688 2.964844 23.179688 6.316406 C 23.179688 9.667969 23.179688 9.667969 22.890625 10.25 C 22.578125 10.886719 22.140625 11.324219 21.488281 11.644531 C 21.097656 11.84375 21.042969 11.84375 17.734375 11.863281 C 14.492188 11.878906 14.359375 11.878906 13.898438 11.695312 Z M 13.898438 11.695312 \" />\n    <path d=\"M 2.214844 11.078125 C 1.324219 10.824219 0.609375 10.207031 0.199219 9.3125 C 0 8.894531 0 8.832031 0 5.574219 C 0 2.265625 0 2.265625 0.234375 1.769531 C 0.53125 1.132812 1.132812 0.535156 1.769531 0.238281 C 2.265625 0.00390625 2.265625 0.00390625 5.578125 0.00390625 C 8.886719 0.00390625 8.886719 0.00390625 9.386719 0.238281 C 10.019531 0.535156 10.621094 1.132812 10.917969 1.769531 C 11.152344 2.265625 11.152344 2.265625 11.152344 5.574219 C 11.152344 8.882812 11.152344 8.882812 10.925781 9.371094 C 10.605469 10.058594 10.144531 10.53125 9.472656 10.859375 C 8.886719 11.148438 8.886719 11.148438 5.75 11.164062 C 3.441406 11.183594 2.507812 11.15625 2.214844 11.078125 Z M 8.898438 9.605469 C 9.238281 9.425781 9.613281 8.988281 9.699219 8.683594 C 9.734375 8.554688 9.757812 7.117188 9.757812 5.488281 C 9.757812 2.179688 9.769531 2.207031 9.132812 1.726562 C 8.820312 1.484375 8.820312 1.484375 5.804688 1.457031 C 4.148438 1.4375 2.65625 1.457031 2.5 1.484375 C 2.34375 1.507812 2.066406 1.683594 1.882812 1.855469 C 1.375 2.335938 1.34375 2.632812 1.421875 5.976562 C 1.480469 8.816406 1.480469 8.816406 1.726562 9.128906 C 2.214844 9.773438 2.316406 9.789062 5.75 9.773438 C 8.285156 9.753906 8.660156 9.738281 8.898438 9.605469 Z M 8.898438 9.605469 \" />\n  </svg>\n);\n\nexport const Logo = (props: React.ComponentProps<\"svg\">) => (\n  <svg\n    fill=\"currentColor\"\n    viewBox=\"0 0 90 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <defs>\n      <clipPath id=\"a\">\n        <path d=\"M12.785 12.781h11.172V24H12.785Zm0 0\" />\n      </clipPath>\n      <clipPath id=\"b\">\n        <path d=\"M.008 0h11.148v11.2H.008Zm0 0\" />\n      </clipPath>\n    </defs>\n    <g clipPath=\"url(#a)\">\n      <path\n        d=\"M15.008 23.855c-.91-.242-1.61-.851-2.028-1.75-.19-.41-.19-.488-.19-3.73 0-3.309 0-3.309.288-3.89a3 3 0 0 1 1.485-1.458c.488-.226.488-.226 3.792-.226 3.31 0 3.31 0 3.887.289.672.332 1.133.8 1.453 1.488.227.488.227.488.25 3.563.028 2.632.012 3.148-.113 3.574-.309 1.078-1.102 1.87-2.168 2.152-.734.18-5.941.18-6.656-.012m6.637-1.46c.18-.086.433-.305.562-.473.234-.305.234-.305.234-3.547 0-3.238 0-3.238-.242-3.55-.476-.637-.441-.63-3.844-.63-2.71 0-3.07.02-3.312.149-.375.199-.707.617-.82 1.011-.098.399-.11 5.497 0 5.977.14.61.601 1.07 1.195 1.191.184.036 1.582.063 3.113.055 2.54-.02 2.809-.035 3.114-.183m0 0\"\n        opacity=\"50%\"\n      />\n    </g>\n    <path d=\"M2.86 23.09c-.766-.242-1.532-.93-1.88-1.688-.183-.402-.187-.515-.187-3.765 0-3.356 0-3.356.23-3.852.278-.598.836-1.176 1.422-1.46.43-.22.43-.22 3.746-.247 3.235-.023 3.32-.015 3.829.168.683.262 1.406.973 1.695 1.688.207.523.207.539.207 3.703 0 3.504 0 3.496-.567 4.32-.34.48-.82.848-1.44 1.082-.446.164-.665.172-3.583.164-2.297 0-3.203-.035-3.473-.113M13.879 11.695c-.672-.258-1.395-.992-1.645-1.672-.18-.503-.191-.59-.164-3.832.028-3.265.028-3.328.223-3.718.324-.653.758-1.09 1.395-1.403.578-.289.578-.289 3.93-.289 3.253 0 3.355.008 3.757.192.57.261 1.242.914 1.52 1.5.246.488.246.488.246 3.84 0 3.355 0 3.355-.29 3.937a2.9 2.9 0 0 1-1.398 1.395c-.39.199-.445.199-3.746.218-3.238.016-3.371.016-3.828-.168m0 0\" />\n    <g clipPath=\"url(#b)\">\n      <path d=\"M2.219 11.078c-.89-.254-1.602-.871-2.012-1.765-.2-.418-.2-.481-.2-3.743 0-3.308 0-3.308.235-3.804A3.34 3.34 0 0 1 1.773.234C2.27 0 2.27 0 5.574 0c3.301 0 3.301 0 3.801.234.633.297 1.23.895 1.527 1.532.235.496.235.496.235 3.804 0 3.313 0 3.313-.227 3.801-.32.688-.777 1.16-1.45 1.488-.585.29-.585.29-3.714.305-2.305.02-3.234-.008-3.527-.086m6.668-1.473c.34-.18.715-.617.8-.921.036-.13.06-1.567.06-3.2 0-3.308.01-3.28-.626-3.761-.312-.243-.312-.243-3.32-.27-1.653-.02-3.145 0-3.297.027-.156.024-.434.2-.617.372-.508.48-.54.777-.461 4.12.058 2.844.058 2.844.304 3.157.489.644.59.66 4.016.644 2.531-.02 2.902-.035 3.14-.168m0 0\" />\n    </g>\n    <path d=\"m33.688 17.254-1.622-2.125 3.325-2.57a1.6 1.6 0 0 0-.696-.434 3 3 0 0 0-.957-.145q-.626.001-1.148.266a2.75 2.75 0 0 0-.903.707q-.379.445-.59 1.047c-.14.402-.206.84-.206 1.313q0 .655.246 1.257c.164.403.394.758.68 1.063q.432.46 1.019.734a3 3 0 0 0 1.27.278c.84 0 1.57-.243 2.199-.723q.942-.72 1.152-2.008l3.375.367a7.6 7.6 0 0 1-.879 2.387q-.614 1.053-1.504 1.797-.891.75-2.027 1.14a7.5 7.5 0 0 1-2.445.395 6.6 6.6 0 0 1-2.606-.512 6.1 6.1 0 0 1-2.039-1.402 6.3 6.3 0 0 1-1.32-2.11q-.474-1.223-.473-2.663-.001-1.44.473-2.676a6.2 6.2 0 0 1 1.332-2.125 6.2 6.2 0 0 1 2.043-1.387q1.177-.499 2.59-.5 2.195 0 3.777.973c1.059.644 1.855 1.582 2.398 2.804ZM47.973 6.684H46.69q-.601 0-.968.277-.366.277-.368.98v1h2.618v3.25h-2.618v9.493h-3.347V8.864c0-1.962.418-3.372 1.254-4.239q1.26-1.296 3.48-1.297h1.23ZM54.723 6.684H53.44q-.601 0-.968.277-.366.277-.368.98v1h2.618v3.25h-2.618v9.493h-3.347V8.864c0-1.962.418-3.372 1.258-4.239q1.255-1.296 3.476-1.297h1.23ZM61.21 17.254l-1.62-2.125 3.324-2.57a1.6 1.6 0 0 0-.695-.434 3 3 0 0 0-.953-.145q-.632.001-1.153.266-.52.26-.902.707-.38.445-.59 1.047-.206.603-.207 1.313 0 .655.246 1.257.252.605.68 1.063.433.46 1.023.734.586.277 1.266.278c.84 0 1.57-.243 2.2-.723q.94-.72 1.151-2.008l3.375.367a7.6 7.6 0 0 1-.878 2.387q-.614 1.053-1.504 1.797-.891.75-2.028 1.14A7.5 7.5 0 0 1 61.5 22a6.6 6.6 0 0 1-2.605-.512 6.1 6.1 0 0 1-2.04-1.402 6.3 6.3 0 0 1-1.32-2.11q-.473-1.223-.472-2.663-.001-1.44.472-2.676a6.2 6.2 0 0 1 1.332-2.125 6.2 6.2 0 0 1 2.043-1.387q1.178-.499 2.59-.5 2.199 0 3.781.973c1.055.644 1.852 1.582 2.395 2.804ZM76.805 12.348h-.758q-1.413 0-2.121.855c-.469.567-.703 1.29-.703 2.16v6.32h-3.559V8.942h3.164v2.41h.05c.317-.855.75-1.5 1.31-1.925q.838-.645 1.964-.645h.653ZM89.992 3.328v12.063c0 .89-.152 1.742-.457 2.543a6.6 6.6 0 0 1-1.285 2.113 6 6 0 0 1-1.988 1.43q-1.161.522-2.551.523a5.9 5.9 0 0 1-2.496-.523 6.1 6.1 0 0 1-1.965-1.43 6.8 6.8 0 0 1-1.293-2.125 7.3 7.3 0 0 1-.473-2.637q0-1.335.461-2.555a6.5 6.5 0 0 1 1.282-2.125 6.3 6.3 0 0 1 1.921-1.44 5.4 5.4 0 0 1 2.407-.54q.527 0 1.007.117.487.122 1.008.25v3.54a5 5 0 0 0-.851-.286 4 4 0 0 0-.953-.105q-1.285 0-2.106.879-.825.876-.824 2.293 0 1.417.809 2.296a2.65 2.65 0 0 0 2.015.875q1.359-.001 2.172-.875.811-.881.813-2.218V3.328Zm0 0\" />\n  </svg>\n);\n",
      "type": "registry:component"
    },
    {
      "path": "components/menu-toggle-icon.tsx",
      "content": "\"use client\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype MenuToggleProps = React.ComponentProps<\"svg\"> & {\n  open: boolean;\n  duration?: number;\n};\n\nexport function MenuToggleIcon({\n  open,\n  className,\n  fill = \"none\",\n  stroke = \"currentColor\",\n  strokeWidth = 2.5,\n  strokeLinecap = \"round\",\n  strokeLinejoin = \"round\",\n  duration = 500,\n  ...props\n}: MenuToggleProps) {\n  return (\n    <svg\n      className={cn(\n        \"transition-transform ease-in-out\",\n        open && \"-rotate-45\",\n        className\n      )}\n      fill={fill}\n      stroke={stroke}\n      strokeLinecap={strokeLinecap}\n      strokeLinejoin={strokeLinejoin}\n      strokeWidth={strokeWidth}\n      style={{\n        transitionDuration: `${duration}ms`,\n      }}\n      viewBox=\"0 0 32 32\"\n      {...props}\n    >\n      <path\n        className={cn(\n          \"transition-all ease-in-out\",\n          open\n            ? \"[stroke-dasharray:20_300] [stroke-dashoffset:-32.42px]\"\n            : \"[stroke-dasharray:12_63]\"\n        )}\n        d=\"M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22\"\n        style={{\n          transitionDuration: `${duration}ms`,\n        }}\n      />\n      <path d=\"M7 16 27 16\" />\n    </svg>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "hooks/use-scroll.ts",
      "content": "\"use client\";\nimport React from \"react\";\n\nexport function useScroll(threshold: number) {\n  const [scrolled, setScrolled] = React.useState(false);\n\n  const onScroll = React.useCallback(() => {\n    setScrolled(window.scrollY > threshold);\n  }, [threshold]);\n\n  React.useEffect(() => {\n    window.addEventListener(\"scroll\", onScroll);\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [onScroll]);\n\n  // also check on first load\n  React.useEffect(() => {\n    onScroll();\n  }, [onScroll]);\n\n  return scrolled;\n}\n",
      "type": "registry:hook"
    }
  ],
  "meta": {
    "height": "50vh"
  },
  "categories": [
    "header"
  ]
}