{
  "name": "stat-variants-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "stat"
  ],
  "files": [
    {
      "path": "examples/stat-variants-demo.tsx",
      "type": "registry:example",
      "content": "import { DollarSign, TrendingUp } from \"lucide-react\";\n\nimport {\n  Stat,\n  StatIndicator,\n  StatLabel,\n  StatTrend,\n  StatValue,\n} from \"@/registry/bases/radix/ui/stat\";\n\nexport default function StatVariantsDemo() {\n  return (\n    <div className=\"grid gap-4 sm:grid-cols-2\">\n      <Stat>\n        <StatLabel>Default Indicator</StatLabel>\n        <StatValue>2,350</StatValue>\n        <StatIndicator>\n          <TrendingUp />\n        </StatIndicator>\n      </Stat>\n\n      <Stat>\n        <StatLabel>Icon Variant</StatLabel>\n        <StatValue>$45,231</StatValue>\n        <StatIndicator variant=\"icon\" color=\"success\">\n          <DollarSign />\n        </StatIndicator>\n      </Stat>\n\n      <Stat>\n        <StatLabel>Badge Variant</StatLabel>\n        <StatValue>1,234</StatValue>\n        <StatIndicator variant=\"badge\" color=\"info\">\n          +24\n        </StatIndicator>\n      </Stat>\n\n      <Stat>\n        <StatLabel>Warning Color</StatLabel>\n        <StatValue>89%</StatValue>\n        <StatIndicator variant=\"icon\" color=\"warning\">\n          <TrendingUp />\n        </StatIndicator>\n        <StatTrend trend=\"down\">Capacity threshold reached</StatTrend>\n      </Stat>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}