Data display
Rendered
respond
Authorized10,000,000
Round size$3.0 M+$0.5 M
vs Q1+12%3 pts
Primitives
| Primitive | Renders | Tracking |
|---|---|---|
CK.Value | a typed scalar with a label | tabular numerals |
CK.Money | a currency amount with the right format | tabular numerals |
CK.Delta | a change with sign + tint (sage gain, peach loss) | tabular numerals |
Example
import { CK } from "@matter/components";
<CK.Frame phase="respond">
<CK.Body>
<CK.Value label="Authorized shares" value={10_000_000} />
<CK.Money label="Round size" amount={3_000_000} currency="USD" />
<CK.Delta label="vs Q1" delta={+0.12} kind="percent" />
</CK.Body>
</CK.Frame>Numerals carry font-variant-numeric: tabular-nums so values line up across columns. Use CK.Money over Intl.NumberFormat directly — it routes through the locale-aware formatter and the tnum style.
Use the typed primitive — currency, percentage, plain scalar.
Don't compose values from raw spans. The primitives carry the right numerals + tint contract.