{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-01",
  "title": "Sidebar 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/sidebar-01/Sidebar01.tsx",
      "content": "'use client'\n\n// Edit this file to change brand, navigation, and the user dropdown.\n// Every menu item is spelled out below -- copy, remove, or rename rows directly.\n\nimport { BarChart3, BookOpen, FileText, Files, History, LayoutDashboard, Table as TableIcon } from 'lucide-react'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from '@/components/ui/sidebar'\nimport { NavUser } from './NavUser'\n\nexport function Sidebar01() {\n  return (\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" tooltip=\"uipkge\" className=\"group-data-[collapsible=icon]:!justify-center\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6\">\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  className=\"size-4 group-data-[collapsible=icon]:size-3.5\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                  <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                  <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                  <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                </svg>\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n                <span className=\"font-display truncate font-bold\">uipkge</span>\n                <span className=\"text-muted-foreground truncate text-xs\">uipkge.dev</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Workspace</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                {/* TODO: wrap in a <Link> and bind isActive to your route */}\n                <SidebarMenuButton isActive tooltip=\"Dashboard\">\n                  <LayoutDashboard className=\"size-4\" />\n                  <span>Dashboard</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Data tables\">\n                  <TableIcon className=\"size-4\" />\n                  <span>Data tables</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Forms\">\n                  <FileText className=\"size-4\" />\n                  <span>Forms</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Charts\">\n                  <BarChart3 className=\"size-4\" />\n                  <span>Charts</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Pages\">\n                  <Files className=\"size-4\" />\n                  <span>Pages</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarGroup>\n          <SidebarGroupLabel>Resources</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Docs\">\n                  <BookOpen className=\"size-4\" />\n                  <span>Docs</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Changelog\">\n                  <History className=\"size-4\" />\n                  <span>Changelog</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarFooter>\n        <NavUser />\n      </SidebarFooter>\n\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/sidebar-01/Sidebar01.tsx"
    },
    {
      "path": "packages/registry-react/blocks/sidebar-01/NavUser.tsx",
      "content": "'use client'\n\n// Edit this file to change the user dropdown content, avatar, and logout handler.\n// The user details are inlined below -- wire them to your auth session in place.\n\nimport { BadgeCheck, ChevronsUpDown, LogOut, Monitor, Moon, Palette, Settings, Sun } from 'lucide-react'\nimport { useTheme } from '@/lib/use-theme'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar'\n\n// Replace these with your auth session.\nconst user = {\n  name: 'Test User',\n  email: 'you@example.com',\n  initials: 'TU',\n}\n\nfunction handleLogout() {\n  // TODO: call your /api/auth/logout endpoint, then redirect.\n  console.warn('NavUser: wire handleLogout() to your auth backend')\n}\n\nexport function NavUser() {\n  const { isMobile } = useSidebar()\n  const { theme, setTheme } = useTheme()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center\"\n            >\n              <Avatar className=\"h-8 w-8 shrink-0 rounded-lg group-data-[collapsible=icon]:size-6\">\n                <AvatarFallback className=\"rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]\">\n                  {user.initials}\n                </AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4 group-data-[collapsible=icon]:hidden\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? 'bottom' : 'right'}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarFallback className=\"rounded-lg\">{user.initials}</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-semibold\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck className=\"size-4\" /> Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Settings className=\"size-4\" /> Settings\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <Palette className=\"size-4\" />\n                Theme\n                <span className=\"text-muted-foreground ml-auto text-xs capitalize\">{theme}</span>\n              </DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"min-w-36\">\n                <DropdownMenuRadioGroup value={theme} onValueChange={(v) => setTheme(v)}>\n                  <DropdownMenuRadioItem value=\"light\">\n                    <Sun className=\"size-4\" /> Light\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"dark\">\n                    <Moon className=\"size-4\" /> Dark\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"system\">\n                    <Monitor className=\"size-4\" /> System\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem onClick={handleLogout}>\n              <LogOut className=\"size-4\" />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/sidebar-01/NavUser.tsx"
    },
    {
      "path": "packages/registry-react/blocks/sidebar-01/page.tsx",
      "content": "// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-01.json`.\n// Visit /sidebar-01-demo after install to see the block without\n// editing your own pages. Free to edit or delete me.\nimport { Sidebar01 } from '@/components/blocks/sidebar-01/Sidebar01'\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar01 />\n      <SidebarInset>\n        <header className=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n          <SidebarTrigger className=\"size-7\" />\n          <h1 className=\"text-sm font-semibold\">sidebar-01 demo</h1>\n        </header>\n        <div className=\"flex-1 p-6\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 mt-4 min-h-[60vh] rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}",
      "type": "registry:block",
      "target": "~/app/sidebar-01-demo/page.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/sidebar.json",
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/dropdown-menu.json",
    "https://uipkge.dev/r/react/use-theme.json"
  ],
  "description": "Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure markup, no props -- edit Sidebar01.tsx to change routes and NavUser.tsx to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.",
  "categories": [
    "sidebar",
    "layout"
  ]
}