{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kpi-row",
  "type": "registry:ui",
  "title": "Kpi row",
  "description": "A responsive row of KPI tiles, up to four across, each with a label, a large value and an up or down delta. Drop it at the top of a SaaS analytics dashboard.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/metric-delta.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/kpi-row.tsx",
      "type": "registry:ui",
      "target": "components/ui/kpi-row.tsx",
      "content": "\"use client\"\nimport { cn } from \"@/lib/utils\"\nimport { MetricDelta } from \"@/components/ui/metric-delta\"\n\ntype Kpi = { label: string; value: string; delta?: number | string }\n\nfunction KpiRow({\n  items = [\n    { label: \"MRR\", value: \"$48k\", delta: 8 },\n    { label: \"Active\", value: \"1,204\", delta: 3 },\n    { label: \"NPS\", value: \"64\", delta: 2 },\n    { label: \"Churn\", value: \"1.1%\", delta: -0.3 },\n  ],\n  className,\n}: {\n  items?: Kpi[]\n  className?: string\n}) {\n  return (\n    <div data-slot=\"kpi-row\" className={cn(\"grid gap-3 sm:grid-cols-2 lg:grid-cols-4\", className)}>\n      {items.map((k) => (\n        <div key={k.label} className=\"rounded-xl border border-border bg-surface p-4 shadow-highlight\">\n          <p className=\"text-[11px] font-medium uppercase tracking-[0.01em] text-fg-muted\">{k.label}</p>\n          <div className=\"mt-2 flex items-end justify-between gap-2\">\n            <p className=\"text-2xl font-medium tabular-nums tracking-[-0.018em] text-fg\">{k.value}</p>\n            {typeof k.delta === \"number\" ? (\n              <MetricDelta value={k.delta} />\n            ) : k.delta ? (\n              <span className=\"text-xs text-fg-muted\">{k.delta}</span>\n            ) : null}\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { KpiRow }\n"
    }
  ]
}