{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "title": "Stat Card",
  "description": "The single-number tile at the top of a dashboard: a label, one big value, and an optional percentage change with an up or down arrow — green when the number moved the right way, red when it did not. Use it wherever a screen opens with a row of headline figures: an analytics or metrics dashboard, an admin overview, a KPI or scorecard row, a billing and usage summary, a SaaS home screen, a revenue or traffic report. Common asks it answers: \"stat card\", \"metric card\", \"KPI card\", \"dashboard stat tile\", \"number card with percentage change\", \"revenue card with trend arrow\", \"analytics summary cards\", \"stats row\", \"show total users with growth\", \"Stripe/Vercel-style dashboard tiles\". shadcn/ui ships card as an empty container with no notion of a metric, so the value typography, the delta colouring and the arrow are hand-rolled on every dashboard. Pass `label`, `value` and optionally `delta` (a number: positive renders the up arrow, negative the down arrow, and omitting it renders no delta at all) plus a `hint` line for the comparison period, e.g. \"vs. last month\". `value` is a ReactNode, not a string, so a pre-formatted currency or an Intl.NumberFormat result drops straight in and the component never guesses at your locale or currency. The direction is not left to colour alone: the arrow is aria-hidden and an sr-only \"Up\"/\"Down\" is spoken before the number, so the tile still means something to a screen reader and to a red-green colour-blind reader, which a bare green percentage does not. Composes into a responsive grid to form the stats row, and pairs with gauge and progress-ring when the figure is a ratio rather than a total. Styled with shadcn tokens (card, muted-foreground) with an explicit dark-mode pair for the delta colours; lucide-react is the only dependency. Distinct from feature-card, which sells a capability with an icon and copy: this one carries a live number.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ui/stat-card.tsx",
      "content": "import * as React from \"react\"\nimport { ArrowDownRight, ArrowUpRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface StatCardProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  label: string\n  value: React.ReactNode\n  /** Percentage change. Positive renders green/up, negative red/down. */\n  delta?: number\n  hint?: string\n}\n\nexport function StatCard({\n  label,\n  value,\n  delta,\n  hint,\n  className,\n  ...props\n}: StatCardProps) {\n  const hasDelta = typeof delta === \"number\"\n  const positive = hasDelta && delta >= 0\n\n  return (\n    <div\n      className={cn(\"rounded-lg border bg-card p-4\", className)}\n      {...props}\n    >\n      <p className=\"text-sm text-muted-foreground\">{label}</p>\n      <div className=\"mt-1 flex items-baseline gap-2\">\n        <span className=\"text-2xl font-semibold tracking-tight\">{value}</span>\n        {hasDelta ? (\n          <span\n            className={cn(\n              \"inline-flex items-center gap-0.5 text-xs font-medium\",\n              positive\n                ? \"text-emerald-600 dark:text-emerald-400\"\n                : \"text-red-600 dark:text-red-400\"\n            )}\n          >\n            {positive ? (\n              <ArrowUpRight className=\"h-3 w-3\" aria-hidden=\"true\" />\n            ) : (\n              <ArrowDownRight className=\"h-3 w-3\" aria-hidden=\"true\" />\n            )}\n            <span className=\"sr-only\">{positive ? \"Up \" : \"Down \"}</span>\n            {Math.abs(delta)}%\n          </span>\n        ) : null}\n      </div>\n      {hint ? <p className=\"mt-1 text-xs text-muted-foreground\">{hint}</p> : null}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}