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 pass-cardnpm 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.
The foundation for anything a person carries and presents — a boarding pass, a ticket, a parking permit, a voucher, a membership card — with fields, a tear line and a supplied scannable code.
Reduced motion: off · your browser setting
Lisbon (LIS) to Amsterdam (AMS)
A boarding pass, an event ticket and a parking permit are the same anatomy with different words, so they are compositions of one component rather than components with "flight" in their props.
Reduced motion: off · your browser setting
Harbour Arena · General admission
Riverside Garage, level 2
Studio Kinetix
npx @kinetixui/cli add pass-cardimport {
PassCard, PassCardHeader, PassCardTitle, PassCardDescription,
PassCardFields, PassCardField, PassCardDivider, PassCardCode, PassCardFooter,
} from "@kinetixui/ui";
<PassCard>
<PassCardHeader>
<PassCardTitle>Parking permit</PassCardTitle>
<PassCardDescription>North campus</PassCardDescription>
</PassCardHeader>
<PassCardFields>
<PassCardField label="Bay" emphasis>C-14</PassCardField>
<PassCardField label="Valid until"><time dateTime="2026-12-31">31 Dec 2026</time></PassCardField>
</PassCardFields>
<PassCardDivider />
<PassCardCode label="Permit QR code" value="PRK-2026-C14">
<img src={qrCodeFromYourServer} alt="" />
</PassCardCode>
<PassCardFooter>Display on the dashboard.</PassCardFooter>
</PassCard>PassCard does not generate codes. Pass the barcode or QR code your product or the issuer generated, as an <img>
or <svg>, with its own light background: a scanner needs dark modules on a light quiet zone, so the component
never inverts it for dark mode. Validity and status are fields and tags your product decides.
<article> named by its title, so a list of passes reads as a list of named items. An explicit aria-label is
left alone.<dl>. Use <time dateTime> for dates and times. The grid falls to fewer columns at 200% text or on a
phone instead of truncating a gate or a plate number.<hr>.<figure>: the visual is an image named by label, and the caption is the readable value for when
the code will not scan.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 |
|---|---|---|
| level | HeadingLevelDefault 3 — a pass is usually one item inside a page or a list. | Default 3 — a pass is usually one item inside a page or a list. |
| Prop | Type | Notes |
|---|---|---|
| labelrequired | React.ReactNode | |
| childrenrequired | React.ReactNodeUse `<time dateTime>` for dates and times so they are machine-readable. | Use `<time dateTime>` for dates and times so they are machine-readable. |
| emphasis | booleanFor the one or two values a person looks for first — a gate, a seat, a bay. | For the one or two values a person looks for first — a gate, a seat, a bay. |
| Prop | Type | Notes |
|---|---|---|
| labelrequired | stringWhat the code is, for people who cannot see it — "Boarding pass QR code". | What the code is, for people who cannot see it — "Boarding pass QR code". |
| childrenrequired | React.ReactNodeThe barcode or QR code, generated elsewhere and passed in as an `<img>` or `<svg>`. | The barcode or QR code, generated elsewhere and passed in as an `<img>` or `<svg>`. |
| value | React.ReactNodeThe human-readable value printed under the code, for when it will not scan. A string or a `<ReferenceCode>`. | The human-readable value printed under the code, for when it will not scan. A string or a `<ReferenceCode>`. |