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 price-breakdownnpm 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.
How an amount is made up — subtotal, taxes, fees, discounts, shipping, credits and the total — as a description list that mirrors under RTL and wraps at large text sizes.
Reduced motion: off · your browser setting
The same shape serves a checkout, an invoice, a booking quote, a refund, a transfer and a payslip, so nothing in it says "cart" or "order".
Reduced motion: off · your browser setting
npx @kinetixui/cli add price-breakdownimport { PriceBreakdown, PriceBreakdownLine, PriceBreakdownTotal } from "@kinetixui/ui";
<PriceBreakdown aria-label="Price summary">
<PriceBreakdownLine label="Subtotal" value="€120.00" />
<PriceBreakdownLine label="Tax" description="VAT 20%" value="€21.60" />
<PriceBreakdownLine label="Discount" description="Code SPRING10" value="−€12.00" kind="deduction" />
<PriceBreakdownTotal label="Total" value="€129.60" />
</PriceBreakdown>Amounts are supplied formatted. Currency, locale, rounding and how a negative amount is written belong to your
money layer; a UI component that formatted them would be guessing. For the same reason a deduction line must carry
its minus sign in value — the colour is reinforcement only.
For loading, render the same rows with a Skeleton in value and set aria-busy on the list, as in the second
example above.
<dl>: each line is a term (what the amount is, plus an optional qualifier) and its definition (the amount), read
in that order.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 |
|---|---|---|
| labelrequired | React.ReactNodeWhat the amount is — "Subtotal", "Service fee", "Discount". | What the amount is — "Subtotal", "Service fee", "Discount". |
| valuerequired | React.ReactNodeThe formatted amount, including its sign. | The formatted amount, including its sign. |
| description | React.ReactNodeA qualifier under the label — "VAT 20%", "Code SPRING10", "2 nights × €80". | A qualifier under the label — "VAT 20%", "Code SPRING10", "2 nights × €80". |
| kind | "default" | "deduction"`deduction` for a line that reduces the total (discount, credit, refund). The value must still carry its minus sign. | `deduction` for a line that reduces the total (discount, credit, refund). The value must still carry its minus sign. |
| Prop | Type | Notes |
|---|---|---|
| labelrequired | React.ReactNodeWhat the amount is — "Subtotal", "Service fee", "Discount". | What the amount is — "Subtotal", "Service fee", "Discount". |
| valuerequired | React.ReactNodeThe formatted amount, including its sign. | The formatted amount, including its sign. |
| description | React.ReactNodeA qualifier under the label — "VAT 20%", "Code SPRING10", "2 nights × €80". | A qualifier under the label — "VAT 20%", "Code SPRING10", "2 nights × €80". |