{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-cards-06",
  "type": "registry:component",
  "title": "Stats Cards",
  "author": "Toby Belhome",
  "description": "Display key metrics and performance indicators with Tailwind CSS stats cards. These layouts use clean typography, icons, and visual cues to make data easily digestible. Perfect for SaaS platforms, admin panels, and analytics dashboards seeking a modern, organized, and visually appealing way to showcase statistics.",
  "dependencies": [
    "lucide-react",
    "recharts"
  ],
  "registryDependencies": [
    "card",
    "chart"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/stat-cards/06/page.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { type ChartConfig, ChartContainer } from \"@/components/ui/chart\";\nimport { ExternalLink } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\";\n\nconst data = [\n  {\n    name: \"Workspaces\",\n    capacity: 20,\n    current: 1,\n    allowed: 5,\n    fill: \"var(--chart-1)\"\n  },\n  {\n    name: \"Dashboards\",\n    capacity: 10,\n    current: 2,\n    allowed: 20,\n    fill: \"var(--chart-2)\"\n  }\n];\n\nconst chartConfig = {\n  capacity: {\n    label: \"Capacity\",\n    color: \"hsl(var(--primary))\"\n  }\n} satisfies ChartConfig;\n\nexport default function Stats07() {\n  return (\n    <div className=\"flex items-center justify-center px-4 py-10 lg:py-20\">\n      <dl className=\"grid w-full max-w-lg grid-cols-1 gap-4 lg:grid-cols-2\">\n        {data.map((item) => (\n          <Card key={item.name} className=\"p-4 shadow-none\">\n            <CardContent className=\"flex items-center space-x-4 p-0\">\n              <div className=\"relative flex items-center justify-center\">\n                <ChartContainer config={chartConfig} className=\"h-[80px] w-[80px]\">\n                  <RadialBarChart\n                    data={[item]}\n                    innerRadius={30}\n                    outerRadius={60}\n                    barSize={6}\n                    startAngle={90}\n                    endAngle={-270}>\n                    <PolarAngleAxis\n                      type=\"number\"\n                      domain={[0, 100]}\n                      angleAxisId={0}\n                      tick={false}\n                      axisLine={false}\n                    />\n                    <RadialBar\n                      dataKey=\"capacity\"\n                      background\n                      cornerRadius={10}\n                      fill=\"var(--primary)\"\n                      angleAxisId={0}\n                    />\n                  </RadialBarChart>\n                </ChartContainer>\n                <div className=\"absolute inset-0 flex items-center justify-center\">\n                  <span className=\"text-foreground text-base font-medium\">{item.capacity}%</span>\n                </div>\n              </div>\n              <div>\n                <dt className=\"text-foreground text-sm font-medium\">{item.name}</dt>\n                <dd className=\"text-muted-foreground text-sm\">\n                  {item.current} of {item.allowed} used\n                </dd>\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/stat-cards-06.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}