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 reference-codenpm 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 code the reader will need again — a booking reference, order number or transaction ID — that is easy to select and copy, and says whether the copy worked.
Reduced motion: off · your browser setting
npx @kinetixui/cli add reference-codeimport { ReferenceCode } from "@kinetixui/ui";
<ReferenceCode label="Order number" value="ORD-2026-004519" />
<ReferenceCode label="Booking reference" value="K7Q2XP" size="lg" />
<ReferenceCode label="Ticket" value="0742 1189" copyable={false} />The value is shown and copied exactly as given. The component does not format, mask, validate or generate codes.
copyLabel, copiedMessage and copyFailedMessage localise the three strings it owns.
user-select: all), and translate="no"
keeps browser page translation from rewriting it.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 code is — "Booking reference", "Order number". Shown above the code and used to name the copy button. | What the code is — "Booking reference", "Order number". Shown above the code and used to name the copy button. |
| valuerequired | stringThe code itself, copied exactly as given. | The code itself, copied exactly as given. |
| copyable | booleanShow the copy button. Default true. | Show the copy button. Default true. |
| size | "md" | "lg"`lg` for a code that is the point of the screen (a confirmation); `md` (default) inside details. | `lg` for a code that is the point of the screen (a confirmation); `md` (default) inside details. |
| copyLabel | stringVisible text of the copy button. Default "Copy". | Visible text of the copy button. Default "Copy". |
| copiedMessage | stringAnnounced and shown after a successful copy. Default "Copied". | Announced and shown after a successful copy. Default "Copied". |
| copyFailedMessage | stringAnnounced and shown when the clipboard is unavailable or refused. | Announced and shown when the clipboard is unavailable or refused. |
| onCopy | ((value: string) => void)Called with the value after it reached the clipboard. | Called with the value after it reached the clipboard. |