{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-06",
  "title": "Sidebar 06",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/sidebar-06/Sidebar06.tsx",
      "content": "'use client'\n\n// Colorful, customised HRMS-style sidebar -- branded project tiles, badges,\n// status dots, and a user pill footer. Every row is spelled out inline so\n// you can swap colors and labels in place.\n\nimport {\n  Briefcase,\n  Calendar,\n  ChartLine,\n  ChevronsUpDown,\n  ClipboardList,\n  Folder,\n  GraduationCap,\n  HeartPulse,\n  HelpCircle,\n  Inbox,\n  LayoutDashboard,\n  Monitor,\n  Moon,\n  Palette,\n  Search,\n  Send,\n  Settings as SettingsIcon,\n  Star,\n  Sun,\n  Users,\n} from 'lucide-react'\nimport { useTheme } from 'next-themes'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\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 {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n  useSidebar,\n} from '@/components/ui/sidebar'\n\nexport function Sidebar06() {\n  const { isMobile } = useSidebar()\n  const { theme, setTheme } = useTheme()\n\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 shadow-sm 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\n        <div className=\"px-1 pt-1 group-data-[collapsible=icon]:hidden\">\n          <SidebarInput\n            type=\"text\"\n            placeholder=\"Search...\"\n            allowClear\n            prefix={<Search className=\"text-muted-foreground size-3.5\" />}\n            suffix={\n              <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-[10px] font-medium select-none\">\n                <span>&#8984;</span>F\n              </kbd>\n            }\n          />\n        </div>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton isActive tooltip=\"Dashboard\">\n                  <LayoutDashboard className=\"size-4\" />\n                  <span>Dashboard</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Employees\">\n                  <Users className=\"size-4\" />\n                  <span>Employees</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Clients\">\n                  <Briefcase className=\"size-4\" />\n                  <span>Clients</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Projects\">\n                  <Folder className=\"size-4\" />\n                  <span>Projects</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarSeparator />\n\n        <SidebarGroup>\n          <SidebarGroupLabel>Workforce</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Calendar\">\n                  <Calendar className=\"size-4\" />\n                  <span>Calendar</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Attendance\">\n                  <ClipboardList className=\"size-4\" />\n                  <span>Attendance</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Inbox\">\n                  <Inbox className=\"size-4\" />\n                  <span>Inbox</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge className=\"bg-destructive text-white\">6</SidebarMenuBadge>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Analytics\">\n                  <ChartLine className=\"size-4\" />\n                  <span>Analytics</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarSeparator />\n\n        <SidebarGroup>\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Shift Planner\">\n                  <div className=\"bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\">\n                    <Folder className=\"size-3\" />\n                  </div>\n                  <span>Shift Planner</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge className=\"text-warning\">\n                  <Star className=\"size-3.5 fill-current\" />\n                </SidebarMenuBadge>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Training Portal\">\n                  <div className=\"bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\">\n                    <GraduationCap className=\"size-3\" />\n                  </div>\n                  <span>Training Portal</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge className=\"text-warning\">\n                  <Star className=\"size-3.5 fill-current\" />\n                </SidebarMenuBadge>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Performance Hub\">\n                  <div className=\"bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\">\n                    <HeartPulse className=\"size-3\" />\n                  </div>\n                  <span>Performance Hub</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge className=\"text-warning\">\n                  <Star className=\"size-3.5 fill-current\" />\n                </SidebarMenuBadge>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Expense Claims\">\n                  <div className=\"bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\">\n                    <ChartLine className=\"size-3\" />\n                  </div>\n                  <span>Expense Claims</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge className=\"text-warning\">\n                  <Star className=\"size-3.5 fill-current\" />\n                </SidebarMenuBadge>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarSeparator />\n\n        <SidebarGroup>\n          <SidebarGroupLabel>My team</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Olivia Bennett\">\n                  <Avatar className=\"size-5\">\n                    <AvatarFallback className=\"bg-chart-1/15 text-foreground text-[10px]\">OB</AvatarFallback>\n                  </Avatar>\n                  <span>Olivia Bennett</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>\n                  <span className=\"bg-destructive size-1.5 rounded-full\" />\n                </SidebarMenuBadge>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Daniel Morgan\">\n                  <Avatar className=\"size-5\">\n                    <AvatarFallback className=\"bg-chart-2/15 text-foreground text-[10px]\">DM</AvatarFallback>\n                  </Avatar>\n                  <span>Daniel Morgan</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>\n                  <span className=\"bg-warning size-1.5 rounded-full\" />\n                </SidebarMenuBadge>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Ethan Reynolds\">\n                  <Avatar className=\"size-5\">\n                    <AvatarFallback className=\"bg-chart-3/15 text-foreground text-[10px]\">ER</AvatarFallback>\n                  </Avatar>\n                  <span>Ethan Reynolds</span>\n                </SidebarMenuButton>\n                <SidebarMenuBadge>\n                  <span className=\"bg-success size-1.5 rounded-full\" />\n                </SidebarMenuBadge>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <SidebarSeparator />\n\n        <SidebarGroup>\n          <SidebarGroupLabel>Administration</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Settings\">\n                  <SettingsIcon className=\"size-4\" />\n                  <span>Settings</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n              <SidebarMenuItem>\n                <SidebarMenuButton tooltip=\"Help center\">\n                  <HelpCircle className=\"size-4\" />\n                  <span>Help center</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarFooter>\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                  <div className=\"relative shrink-0\">\n                    <Avatar className=\"h-8 w-8 rounded-lg group-data-[collapsible=icon]:size-6\">\n                      <AvatarFallback className=\"bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]\">\n                        JC\n                      </AvatarFallback>\n                    </Avatar>\n                    <span className=\"bg-destructive ring-sidebar absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n                    <span className=\"truncate font-medium\">James Carter</span>\n                    <span className=\"text-muted-foreground truncate text-xs\">Admin</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>James Carter</DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Send className=\"size-4\" /> Invite teammates\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <SettingsIcon className=\"size-4\" /> Workspace settings\n                </DropdownMenuItem>\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\n                      value={theme}\n                      onValueChange={(v) => setTheme(v)}\n                    >\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              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Sidebar06.tsx"
    },
    {
      "path": "packages/registry-react/blocks/sidebar-06/page.tsx",
      "content": "// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-06.json`.\n// Visit /sidebar-06-demo after install to see the block without\n// editing your own pages. Free to edit or delete me.\nimport { Sidebar06 } from '@/components/blocks/Sidebar06'\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <Sidebar06 />\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-06 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-06-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": "Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.",
  "categories": [
    "sidebar",
    "layout"
  ]
}