# Pass Card

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/pass-card
```

## Import

```tsx
import { PassCard } from "@/components/ui/pass-card/pass-card";
```

## Variants

- `boarding-pass` — Boarding pass: `npx @lumioui/cli add pro/pass-card-boarding-pass`
- `event-ticket` — Event ticket: `npx @lumioui/cli add pro/pass-card-event-ticket`
- `membership` — Membership card: `npx @lumioui/cli add pro/pass-card-membership`
- `transit` — Transit pass: `npx @lumioui/cli add pro/pass-card-transit`

## Props

### PassCard

| Prop | Type | Notes |
| --- | --- | --- |
| `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` | — |
| `children` | `React.ReactNode` | — |

### PassCardHeader

| Prop | Type | Notes |
| --- | --- | --- |
| `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 | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `children` | `React.ReactNode` | — |

### PassCardField

| Prop | Type | Notes |
| --- | --- | --- |
| `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 | Notes |
| --- | --- | --- |
| `notchClassName?` | `string` | Override the notch fill for this tear (defaults to the card's `notchClassName`). |
| `className?` | `string` | — |

### PassCardCode

| Prop | Type | Notes |
| --- | --- | --- |
| `caption?` | `string` | Line under the code — confirmation number, member ID. |
| `className?` | `string` | — |
| `children` | `React.ReactNode` | — |

### PassCardFlipTrigger

| Prop | Type | Notes |
| --- | --- | --- |
| `label?` | `string` | Label while the front shows. Default "Details". |
| `backLabel?` | `string` | Label while the back shows. Default "Done". |
| `className?` | `string` | — |
| `style?` | `StyleProp<ViewStyle>` | — |

Source: https://lumioui.com/components/pass-card