{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "app-shell",
  "type": "registry:ui",
  "title": "App shell",
  "description": "Tailwind app shell layout with a fixed width sidebar slot, a topbar slot and a scrolling main area. The sidebar hides below the md breakpoint for mobile.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/app-shell.tsx",
      "type": "registry:ui",
      "target": "components/ui/app-shell.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction AppShell({\n  sidebar,\n  topbar,\n  children,\n  className,\n}: {\n  sidebar?: React.ReactNode\n  topbar?: React.ReactNode\n  children?: React.ReactNode\n  className?: string\n}) {\n  return (\n    <div data-slot=\"app-shell\" className={cn(\"flex min-h-[420px] overflow-hidden rounded-2xl border border-border bg-bg\", className)}>\n      {sidebar ? (\n        <aside className=\"hidden w-56 shrink-0 border-r border-border bg-sunken md:block\">{sidebar}</aside>\n      ) : null}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {topbar}\n        <div className=\"flex-1 overflow-auto p-4 md:p-6\">{children}</div>\n      </div>\n    </div>\n  )\n}\nexport { AppShell }\n"
    }
  ]
}