{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card",
  "type": "registry:ui",
  "title": "Stat Card",
  "description": "KPI / metric card with icon, large value, label, and optional delta indicator.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/stat-card.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Statistic card with number, label, and optional icon.\n * @author Saasflare™\n * Complements the existing MetricCard with a simpler, marketing-focused\n * variant for stats sections (\"10K+ users\", \"99.9% uptime\").\n * @module packages/ui/components/ui/stat-card\n * @package ui\n *\n * @component\n * @example\n * import { StatCard } from '@saasflare/ui';\n * <StatCard value=\"10K+\" label=\"Active Users\" />\n *\n * @example\n * <StatCard value=\"99.9%\" label=\"Uptime\" icon={<ShieldIcon />} />\n */\n\nimport { type ReactNode } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Props for the StatCard component. */\nexport interface StatCardProps extends SaasflareComponentProps {\n  /** The stat value (e.g. \"10K+\", \"99.9%\", \"$2.4M\"). */\n  value: string\n  /** Label describing the stat. */\n  label: string\n  /** Optional icon displayed above the value. */\n  icon?: ReactNode\n  /** Additional class names. */\n  className?: string\n}\n\n/**\n * Simple statistic display card for marketing sections.\n *\n * @component\n * @package ui\n */\nexport function StatCard({\n  value,\n  label,\n  icon,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n}: StatCardProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  return (\n    <div\n      data-slot=\"stat-card\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\n        \"flex flex-col items-center rounded-xl border surface-card p-6 text-center\",\n        \"transition-all duration-200 hover:-translate-y-px hover:shadow-md\",\n        \"motion-reduce:hover:transform-none\",\n        className,\n      )}\n    >\n      {icon && (\n        <div className=\"mb-3 text-primary [&_svg]:size-6\">{icon}</div>\n      )}\n      <p className=\"text-3xl font-bold tracking-tight\">{value}</p>\n      <p className=\"mt-1 text-sm text-muted-foreground\">{label}</p>\n    </div>\n  )\n}\n",
      "target": "components/ui/stat-card.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/stat-card.json"
  }
}