{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats",
  "type": "registry:block",
  "title": "Stats Section",
  "description": "Statistics display section for showcasing numbers and metrics.",
  "files": [
    {
      "path": "components/sections/stats/default.tsx",
      "content": "\nimport { Section } from \"../../ui/section\";\n\ninterface StatItemProps {\n  label?: string;\n  value: string | number;\n  suffix?: string;\n  description?: string;\n}\n\ninterface StatsProps {\n  items?: StatItemProps[] | false;\n  className?: string;\n}\n\nfunction formatToThousands(value: number) {\n  return Math.round(value / 100) / 10;\n}\n\nconst DEFAULT_STATS: StatItemProps[] = [\n  {\n    label: \"used by\",\n    value: formatToThousands(1000),\n    suffix: \"k\",\n    description: \"designers on Figma Community\",\n  },\n  {\n    label: \"over\",\n    value: 1000,\n    description: \"clones and forks of the template on GitHub\",\n  },\n  {\n    label: \"already\",\n    value: formatToThousands(1000),\n    suffix: \"k\",\n    description: \"installations with shadcn/ui CLI\",\n  },\n  {\n    label: \"includes\",\n    value: 1000,\n    description: \"blocks and sections\",\n  },\n];\n\nexport default function Stats({\n  items = DEFAULT_STATS,\n  className,\n}: StatsProps) {\n  return (\n    <Section className={className}>\n      <div className=\"container mx-auto max-w-[960px]\">\n        {items !== false && items.length > 0 && (\n          <div className=\"grid grid-cols-2 gap-12 sm:grid-cols-4\">\n            {items.map((item) => (\n              <div\n                key={`${item.label}-${item.description}`}\n                className=\"flex flex-col items-start gap-3 text-left\"\n              >\n                {item.label && (\n                  <div className=\"text-muted-foreground text-sm font-semibold\">\n                    {item.label}\n                  </div>\n                )}\n                <div className=\"flex items-baseline gap-2\">\n                  <div className=\"from-foreground to-foreground dark:to-brand bg-linear-to-r bg-clip-text text-4xl font-medium text-transparent drop-shadow-[2px_1px_24px_var(--brand-foreground)] transition-all duration-300 sm:text-5xl md:text-6xl\">\n                    {item.value}\n                  </div>\n                  {item.suffix && (\n                    <div className=\"text-brand text-2xl font-semibold\">\n                      {item.suffix}\n                    </div>\n                  )}\n                </div>\n                {item.description && (\n                  <div className=\"text-muted-foreground text-sm font-semibold text-pretty\">\n                    {item.description}\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </Section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/sections/stats/default.tsx"
    }
  ],
  "dependencies": [
    "@radix-ui/react-slot"
  ]
}