{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-01",
  "title": "Analytics overview",
  "description": "Sidebar, KPI cards, a bar chart, and a recent activity list.",
  "dependencies": [
    "lucide-react",
    "recharts"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card",
    "chart",
    "input",
    "item"
  ],
  "files": [
    {
      "path": "registry/compositions/dashboard/dashboard-01.tsx",
      "content": "'use client'\n\nimport {\n  ArrowDownRight,\n  ArrowUpRight,\n  Bell,\n  Home,\n  LayoutGrid,\n  Search,\n  Settings,\n  Users,\n} from 'lucide-react'\nimport { Bar, BarChart, XAxis } from 'recharts'\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '@/components/ui/chart'\nimport { Input } from '@/components/ui/input'\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from '@/components/ui/item'\nimport { cn } from '@/lib/utils'\n\nconst nav = [\n  { icon: Home, label: 'Overview', active: true },\n  { icon: LayoutGrid, label: 'Projects', active: false },\n  { icon: Users, label: 'Customers', active: false },\n  { icon: Settings, label: 'Settings', active: false },\n]\n\nconst stats = [\n  { label: 'Revenue', value: '$48.2k', delta: '+12.5%', up: true },\n  { label: 'Active users', value: '2,318', delta: '+8.1%', up: true },\n  { label: 'Conversion', value: '3.6%', delta: '-0.4%', up: false },\n  { label: 'Avg. session', value: '4m 12s', delta: '+2.3%', up: true },\n]\n\nconst chartData = [\n  { month: 'Jan', revenue: 42 },\n  { month: 'Feb', revenue: 64 },\n  { month: 'Mar', revenue: 48 },\n  { month: 'Apr', revenue: 78 },\n  { month: 'May', revenue: 56 },\n  { month: 'Jun', revenue: 88 },\n  { month: 'Jul', revenue: 67 },\n  { month: 'Aug', revenue: 95 },\n  { month: 'Sep', revenue: 72 },\n  { month: 'Oct', revenue: 60 },\n  { month: 'Nov', revenue: 84 },\n  { month: 'Dec', revenue: 70 },\n]\n\nconst chartConfig = {\n  revenue: { label: 'Revenue', color: 'var(--color-primary)' },\n} satisfies ChartConfig\n\nconst rows = [\n  {\n    name: 'Olivia Martin',\n    email: 'olivia@email.com',\n    amount: '+$1,999',\n    initials: 'OM',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'jackson@email.com',\n    amount: '+$39',\n    initials: 'JL',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'bella@email.com',\n    amount: '+$299',\n    initials: 'IN',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    amount: '+$99',\n    initials: 'WK',\n  },\n]\n\nexport function Dashboard01() {\n  return (\n    <div className=\"bg-card w-full shadow-xs\">\n      <div className=\"flex items-center gap-3 border-b px-4 py-3\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"bg-primary size-6 rounded-md\" />\n          <span className=\"text-sm font-semibold tracking-tight\">Acme Inc</span>\n        </div>\n        <div className=\"relative ml-auto hidden max-w-xs flex-1 sm:block\">\n          <Search className=\"text-muted-foreground absolute top-1/2 left-3 size-3.5 -translate-y-1/2\" />\n          <Input placeholder=\"Search…\" className=\"h-8 pl-8 text-xs\" />\n        </div>\n        <Button variant=\"ghost\" size=\"icon-sm\" className=\"ml-auto sm:ml-0\">\n          <Bell />\n        </Button>\n        <Avatar className=\"size-7\">\n          <AvatarFallback className=\"text-xs\">AC</AvatarFallback>\n        </Avatar>\n      </div>\n\n      <div className=\"flex\">\n        <aside className=\"hidden w-48 shrink-0 flex-col gap-1 border-r p-3 md:flex\">\n          {nav.map(({ icon: Icon, label, active }) => (\n            <Button\n              key={label}\n              variant={active ? 'secondary' : 'ghost'}\n              size=\"sm\"\n              className=\"w-full justify-start\"\n            >\n              <Icon />\n              {label}\n            </Button>\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>\n              <h2 className=\"text-base font-semibold tracking-tight sm:text-lg\">\n                Overview\n              </h2>\n              <p className=\"text-muted-foreground text-xs\">\n                Last 30 days performance\n              </p>\n            </div>\n            <Button variant=\"outline\" size=\"sm\" className=\"hidden sm:flex\">\n              Jan 1 – Jan 30\n            </Button>\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-3 lg:grid-cols-4\">\n            {stats.map((s) => (\n              <Card key={s.label} size=\"sm\" className=\"gap-1 py-3\">\n                <CardContent>\n                  <div className=\"text-muted-foreground text-xs\">{s.label}</div>\n                  <div className=\"mt-1 text-lg font-semibold tracking-tight\">\n                    {s.value}\n                  </div>\n                  <Badge\n                    variant=\"secondary\"\n                    className={cn(\n                      'mt-1.5 gap-0.5',\n                      s.up\n                        ? 'text-emerald-600 dark:text-emerald-500'\n                        : 'text-muted-foreground',\n                    )}\n                  >\n                    {s.up ? <ArrowUpRight /> : <ArrowDownRight />}\n                    {s.delta}\n                  </Badge>\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n\n          <Card size=\"sm\" className=\"gap-4\">\n            <CardContent>\n              <div className=\"mb-4 flex items-center justify-between\">\n                <span className=\"text-sm font-medium\">Revenue</span>\n                <span className=\"text-muted-foreground text-xs\">Monthly</span>\n              </div>\n              <ChartContainer\n                config={chartConfig}\n                className=\"h-28 w-full sm:h-36\"\n              >\n                <BarChart data={chartData} barCategoryGap=\"20%\">\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={6}\n                    tick={{ fontSize: 10 }}\n                  />\n                  <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n                  <Bar\n                    dataKey=\"revenue\"\n                    fill=\"var(--color-revenue)\"\n                    radius={[4, 4, 0, 0]}\n                  />\n                </BarChart>\n              </ChartContainer>\n            </CardContent>\n          </Card>\n\n          <Card size=\"sm\" className=\"gap-3\">\n            <CardContent>\n              <div className=\"mb-1 text-sm font-medium\">Recent sales</div>\n              <ItemGroup>\n                {rows.map((r) => (\n                  <Item key={r.email} size=\"sm\" className=\"px-0\">\n                    <ItemMedia>\n                      <Avatar className=\"size-8\">\n                        <AvatarFallback className=\"text-xs\">\n                          {r.initials}\n                        </AvatarFallback>\n                      </Avatar>\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>{r.name}</ItemTitle>\n                      <ItemDescription>{r.email}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions className=\"text-sm font-medium tabular-nums\">\n                      {r.amount}\n                    </ItemActions>\n                  </Item>\n                ))}\n              </ItemGroup>\n            </CardContent>\n          </Card>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/compositions/dashboard/dashboard-01.tsx"
    }
  ],
  "meta": {
    "iframeHeight": 800
  },
  "type": "registry:block"
}