#178
Four cards
A KpiGrid holding four KPI cards: Revenue, Users, Growth and Uptime, each with a trend and icon.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Four cards" pattern (@codeatlasdev/ui demo #178, layout/kpi-grid) in my app.
Call get_demo({ ids: ["#178"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: A full-width row of headline metrics at the top of a dashboard.
Keep these library parts, with the props and tokens the demo uses:
- KpiCard, KpiGrid from "@codeatlasdev/ui"
Behaviour to keep:
- `<KpiGrid>` with 4 `KpiCard` items
- `<KpiCard title="Revenue" value="$112k" trend={18.4} icon={DollarSign} />`
- `<KpiCard title="Users" value="24.8k" trend={12.1} icon={Users} />`
- `<KpiCard title="Growth" value="34" unit="%" trend={5.6} icon={TrendingUp} />`
- `<KpiCard title="Uptime" value="99.9" unit="%" trend={0.1} icon={Activity} />`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<KpiGrid>` with 4 `KpiCard` items
- `<KpiCard title="Revenue" value="$112k" trend={18.4} icon={DollarSign} />`
- `<KpiCard title="Users" value="24.8k" trend={12.1} icon={Users} />`
- `<KpiCard title="Growth" value="34" unit="%" trend={5.6} icon={TrendingUp} />`
- `<KpiCard title="Uptime" value="99.9" unit="%" trend={0.1} icon={Activity} />`
Related
Loading source.