{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-cards-07",
  "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": [],
  "registryDependencies": [
    "card",
    "progress"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/stat-cards/07/page.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Progress } from \"@/components/ui/progress\";\n\nconst data = [\n  {\n    name: \"Requests\",\n    stat: \"996\",\n    limit: \"10,000\",\n    percentage: 9.96\n  },\n  {\n    name: \"Credits\",\n    stat: \"$672\",\n    limit: \"$1,000\",\n    percentage: 67.2\n  },\n  {\n    name: \"Storage\",\n    stat: \"1.85\",\n    limit: \"10GB\",\n    percentage: 18.5\n  },\n  {\n    name: \"API Calls\",\n    stat: \"4,328\",\n    limit: \"5,000\",\n    percentage: 86.56\n  }\n];\n\nexport default function Stats09() {\n  return (\n    <div className=\"flex w-full items-center justify-center p-10\">\n      <dl className=\"mx-auto grid w-full max-w-7xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n        {data.map((item) => (\n          <Card key={item.name} className=\"py-4\">\n            <CardContent className=\"\">\n              <dt className=\"text-muted-foreground text-sm\">{item.name}</dt>\n              <dd className=\"text-foreground text-2xl font-semibold\">{item.stat}</dd>\n              <Progress value={item.percentage} className=\"mt-6 h-2\" />\n              <dd className=\"mt-2 flex items-center justify-between text-sm\">\n                <span className=\"text-primary\">{item.percentage}&#37;</span>\n                <span className=\"text-muted-foreground\">\n                  {item.stat} of {item.limit}\n                </span>\n              </dd>\n            </CardContent>\n          </Card>\n        ))}\n      </dl>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/stat-cards-07.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}