{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-cards",
  "title": "Stat cards",
  "description": "A responsive grid of KPI cards, each showing a value with a delta badge versus last month.",
  "registryDependencies": [
    "card",
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/stat-cards.tsx",
      "content": "import {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n} from '@/components/ui/card'\nimport { Badge } from '@/components/ui/badge'\n\nconst stats = [\n  { label: 'Total revenue', value: '$48,120', delta: '+12.4%', tone: 'default' as const },\n  { label: 'Active users', value: '3,842', delta: '+4.1%', tone: 'default' as const },\n  { label: 'Churn', value: '1.9%', delta: '−0.3%', tone: 'secondary' as const },\n  { label: 'Open tickets', value: '27', delta: '+6', tone: 'destructive' as const },\n]\n\n/** A responsive grid of KPI cards, each showing a value with a delta badge versus last month. */\nexport function StatCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      {stats.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={s.tone}>{s.delta}</Badge>\n            <span className=\"ml-2 text-sm text-muted-foreground\">vs last month</span>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/stat-cards.tsx"
    }
  ],
  "meta": {
    "intent": [
      "data-display"
    ],
    "use_when": "You need a row of KPI cards showing values with period-over-period deltas."
  },
  "docs": "A responsive grid of KPI cards, each showing a value with a delta badge versus last month. Do: Match badge tone to whether the delta is actually good news for that metric (e.g. rising churn is bad, so it gets destructive tone even though the number itself looks like growth). Don't: Default every rising number to a positive tone — a rising \"Open tickets\" count is bad news, not good. Use analytics-charts when you need to show the trend shape over time, not just the current value and one delta. Use data-table when you have more metrics than fit comfortably in a card grid, or need to compare many rows at once.",
  "categories": [
    "data-display"
  ],
  "type": "registry:block"
}