{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-1",
  "title": "Bordered Four-Up Stat Band",
  "description": "Four-column stats section band framed by separators, each metric pairing a large value and label with a badge showing its percentage change.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/stats/1/stats-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst stats = [\n  { value: \"12k+\", label: \"Active customers\", delta: \"+18%\" },\n  { value: \"99.9%\", label: \"Uptime guarantee\", delta: \"+0.1%\" },\n  { value: \"4.9/5\", label: \"Average rating\", delta: \"+0.3\" },\n  { value: \"150+\", label: \"Countries served\", delta: \"+12\" },\n]\n\nexport default function StatsBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            Trusted at scale\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            The numbers product teams rely on every day.\n          </p>\n        </div>\n\n        <Separator className=\"mt-12\" />\n        <dl className=\"grid grid-cols-2 md:grid-cols-4\">\n          {stats.map(({ value, label, delta }) => (\n            <div\n              key={label}\n              className=\"flex flex-col items-center border-border px-6 py-8 text-center md:[&:nth-child(2)]:border-r [&:nth-child(odd)]:border-r\"\n            >\n              <dt className=\"text-4xl font-bold tracking-tight sm:text-5xl\">\n                {value}\n              </dt>\n              <dd className=\"mt-2 text-sm text-muted-foreground\">{label}</dd>\n              <Badge variant=\"secondary\" className=\"mt-2\">\n                <IconPlaceholder\n                  lucide=\"ArrowUp\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUp\"\n                  remixicon=\"RiArrowUpLine\"\n                  data-icon=\"inline-start\"\n                  aria-hidden=\"true\"\n                />\n                {delta}\n              </Badge>\n            </div>\n          ))}\n        </dl>\n        <Separator />\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/stats-1.tsx"
    }
  ],
  "meta": {
    "height": "430px",
    "tier": "free"
  },
  "categories": [
    "stats"
  ],
  "type": "registry:block"
}