{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-cards-02",
  "type": "registry:component",
  "title": "Stats Cards",
  "author": "Toby Belhome",
  "description": "Display key metrics and performance indicators with Tailwind CSS stats cards. These layouts use clean typography, icons, and visual cues to make data easily digestible. Perfect for SaaS platforms, admin panels, and analytics dashboards seeking a modern, organized, and visually appealing way to showcase statistics.",
  "dependencies": [],
  "registryDependencies": [
    "card",
    "progress",
    "tooltip"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/stat-cards/02/page.tsx",
      "content": "import { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\n\nconst pipelineData = [\n  {\n    id: \"lead\",\n    name: \"Lead\",\n    count: 235,\n    value: 420500,\n    color: \"bg-[var(--chart-1)]\"\n  },\n  {\n    id: \"qualified\",\n    name: \"Qualified\",\n    count: 146,\n    value: 267800,\n    color: \"bg-[var(--chart-2)]\"\n  },\n  {\n    id: \"proposal\",\n    name: \"Proposal\",\n    count: 84,\n    value: 192400,\n    color: \"bg-[var(--chart-3)]\"\n  },\n  {\n    id: \"negotiation\",\n    name: \"Negotiation\",\n    count: 52,\n    value: 129600,\n    color: \"bg-[var(--chart-4)]\"\n  },\n  {\n    id: \"closed\",\n    name: \"Closed Won\",\n    count: 36,\n    value: 87200,\n    color: \"bg-[var(--chart-5)]\"\n  }\n];\n\nconst totalValue = pipelineData.reduce((sum, stage) => sum + stage.value, 0);\nconst totalCount = pipelineData.reduce((sum, stage) => sum + stage.count, 0);\n\nexport default function CardStat() {\n  return (\n    <div className=\"mx-auto p-4 md:w-[400px] lg:py-10\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Sales Pipeline</CardTitle>\n          <CardDescription>Current deals in your sales pipeline.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <TooltipProvider>\n            <div className=\"mb-6 flex h-4 w-full overflow-hidden rounded-full\">\n              {pipelineData.map((stage) => (\n                <Tooltip key={stage.id}>\n                  <TooltipTrigger asChild>\n                    <div\n                      className={`${stage.color} h-full`}\n                      style={{ width: `${(stage.value / totalValue) * 100}%` }}></div>\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    <div className=\"mb-1 text-sm font-medium\">{stage.name}</div>\n                    <div className=\"text-xs opacity-80\">{stage.count} deals</div>\n                    <div className=\"text-xs opacity-80\">${stage.value.toLocaleString()}</div>\n                  </TooltipContent>\n                </Tooltip>\n              ))}\n            </div>\n          </TooltipProvider>\n\n          <div className=\"space-y-4\">\n            {pipelineData.map((stage) => (\n              <div key={stage.id} className=\"flex items-center gap-4\">\n                <div className={`h-3 w-3 rounded-full ${stage.color}`}></div>\n                <div className=\"flex flex-1 items-center justify-between\">\n                  <div>\n                    <p className=\"text-sm font-medium\">{stage.name}</p>\n                    <p className=\"text-muted-foreground text-xs\">\n                      {stage.count} deals · ${stage.value.toLocaleString()}\n                    </p>\n                  </div>\n                  <div className=\"flex w-24 items-center gap-2\">\n                    <Progress\n                      value={(stage.count / totalCount) * 100}\n                      className=\"h-2\"\n                      indicatorColor={stage.color}\n                    />\n                    <span className=\"text-muted-foreground w-10 text-right text-xs\">\n                      {Math.round((stage.value / totalValue) * 100)}%\n                    </span>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/stat-cards-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}