#177
Without trend
Three KPI cards without a trend value, one with an icon and two plain.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Without trend" pattern (@codeatlasdev/ui demo #177, layout/kpi-card) in my app.
Call get_demo({ ids: ["#177"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Snapshot counters, such as orders today or error rate, that have no comparison period.
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 and no trend value
- `<KpiCard title="Orders Today" value="124" icon={ShoppingCart} />`
- `<KpiCard title="Avg. Session" value="3m 42s" />`
- `<KpiCard title="Error Rate" value="0.03" unit="%" />`
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 and no trend value
- `<KpiCard title="Orders Today" value="124" icon={ShoppingCart} />`
- `<KpiCard title="Avg. Session" value="3m 42s" />`
- `<KpiCard title="Error Rate" value="0.03" unit="%" />`
Related
Loading source.