{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morph-navbar-demo",
  "title": "Morph Navbar Demo",
  "description": "Example of Morph Navbar with a fluid, morphing pill that tracks the active link and hover state.",
  "registryDependencies": [
    "https://atlasui.dev/r/morph-navbar.json"
  ],
  "files": [
    {
      "path": "registry/react/examples/morph-navbar-demo.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport {\n  MorphNavbar,\n  MorphNavbarItem,\n} from \"@/registry/react/atlasui/morph-navbar\";\n\nexport const MorphNavbarDemo = () => {\n  // This useState is used only for demo purposes. Kindly use usePathname() hook for Next.js or equivalent for other frameworks.\n  const [activeHref, setActiveHref] = useState(\"#\");\n\n  const items = [\n    {\n      label: \"Home\",\n      href: \"#\",\n    },\n    {\n      label: \"About\",\n      href: \"#about\",\n    },\n    {\n      label: \"Contact\",\n      href: \"#contact\",\n    },\n    {\n      label: \"Projects\",\n      href: \"#projects\",\n    },\n  ];\n\n  return (\n    <MorphNavbar activeHref={activeHref}>\n      {items.map((item, index) => (\n        <div key={index} onClick={() => setActiveHref(item.href)}>\n          <MorphNavbarItem href={item.href}>{item.label}</MorphNavbarItem>\n        </div>\n      ))}\n    </MorphNavbar>\n  );\n};\n",
      "type": "registry:example",
      "target": "components/morph-navbar-demo.tsx"
    }
  ],
  "type": "registry:example"
}