{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "app-shell",
  "title": "App shell",
  "description": "sidebar of 4–8 destinations on desktop, a sheet on mobile · active item follows the URL",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "@kit/button",
    "sheet"
  ],
  "files": [
    {
      "path": "components/kit/app-shell.tsx",
      "content": "'use client';\nimport { MenuIcon, type LucideIcon } from 'lucide-react';\nimport { cn } from 'cn';\nimport Link from 'next/link';\nimport { usePathname } from 'next/navigation';\nimport * as React from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';\n\nexport type NavItem = { href: string; label: string; icon: LucideIcon };\n\ntype Props = {\n  /** Product name or logo, top of the sidebar. */\n  brand: React.ReactNode;\n  nav: NavItem[];\n  /** Bottom of the sidebar: the account, a plan badge. */\n  footer?: React.ReactNode;\n  /** Right side of the top bar: search, notifications, an avatar menu. */\n  topbar?: React.ReactNode;\n  children: React.ReactNode;\n};\n\n/**\n * The frame of a web app: a sidebar of 4–8 destinations on desktop, a sheet behind a menu button on\n * small screens, and a content area. The active item follows the URL.\n */\nexport function AppShell({ brand, nav, footer, topbar, children }: Props) {\n  const pathname = usePathname();\n  const [open, setOpen] = React.useState(false);\n  const links = (\n    <nav aria-label=\"Main\" className=\"flex flex-col gap-1\">\n      {nav.map(({ href, label, icon: Icon }) => {\n        const active = pathname === href || (href !== '/' && pathname.startsWith(`${href}/`));\n        return (\n          <Link\n            key={href}\n            href={href}\n            onClick={() => setOpen(false)}\n            aria-current={active ? 'page' : undefined}\n            className={cn(\n              'flex h-9 items-center gap-3 rounded-md px-3 text-sm font-medium transition-colors',\n              active ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground'\n            )}>\n            <Icon className=\"size-4\" aria-hidden />\n            {label}\n          </Link>\n        );\n      })}\n    </nav>\n  );\n\n  return (\n    <div className=\"flex min-h-screen\">\n      <aside className=\"bg-sidebar text-sidebar-foreground border-sidebar-border sticky top-0 hidden h-screen w-60 shrink-0 flex-col gap-6 overflow-y-auto border-r p-4 md:flex\">\n        <div className=\"px-2 font-semibold\">{brand}</div>\n        {links}\n        {footer ? <div className=\"mt-auto\">{footer}</div> : null}\n      </aside>\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"border-border flex h-14 items-center gap-3 border-b px-4 sm:px-6\">\n          <Sheet open={open} onOpenChange={setOpen}>\n            <SheetTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\" aria-label=\"Open navigation\">\n                <MenuIcon />\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"bg-sidebar w-64 p-4\">\n              <SheetHeader className=\"px-2\">\n                <SheetTitle>{brand}</SheetTitle>\n              </SheetHeader>\n              {links}\n            </SheetContent>\n          </Sheet>\n          <div className=\"ml-auto flex items-center gap-2\">{topbar}</div>\n        </div>\n        <main className=\"flex-1 px-4 py-6 sm:px-6 lg:px-8\">{children}</main>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/app-shell.tsx"
    }
  ],
  "meta": {
    "exports": [
      "AppShell"
    ],
    "api": "<AppShell brand nav={[{href,label,icon}]} footer? topbar?>{page}</AppShell>"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}