{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-strip",
  "type": "registry:ui",
  "title": "Stats strip",
  "description": "Tailwind stats strip of centered value and label cells split by hairlines, two columns on mobile and four on desktop. Shows traction numbers on landing pages.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/stats-strip.tsx",
      "type": "registry:ui",
      "target": "components/ui/stats-strip.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** A hairline-divided row of headline numbers, for landing pages and report headers. */\ntype Stat = { label: string; value: string }\n\ntype StatsStripProps = {\n  /** Headline figures, four reads best. Defaults to Lumen's company stats. */\n  stats?: Stat[]\n  className?: string\n}\n\nconst SAMPLE_STATS: Stat[] = [\n  { label: \"Finance teams\", value: \"2,400+\" },\n  { label: \"Invoices processed\", value: \"$1.2B\" },\n  { label: \"Paid on time\", value: \"98.2%\" },\n  { label: \"Uptime\", value: \"99.99%\" },\n]\n\nfunction StatsStrip({ stats = SAMPLE_STATS, className }: StatsStripProps) {\n  return (\n    <div\n      data-slot=\"stats-strip\"\n      className={cn(\n        \"grid w-full grid-cols-2 gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-4\",\n        className\n      )}\n    >\n      {stats.map((s) => (\n        <div key={s.label} className=\"bg-surface px-4 py-5 text-center\">\n          <div className=\"text-2xl font-medium tracking-[-0.018em] text-fg tabular-nums\">{s.value}</div>\n          <div className=\"mt-1 text-xs text-fg-muted\">{s.label}</div>\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { StatsStrip }\nexport type { StatsStripProps, Stat }\n"
    }
  ]
}