A boarding pass or event ticket with real notches and a stub you can tear off.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| brand / logo Operator, venue or brand (and its logo), top-left. | string / ReactNode | — |
| badge Chip top-right ("VIP", "Business") — on holographic foil when holo. | string | — |
| eyebrow Small line above the title or route ("Boarding pass · TP 1043"). | string | — |
| title / subtitle Event name and details (omit for a route pass). | string | — |
| from / to Route endpoints; a dashed flight path runs between them. | { code: string; detail?: string } | — |
| duration Under the flight path ("7h 25m"). | string | — |
| transport Icon riding the flight path. | "flight" | "train" | "bus" | "boat" | "flight" |
| fields Details grid that wraps onto more rows; span widens a field. | { label: string; value: string; span?: number }[] | [] |
| columns Columns in the details grid. | number | up to 4 |
| code Printed in the stub and shown big on the back. Omit for a ticket without a stub. | string | — |
| codeType Look-alike code style — use renderCode for a scannable one. | "qr" | "barcode" | "qr" |
| renderCode Draw a real code (e.g. react-native-qrcode-svg). | (code: string, size: number) => ReactNode | — |
| notes Lines on the back: terms, baggage, gate notes. | string | string[] | — |
| image Header photo (vertical) or full-bleed art (horizontal). | ImageSourcePropType | — |
| layout Pass with the stub below, or admit-one ticket with the stub on the right. | "vertical" | "horizontal" | "vertical" |
| theme Preset, or { fill, stub?, ink, soft?, accent, pattern? } — fill can be a gradient. | "midnight" | "paper" | "aurora" | "sunset" | "neon" | "royal" | "mint" | TicketTheme | "midnight" |
| tone Shorthand for theme: midnight / paper. | "dark" | "light" | — |
| accent Route line, badge and stamp colour. | string | theme accent |
| holo Rainbow foil glare and a holographic badge. | boolean | false |
| stamp / stampColor Rubber stamp across the ticket ("CHECKED IN"); thumps in when set. | string / string | — / accent |
| onTear Enables swiping the stub off along the tear line; called once it's gone. | () => void | — |
| torn Controlled torn state (the stub is gone, the torn edge stays). | boolean | — |
| flipped / defaultFlipped / onFlip Controlled or uncontrolled side (tap to flip). | boolean / boolean / (flipped) => void | — / false / — |
| tilt Tilt toward the finger; false for long lists. | boolean | true |
| radius Corner radius. | number | 22 |
| labels Every built-in string, for translation. | { scan?, admit?, tear?, back? } | English |
| style Style for the root (width, margins). | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- The card tilts toward your finger (tilt={false} turns it off). Tap to flip it to the big code and notes; with onTear set, swipe the stub sideways to tear it off.
- Motion
- A holo badge shimmers as the card leans, a stamp thumps down when set, and a torn stub falls away along the tear line.
- Haptics
- A success notification when the stub tears off.
- Screen readers
- One element whose label joins the brand, title or route, every field and the stamp; it is a button when there is a back to flip to.
Source
Did you like the content?