{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard",
  "title": "Dashboard shell",
  "description": "An app shell with sidebar navigation, a search header, and KPI stat cards.",
  "registryDependencies": [
    "button",
    "input",
    "badge",
    "card",
    "https://www.quilldesignsystem.com/r/icon.json"
  ],
  "files": [
    {
      "path": "registry/blocks/dashboard.tsx",
      "content": "import { Icon, type IconName } from '@/components/ui/icon'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Badge } from '@/components/ui/badge'\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n} from '@/components/ui/card'\n\nconst nav: { label: string; icon: IconName; active?: boolean }[] = [\n  { label: 'Overview', icon: 'dashboard', active: true },\n  { label: 'Projects', icon: 'folder_open' },\n  { label: 'Team', icon: 'group' },\n  { label: 'Billing', icon: 'credit_card' },\n  { label: 'Settings', icon: 'settings' },\n]\n\n/** An app shell with sidebar navigation, a search header, and KPI stat cards. */\nexport function Dashboard() {\n  return (\n    <div className=\"flex h-[600px] w-full bg-background text-foreground\">\n      <aside className=\"flex w-56 shrink-0 flex-col gap-1 border-r border-border bg-sidebar p-3\">\n        <div className=\"px-2 py-3 font-[family-name:var(--font-fraunces,Georgia,serif)] text-lg\">Quill</div>\n        {nav.map((n) => (\n          <button\n            key={n.label}\n            className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors ${\n              n.active ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'\n            }`}\n          >\n            <Icon name={n.icon} size={18} />\n            {n.label}\n          </button>\n        ))}\n      </aside>\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <header className=\"flex items-center gap-3 border-b border-border px-6 py-3\">\n          <div className=\"relative flex-1 max-w-sm\">\n            <Input placeholder=\"Search…\" className=\"w-full\" />\n          </div>\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"Notifications\">\n            <Icon name=\"notifications\" size={18} />\n          </Button>\n          <div className=\"flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground\">\n            AL\n          </div>\n        </header>\n        <main className=\"flex flex-1 flex-col gap-5 overflow-auto p-6\">\n          <div className=\"flex items-center justify-between\">\n            <div>\n              <h1 className=\"text-2xl font-medium\">Overview</h1>\n              <p className=\"text-sm text-muted-foreground\">Welcome back, Ada.</p>\n            </div>\n            <Button>\n              <Icon name=\"add\" size={16} /> New project\n            </Button>\n          </div>\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n            {[\n              { label: 'Revenue', value: '$48,120', delta: '+12%' },\n              { label: 'Active users', value: '3,842', delta: '+4%' },\n              { label: 'Conversion', value: '3.1%', delta: '+0.4%' },\n            ].map((s) => (\n              <Card key={s.label}>\n                <CardHeader>\n                  <CardDescription>{s.label}</CardDescription>\n                  <CardTitle className=\"text-2xl\">{s.value}</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <Badge variant=\"secondary\">{s.delta}</Badge>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/dashboard.tsx"
    }
  ],
  "meta": {
    "intent": [
      "app-shell",
      "data-display"
    ],
    "use_when": "You need a full application home — sidebar, search header, and KPI cards."
  },
  "docs": "An app shell with sidebar navigation, a search header, and KPI stat cards. Do: Give the current nav item a distinct active state (background + text color), not just a subtle underline. Don't: Leave every nav item looking identical — users lose track of where they are. Use sidebar-nav when you need the collapsible icon-sidebar variant with grouped menus, not this fixed-width text sidebar. Use stat-cards when you only need the KPI row, not the full shell around it.",
  "categories": [
    "app-shell",
    "data-display"
  ],
  "type": "registry:block"
}