Pass Card

Pro

Wallet-style pass for tickets, boarding passes and memberships, with a header, key fields, a perforated edge and a code. It tilts under your finger and can flip to show its back.

Preview

Installation

npx @lumioui/cli add pro/pass-card

Usage

import { PassCard } from "@/components/ui/pass-card/pass-card";
<PassCard />

Examples

Boarding pass

An airline boarding pass: the route set big, the four numbers a gate agent asks for in one row, a QR the gate reads, and baggage allowance on the back.

Event ticket

A concert ticket fronted by the tour artwork.

Membership card

A design museum's annual membership in neutral ink.

Transit pass

A city day pass on the platform.

API reference

PassCard

Prop Type Default
children* React.ReactNode —
back React.ReactNode

Back face — terms, fare rules, member details. Enables flipping.

 —
flipped boolean

Controlled flip state.

 —
defaultFlipped boolean

Uncontrolled initial flip state.

 —
onFlippedChange (flipped: boolean) => void —
notchClassName string

Fill of the perforation notches — match the surface behind the pass.

 —
faceClassName string

Classes for each face (background, radius, border).

 —
active boolean

Lit pass. false leaves it dormant (grey header, dim fields); turning it true switches the pass on with one sheen. Default true.

 —
tilt boolean

Press-and-move tilts the pass and a highlight follows the finger. Default true.

 —
className string —

PassCardHeader

Prop Type Default
title* string

Issuer name.

 —
subtitle string —
logo React.ReactNode

Leading mark — icon disc, logo, avatar.

 —
aside React.ReactNode

Trailing slot — usually a PassCard.Field.

 —
image ImageSourcePropType

Event artwork behind the header (scrimmed for legibility).

 —
imageHeight number

Header height when image is set. Default 152.

 —
className string —
children React.ReactNode —

PassCardFields

Prop Type Default
children* React.ReactNode —
className string —

PassCardField

Prop Type Default
label* string —
value* React.ReactNode —
size "primary" | "secondary"

"primary" — the big route/name line; "secondary" — gate, seat, zone.

 —
align "left" | "center" | "right" —
className string —

PassCardTear

Prop Type Default
notchClassName string

Override the notch fill for this tear (defaults to the card's notchClassName).

 —
className string —

PassCardCode

Prop Type Default
children* React.ReactNode —
caption string

Line under the code — confirmation number, member ID.

 —
className string —

PassCardFlipTrigger

Prop Type Default
label string

Label while the front shows. Default "Details".

 —
backLabel string

Label while the back shows. Default "Done".

 —
className string —
style StyleProp<ViewStyle> —