{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sketch-dashboard-01",
  "title": "Analytics overview",
  "description": "Wireframe: sidebar, stat cards, chart, and a list.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/sketches/dashboard/sketch-dashboard-01.tsx",
      "content": "export function SketchDashboard01() {\n  return (\n    <div className=\"bg-card w-full overflow-hidden rounded-xl border shadow-sm\">\n      <div className=\"flex items-center gap-3 border-b px-4 py-3\">\n        <div className=\"bg-foreground/15 size-6 rounded-md\" />\n        <div className=\"bg-foreground/15 h-2 w-20 rounded-full\" />\n        <div className=\"bg-muted ml-auto hidden h-8 w-40 rounded-md sm:block\" />\n        <div className=\"bg-foreground/10 size-7 shrink-0 rounded-full\" />\n      </div>\n\n      <div className=\"flex\">\n        <aside className=\"hidden w-48 shrink-0 flex-col gap-2 border-r p-3 md:flex\">\n          {[0, 1, 2, 3].map((i) => (\n            <div key={i} className=\"flex items-center gap-2.5 px-1 py-1.5\">\n              <div className=\"bg-foreground/15 size-4 rounded\" />\n              <div\n                className=\"bg-foreground/10 h-2 rounded-full\"\n                style={{ width: `${80 - i * 12}px` }}\n              />\n            </div>\n          ))}\n        </aside>\n\n        <main className=\"flex min-w-0 flex-1 flex-col gap-4 p-4 sm:p-5\">\n          <div className=\"flex items-center justify-between gap-2\">\n            <div className=\"flex flex-col gap-1.5\">\n              <div className=\"bg-foreground/15 h-2.5 w-24 rounded-full\" />\n              <div className=\"bg-foreground/10 h-2 w-32 rounded-full\" />\n            </div>\n            <div className=\"bg-muted hidden h-8 w-28 rounded-md sm:block\" />\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-3 lg:grid-cols-4\">\n            {[0, 1, 2, 3].map((i) => (\n              <div key={i} className=\"flex flex-col gap-2 rounded-lg border p-3\">\n                <div className=\"bg-foreground/10 h-2 w-12 rounded-full\" />\n                <div className=\"bg-foreground/20 h-3.5 w-16 rounded-full\" />\n                <div className=\"bg-foreground/10 h-2 w-10 rounded-full\" />\n              </div>\n            ))}\n          </div>\n\n          <div className=\"rounded-lg border p-4\">\n            <div className=\"bg-foreground/10 mb-4 h-2 w-20 rounded-full\" />\n            <div className=\"flex h-28 items-end gap-1.5 sm:h-36 sm:gap-2\">\n              {[42, 64, 48, 78, 56, 88, 67, 95, 72, 60, 84, 70].map((h, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted flex-1 rounded-t-sm\"\n                  style={{ height: `${h}%` }}\n                />\n              ))}\n            </div>\n          </div>\n\n          <div className=\"rounded-lg border\">\n            <div className=\"border-b px-4 py-3\">\n              <div className=\"bg-foreground/10 h-2 w-20 rounded-full\" />\n            </div>\n            <div className=\"divide-y\">\n              {[0, 1, 2, 3].map((i) => (\n                <div key={i} className=\"flex items-center gap-3 px-4 py-3\">\n                  <div className=\"bg-foreground/10 size-8 shrink-0 rounded-full\" />\n                  <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n                    <div className=\"bg-foreground/15 h-2 w-24 rounded-full\" />\n                    <div className=\"bg-foreground/10 h-2 w-32 rounded-full\" />\n                  </div>\n                  <div className=\"bg-foreground/15 h-2 w-12 rounded-full\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/sketches/dashboard/sketch-dashboard-01.tsx"
    }
  ],
  "type": "registry:block"
}