{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-kpis",
  "title": "Dashboard Kpis",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/dashboard-kpis/DashboardKpis.tsx",
      "content": "'use client'\n\nimport { TrendingDown, TrendingUp } from 'lucide-react'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Sparkline } from '@/components/ui/charts'\nimport { KpiGrid } from '@/components/ui/kpi-grid'\n\nconst headcount = [108, 112, 115, 119, 121, 122, 124]\nconst openRoles = [18, 16, 17, 15, 14, 13, 12]\nconst timeToFill = [42, 40, 38, 39, 36, 34, 32]\nconst attrition = [8.4, 8.1, 8.6, 8.2, 7.9, 8.0, 7.6]\n\nexport function DashboardKpis() {\n  return (\n    <KpiGrid>\n      <Card className=\"flex flex-col justify-between\">\n        <CardHeader className=\"flex flex-row items-start justify-between pb-2\">\n          <CardTitle className=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">\n            Headcount\n          </CardTitle>\n          <span className=\"bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium\">\n            <TrendingUp className=\"size-3\" aria-hidden=\"true\" />\n            +12\n          </span>\n        </CardHeader>\n        <CardContent className=\"space-y-3\">\n          <p className=\"text-2xl font-semibold tracking-tight tabular-nums\">124</p>\n          <Sparkline data={headcount} height={36} ariaLabel=\"Headcount trend\" />\n        </CardContent>\n      </Card>\n\n      <Card className=\"flex flex-col justify-between\">\n        <CardHeader className=\"flex flex-row items-start justify-between pb-2\">\n          <CardTitle className=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">\n            Open roles\n          </CardTitle>\n          <span className=\"bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium\">\n            <TrendingDown className=\"size-3\" aria-hidden=\"true\" />\n            −6\n          </span>\n        </CardHeader>\n        <CardContent className=\"space-y-3\">\n          <p className=\"text-2xl font-semibold tracking-tight tabular-nums\">12</p>\n          <Sparkline data={openRoles} height={36} ariaLabel=\"Open roles trend\" />\n        </CardContent>\n      </Card>\n\n      <Card className=\"flex flex-col justify-between\">\n        <CardHeader className=\"flex flex-row items-start justify-between pb-2\">\n          <CardTitle className=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">\n            Time to fill\n          </CardTitle>\n          <span className=\"bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium\">\n            <TrendingDown className=\"size-3\" aria-hidden=\"true\" />\n            −10d\n          </span>\n        </CardHeader>\n        <CardContent className=\"space-y-3\">\n          <p className=\"text-2xl font-semibold tracking-tight tabular-nums\">32d</p>\n          <Sparkline data={timeToFill} height={36} ariaLabel=\"Time to fill trend\" />\n        </CardContent>\n      </Card>\n\n      <Card className=\"flex flex-col justify-between\">\n        <CardHeader className=\"flex flex-row items-start justify-between pb-2\">\n          <CardTitle className=\"text-muted-foreground text-xs font-medium tracking-widest uppercase\">\n            Attrition\n          </CardTitle>\n          <span className=\"bg-success/10 text-success inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium\">\n            <TrendingDown className=\"size-3\" aria-hidden=\"true\" />\n            −0.8pt\n          </span>\n        </CardHeader>\n        <CardContent className=\"space-y-3\">\n          <p className=\"text-2xl font-semibold tracking-tight tabular-nums\">7.6%</p>\n          <Sparkline data={attrition} height={36} ariaLabel=\"Attrition trend\" />\n        </CardContent>\n      </Card>\n    </KpiGrid>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/DashboardKpis.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/kpi-grid.json",
    "https://uipkge.dev/r/react/sparkline.json"
  ],
  "description": "Four-tile KPI row. Each tile is an inline Card: label, big number, signed trend pill, and a sparkline. No items prop — edit the tiles in place after install.",
  "categories": [
    "dashboard"
  ]
}