#175
Basic metrics
Three KPI cards with title, value, an optional unit, a positive or negative trend and an icon, inside a KpiGrid.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Basic metrics" pattern (@codeatlasdev/ui demo #175, layout/kpi-card) in my app.
Call get_demo({ ids: ["#175"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Dashboard headline numbers such as revenue, users and conversion with their period-over-period change.
Keep these library parts, with the props and tokens the demo uses:
- KpiCard, KpiGrid from "@codeatlasdev/ui"
Behaviour to keep:
- `<KpiGrid>` with 3 `KpiCard` items
- `<KpiCard title="Monthly Revenue" value="$48,200" trend={12.4} icon={DollarSign} />`
- `<KpiCard title="Active Users" value="3,847" trend={-2.1} icon={Users} />`
- `<KpiCard title="Conversion" value="4.8" unit="%" trend={0.6} icon={TrendingUp} />`
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 3 `KpiCard` items
- `<KpiCard title="Monthly Revenue" value="$48,200" trend={12.4} icon={DollarSign} />`
- `<KpiCard title="Active Users" value="3,847" trend={-2.1} icon={Users} />`
- `<KpiCard title="Conversion" value="4.8" unit="%" trend={0.6} icon={TrendingUp} />`
Related
Loading source.