Loading component…
Loading component…
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.
npx @kinetixui/cli add amount-displaynpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm@kinetixui/tokens on npmThe CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Not implemented yet · data display wave.
Composition · KinetixUI ships no SwiftUI component for this.
Composition · KinetixUI ships no Jetpack Compose component for this.
Composition · KinetixUI ships no Flutter component for this.
A formatted money-like or quantified value — SAR 1,250.00, −USD 25.00, +14.2% — with tabular figures, a spoken sign, its own bidi run and a full screen-reader label, without ever calculating it.
Reduced motion: off · your browser setting
npx @kinetixui/cli add amount-displayimport { AmountDisplay } from "@kinetixui/ui";
<AmountDisplay value="1,250.00" currency="SAR" />
<AmountDisplay value="25.00" currency="USD" sign="negative" tone="positive" accessibleLabel="Refund of 25 US dollars" />
<AmountDisplay value="14.2%" sign="positive" size="compact" />It never calculates or formats. value arrives formatted by your money layer, without its sign; the component
lays it out. sign draws a real minus (U+2212) or plus and speaks it as a word (signLabels, default "minus" and
"plus"), so the sign is never a colour. tone is separate on purpose: a refund is a negative amount that is good news.
Use accessibleLabel when the visible run is not how it should be heard ("SAR 162.75" → "162.75 Saudi riyals"); the
visible run is then hidden from assistive technology and the label is read instead.
dir="auto" by default, so "−SAR 25.00" keeps its order inside Arabic text.
Pass dir when you know the run's direction.tone is reinforcement.The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.
This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.
| Prop | Type | Notes |
|---|---|---|
| valuerequired | React.ReactNodeThe formatted amount without its sign — "1,250.00". If your formatter already wrote the sign, leave `sign` unset. | The formatted amount without its sign — "1,250.00". If your formatter already wrote the sign, leave `sign` unset. |
| currency | React.ReactNodeA currency or unit label shown with the value, exactly as given — "SAR", "USD", "€", "%", "kWh". | A currency or unit label shown with the value, exactly as given — "SAR", "USD", "€", "%", "kWh". |
| currencyPosition | "before" | "after"Where the label sits relative to the value, in reading order. Default "before" ("SAR 1,250.00"). | Where the label sits relative to the value, in reading order. Default "before" ("SAR 1,250.00"). |
| sign | "positive" | "negative"Writes a sign before the amount, plus a spoken word for it. Default: none. | Writes a sign before the amount, plus a spoken word for it. Default: none. |
| tone | "positive" | "negative" | "neutral"Colour reinforcement. Independent of `sign`; never the only signal. Default "neutral". | Colour reinforcement. Independent of `sign`; never the only signal. Default "neutral". |
| size | "compact" | "standard"`compact` inside lists and tables; `standard` (default) where the amount is the point. | `compact` inside lists and tables; `standard` (default) where the amount is the point. |
| accessibleLabel | stringWhat assistive technology hears instead of the visible text — "minus 25 Saudi riyals". | What assistive technology hears instead of the visible text — "minus 25 Saudi riyals". |
| signLabels | { positive?: string; negative?: string; }The spoken words for the sign glyphs. Defaults: { positive: "plus", negative: "minus" }. | The spoken words for the sign glyphs. Defaults: { positive: "plus", negative: "minus" }. |