{
  "name": "stat-layout-demo",
  "type": "registry:example",
  "registryDependencies": [
    "stat"
  ],
  "files": [
    {
      "path": "examples/stat-layout-demo.tsx",
      "type": "registry:example",
      "content": "import { ArrowUp, Users } from \"lucide-react\";\n\nimport {\n  Stat,\n  StatDescription,\n  StatIndicator,\n  StatLabel,\n  StatSeparator,\n  StatTrend,\n  StatValue,\n} from \"@/registry/bases/radix/ui/stat\";\n\nexport default function StatLayoutDemo() {\n  return (\n    <div className=\"grid gap-4 sm:grid-cols-2\">\n      <Stat>\n        <StatLabel>Active Subscribers</StatLabel>\n        <StatValue>2,847</StatValue>\n        <StatIndicator variant=\"icon\" color=\"success\">\n          <Users />\n        </StatIndicator>\n        <StatDescription>\n          Total number of active subscribers as of today\n        </StatDescription>\n      </Stat>\n\n      <Stat>\n        <StatLabel>Monthly Revenue</StatLabel>\n        <StatValue>$12,450</StatValue>\n        <StatIndicator variant=\"icon\" color=\"info\">\n          <ArrowUp />\n        </StatIndicator>\n        <StatSeparator />\n        <StatTrend trend=\"up\">\n          <ArrowUp />\n          +15.3% from last month\n        </StatTrend>\n        <StatDescription>\n          Revenue generated in the current billing period\n        </StatDescription>\n      </Stat>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}