{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "app-shell-1", "title": "App Shell 1: collapsible sidebar with command menu", "author": "Ballmac ", "description": "A product frame: workspace switcher, grouped navigation with badges that collapses to an icon rail, top bar with search, notifications and a ⌘K command menu, and a scrolling page slot. A drawer on phones.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/avatar.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/command.json", "https://ui.ballmac.com/r/dropdown-menu.json", "https://ui.ballmac.com/r/kbd.json", "https://ui.ballmac.com/r/sheet.json" ], "files": [ { "path": "registry/ballmac/components/blocks/app-shell-1/app-shell-1.tsx", "content": "// Ballmac UI: App Shell 1. https://ui.ballmac.com/blocks/app-shell-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { Bell, ChevronsUpDown, FolderKanban, Home, Inbox, LayoutDashboard, PanelLeft, Search, Settings, Sparkles, Users } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback } from \"@/components/ballmac/avatar\"\nimport { Button, buttonVariants } from \"@/components/ballmac/button\"\nimport { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from \"@/components/ballmac/command\"\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from \"@/components/ballmac/dropdown-menu\"\nimport { Kbd } from \"@/components/ballmac/kbd\"\nimport { Sheet, SheetContent, SheetDescription, SheetTitle } from \"@/components/ballmac/sheet\"\nimport { cn } from \"@/lib/utils\"\n\ntype AppShell1Item = {\n id: string\n label: string\n icon?: React.ReactNode\n /** Small count or label at the end, e.g. unread items. */\n badge?: string\n}\n\ntype AppShell1Group = {\n /** Small heading above the group. */\n label?: string\n items: AppShell1Item[]\n}\n\ntype AppShell1Props = Omit, \"children\"> & {\n /** Workspace name in the switcher. */\n workspace?: string\n /** Other workspaces offered in the switcher menu. */\n workspaces?: string[]\n /** Navigation groups. */\n nav?: AppShell1Group[]\n /** The signed-in person. */\n user?: { name: string; email: string }\n /** Controlled id of the open page. */\n value?: string\n /** Id of the open page when uncontrolled. */\n defaultValue?: string\n /** Called when another page is picked from the sidebar or the command menu. */\n onValueChange?: (id: string) => void\n /** Whether the sidebar starts collapsed to icons. */\n defaultCollapsed?: boolean\n /** Height of the frame. Use \"100svh\" for a full-screen app. */\n height?: string\n /** The page. Receives the title of the open item. Defaults to a sample page. */\n children?: (page: AppShell1Item) => React.ReactNode\n}\n\nconst defaultNav: AppShell1Group[] = [\n {\n items: [\n { id: \"overview\", label: \"Overview\", icon: },\n { id: \"inbox\", label: \"Inbox\", icon: , badge: \"4\" },\n { id: \"projects\", label: \"Projects\", icon: },\n { id: \"reports\", label: \"Reports\", icon: },\n ],\n },\n {\n label: \"Workspace\",\n items: [\n { id: \"team\", label: \"Team\", icon: },\n { id: \"settings\", label: \"Settings\", icon: },\n ],\n },\n]\n\nfunction SamplePage({ page }: { page: AppShell1Item }) {\n return (\n
\n

{page.label}

\n

Your page goes here. The sidebar, top bar and command menu stay put around it.

\n
\n {[\n [\"Open tasks\", \"24\"],\n [\"Shipped this week\", \"9\"],\n [\"Due soon\", \"6\"],\n ].map(([label, value]) => (\n
\n

{label}

\n

{value}

\n
\n ))}\n
\n
\n

Recent activity

\n
    \n {[\"Ana closed 3 tasks in Launch plan\", \"Kofi commented on Pricing page\", \"Mei joined the workspace\"].map((t) => (\n
  • {t}
    • \n ))}\n
\n
\n
\n )\n}\n\nfunction SidebarBody({\n nav,\n value,\n onPick,\n collapsed,\n workspace,\n workspaces,\n user,\n}: {\n nav: AppShell1Group[]\n value: string\n onPick: (id: string) => void\n collapsed: boolean\n workspace: string\n workspaces: string[]\n user: { name: string; email: string }\n}) {\n const initials = user.name.split(\" \").map((w) => w[0]).join(\"\").slice(0, 2)\n return (\n
\n
\n \n \n {workspace[0]}\n {!collapsed && (\n <>\n {workspace}\n \n \n )}\n \n \n Switch workspace\n {workspaces.map((w) => (\n {w}\n ))}\n \n Create workspace\n \n \n
\n\n \n\n {!collapsed && (\n
\n
\n

Try Pro free

\n

Unlimited projects and advanced reports for 14 days.

\n Start trial\n
\n
\n )}\n\n
\n
\n {initials}\n {!collapsed && (\n
\n

{user.name}

\n

{user.email}

\n
\n )}\n
\n
\n
\n )\n}\n\nfunction AppShell1({\n workspace = \"Acme\",\n workspaces = [\"Acme\", \"Northwind Studio\", \"Personal\"],\n nav = defaultNav,\n user = { name: \"Jordan Lee\", email: \"jordan@acme.com\" },\n value: valueProp,\n defaultValue,\n onValueChange,\n defaultCollapsed = false,\n height = \"44rem\",\n children,\n className,\n style,\n ...props\n}: AppShell1Props) {\n const all = nav.flatMap((g) => g.items)\n const [internal, setInternal] = React.useState(defaultValue ?? all[0]?.id ?? \"\")\n const value = valueProp ?? internal\n const [collapsed, setCollapsed] = React.useState(defaultCollapsed)\n const [drawer, setDrawer] = React.useState(false)\n const [palette, setPalette] = React.useState(false)\n const page = all.find((i) => i.id === value) ?? all[0]\n const mainId = React.useId()\n\n const pick = React.useCallback(\n (id: string) => {\n if (valueProp === undefined) setInternal(id)\n onValueChange?.(id)\n setDrawer(false)\n setPalette(false)\n },\n [onValueChange, valueProp]\n )\n\n // ⌘B / Ctrl+B collapses the sidebar while focus is inside the frame. ⌘K / Ctrl+K is handled by the command menu itself.\n const rootRef = React.useRef(null)\n React.useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (!(e.metaKey || e.ctrlKey) || !rootRef.current?.contains(document.activeElement)) return\n if (e.key.toLowerCase() === \"b\") {\n e.preventDefault()\n setCollapsed((c) => !c)\n }\n }\n document.addEventListener(\"keydown\", onKey)\n return () => document.removeEventListener(\"keydown\", onKey)\n }, [])\n\n if (!page) return null\n return (\n \n Skip to content\n\n