{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-saas",
  "type": "registry:component",
  "title": "Navbar SaaS",
  "description": "SaaS-style navigation bar with branding and links.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/navbar-saas/navbar-saas.tsx",
      "content": "\"use client\";\n\nimport { Menu, X } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\nimport { useSidebar } from \"@vllnt/ui\";\nimport { ThemeToggle } from \"@vllnt/ui\";\n\nimport { useMobile } from \"./use-mobile\";\n\nexport type NavItem = {\n  href: string;\n  title: string;\n};\n\nexport type NavbarSaasProps = {\n  brand?: ReactNode;\n  navItems?: NavItem[];\n  rightSlot?: ReactNode;\n  showMobileMenu?: boolean;\n};\n\nconst EMPTY_NAV_ITEMS: NavItem[] = [];\n\nexport function NavbarSaas({\n  brand,\n  navItems = EMPTY_NAV_ITEMS,\n  rightSlot,\n  showMobileMenu = true,\n}: NavbarSaasProps) {\n  const pathname = usePathname();\n  const { open, setOpen } = useSidebar();\n  const isMobile = useMobile();\n\n  return (\n    <header className=\"sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0\">\n      <div className=\"w-full\">\n        <div className=\"mx-auto flex h-16 items-center justify-between px-4\">\n          <div className=\"flex items-center gap-4\">\n            {showMobileMenu && isMobile ? (\n              <Button\n                className=\"lg:hidden\"\n                onClick={() => {\n                  setOpen(!open);\n                }}\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                {open ? <X className=\"size-4\" /> : <Menu className=\"size-4\" />}\n              </Button>\n            ) : null}\n            {brand ? (\n              typeof brand === \"string\" ? (\n                <Link className=\"text-xl font-bold truncate\" href=\"/\">\n                  {brand}\n                </Link>\n              ) : (\n                brand\n              )\n            ) : null}\n            {navItems.length > 0 ? (\n              <nav className=\"hidden md:flex gap-6\">\n                {navItems.map((item) => (\n                  <Link\n                    className={cn(\n                      \"text-sm font-medium transition-colors hover:text-foreground/80\",\n                      pathname === item.href\n                        ? \"text-foreground\"\n                        : \"text-foreground/60\",\n                    )}\n                    href={item.href}\n                    key={item.href}\n                  >\n                    {item.title}\n                  </Link>\n                ))}\n              </nav>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-4\">\n            {rightSlot}\n            <ThemeToggle\n              dict={{\n                theme: {\n                  dark: \"Dark\",\n                  light: \"Light\",\n                  system: \"System\",\n                  toggle_theme: \"Toggle theme\",\n                },\n              }}\n            />\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}