{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "title": "Stat Card",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A metric card with a clear comparison trend, optional visual, and readable value hierarchy.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/stat-card.tsx",
      "content": "// Ballmac UI: Stat Card. https://ui.ballmac.com/components/stat-card\nimport * as React from \"react\"\nimport { ArrowDownRight, ArrowUpRight, Minus } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ntype StatCardProps = React.ComponentProps<\"div\"> & {\n  /** Short metric label. */\n  label: string\n  /** Formatted value, including any unit or currency symbol. */\n  value: React.ReactNode\n  /** Signed percentage change from the comparison period. */\n  change?: number\n  /** Description of the comparison period. */\n  comparison?: string\n  /** Whether a smaller value is the desired outcome. */\n  lowerIsBetter?: boolean\n  /** Optional small chart or icon at the right. */\n  visual?: React.ReactNode\n}\n\nfunction StatCard({\n  className,\n  label,\n  value,\n  change,\n  comparison,\n  lowerIsBetter = false,\n  visual,\n  ...props\n}: StatCardProps) {\n  const direction =\n    change === undefined || change === 0\n      ? \"neutral\"\n      : (change > 0) !== lowerIsBetter\n        ? \"positive\"\n        : \"negative\"\n  const Icon =\n    change === undefined || change === 0\n      ? Minus\n      : change > 0\n        ? ArrowUpRight\n        : ArrowDownRight\n  return (\n    <div\n      data-slot=\"stat-card\"\n      className={cn(\n        \"bg-card text-card-foreground flex min-w-0 flex-col gap-4 rounded-xl border border-border p-5 shadow-sm\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <span\n          data-slot=\"stat-card-label\"\n          className=\"text-muted-foreground text-sm font-medium\"\n        >\n          {label}\n        </span>\n        {visual && (\n          <span\n            data-slot=\"stat-card-visual\"\n            aria-hidden=\"true\"\n            className=\"text-primary shrink-0\"\n          >\n            {visual}\n          </span>\n        )}\n      </div>\n      <div\n        data-slot=\"stat-card-value\"\n        className=\"truncate text-3xl font-semibold tracking-tight tabular-nums\"\n      >\n        {value}\n      </div>\n      {(change !== undefined || comparison) && (\n        <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\">\n          {change !== undefined && (\n            <span\n              data-slot=\"stat-card-change\"\n              data-trend={direction}\n              className={cn(\n                \"relative inline-flex items-center gap-0.5 rounded-full px-2 py-1 font-medium tabular-nums\",\n                direction === \"positive\"\n                  ? \"bg-primary/10 text-primary\"\n                  : direction === \"negative\"\n                    ? \"bg-destructive/10 text-foreground\"\n                    : \"bg-muted text-muted-foreground\",\n              )}\n            >\n              <Icon aria-hidden=\"true\" className=\"size-3.5\" />\n              <span className=\"sr-only\">{direction === \"positive\" ? \"Improving\" : direction === \"negative\" ? \"Worsening\" : \"Unchanged\"}: </span>\n              {Math.abs(change)}%\n            </span>\n          )}\n          {comparison && (\n            <span className=\"text-muted-foreground\">{comparison}</span>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { StatCard, type StatCardProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/stat-card.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "metric",
      "dashboard",
      "analytics"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "A metric card with a clear comparison trend, optional visual, and readable value hierarchy.",
      "whenToUse": [
        "Track a key metric with a comparison period"
      ],
      "whenNotToUse": [
        "Use Kpi Row for several compact metrics"
      ],
      "composesWith": [
        "card"
      ],
      "a11y": [
        {
          "keys": "None",
          "action": "Static content is announced with semantic structure"
        }
      ],
      "customization": [
        "Content, layout, and token-based className styling"
      ]
    },
    "examples": [
      "stat-card-demo",
      "stat-card-states"
    ],
    "url": "https://ui.ballmac.com/components/stat-card"
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}