{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-floating-pill",
  "title": "Header — Floating Pill",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/header-floating-pill/HeaderFloatingPill.tsx",
      "content": "'use client'\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Layers, Menu } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst links = [\n  { label: 'Product', href: '#product' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n  { label: 'Docs', href: '#docs' },\n]\n\nexport function HeaderFloatingPill() {\n  const [active, setActive] = useState(0)\n  const [open, setOpen] = useState(false)\n  const navRef = useRef<HTMLElement | null>(null)\n  // Measured from the live element, so the indicator fits any label length or\n  // font — no hard-coded widths to drift out of sync with the copy.\n  const [indicator, setIndicator] = useState({ left: 0, width: 0 })\n\n  const measure = useCallback(\n    (index = active) => {\n      const el = navRef.current?.querySelectorAll<HTMLElement>('[data-pill-link]')[index]\n      if (el) setIndicator({ left: el.offsetLeft, width: el.offsetWidth })\n    },\n    [active],\n  )\n\n  useEffect(() => {\n    measure()\n    const nav = navRef.current\n    if (!nav || typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(() => measure())\n    observer.observe(nav)\n    return () => observer.disconnect()\n  }, [measure])\n\n  return (\n    <div data-slot=\"header-floating-pill\" className=\"pointer-events-none sticky top-0 z-40 px-4 pt-4\">\n      <header className=\"border-border bg-card/85 pointer-events-auto mx-auto flex h-14 max-w-4xl items-center gap-3 rounded-full border px-3 shadow-sm backdrop-blur\">\n        <a href=\"#top\" className=\"flex shrink-0 items-center gap-2 pl-2 font-semibold tracking-tight\">\n          <Layers className=\"text-primary size-4\" aria-hidden=\"true\" />\n          Verity\n        </a>\n\n        <nav ref={navRef} className=\"relative hidden items-center md:flex\" aria-label=\"Primary\">\n          <span\n            className=\"bg-muted absolute inset-y-1 rounded-full transition-colors duration-200 ease-out\"\n            style={{ left: `${indicator.left}px`, width: `${indicator.width}px` }}\n            aria-hidden=\"true\"\n          />\n          {links.map((link, index) => (\n            <a\n              key={link.href}\n              href={link.href}\n              data-pill-link\n              className={`focus-visible:ring-ring relative rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${\n                index === active ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'\n              }`}\n              aria-current={index === active ? 'page' : undefined}\n              onMouseEnter={() => measure(index)}\n              onMouseLeave={() => measure()}\n              onFocus={() => measure(index)}\n              onBlur={() => measure()}\n              onClick={() => setActive(index)}\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n\n        <Button size=\"sm\" className=\"ml-auto rounded-full\">\n          Start free\n        </Button>\n\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full md:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"top\">\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          </SheetContent>\n        </Sheet>\n      </header>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeaderFloatingPill.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/sheet.json"
  ],
  "description": "Detached pill navbar that floats above the page with a blurred surface, a sliding active indicator that tracks the current link, and a compact CTA on the right.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}