{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-mobile-navbar-side-example",
  "title": "Animated Mobile Navbar Side Example",
  "description": "Example showcasing the Mobile Navbar emerging from the side.",
  "registryDependencies": [
    "https://atlasui.dev/r/animated-mobile-navbar.json"
  ],
  "files": [
    {
      "path": "registry/react/examples/animated-mobile-navbar-side-example.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport {\n  AnimatedMobileNavbar,\n  AnimatedMobileNavbarContent,\n  AnimatedMobileNavbarLink,\n  AnimatedMobileNavbarTrigger,\n} from \"@/registry/react/atlasui/animated-mobile-navbar\";\n\nconst SIDES = [\"left\", \"top\", \"right\"] as const;\n\nexport const AnimatedMobileNavbarSidesExample = () => {\n  return (\n    <div className=\"flex gap-2\">\n      {SIDES.map((side) => (\n        <AnimatedMobileNavbar key={side}>\n          <AnimatedMobileNavbarTrigger>\n            <Button variant=\"outline\">{side}</Button>\n          </AnimatedMobileNavbarTrigger>\n          <AnimatedMobileNavbarContent side={side}>\n            <AnimatedMobileNavbarLink label=\"Home\" href=\"#\" />\n            <AnimatedMobileNavbarLink label=\"About\" href=\"#\" />\n            <AnimatedMobileNavbarLink label=\"Services\" href=\"#\" />\n            <AnimatedMobileNavbarLink label=\"Contact Us\" href=\"#\" />\n            <AnimatedMobileNavbarLink label=\"Pricing\" href=\"#\" />\n          </AnimatedMobileNavbarContent>\n        </AnimatedMobileNavbar>\n      ))}\n    </div>\n  );\n};\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}