Payment Card

Pro

Physical or virtual bank card that flips over and tilts under your finger. A long press can reveal the full number and CVV, freezing drains it to grey, and unfreezing brings the colour back.

Preview

Installation

npx @lumioui/cli add pro/payment-card

Usage

import { PaymentCard } from "@/components/ui/payment-card/payment-card";
<PaymentCard />

Examples

Controls

The card tab of a current account: a coral debit card with Freeze, Show details and Flip under it.

Virtual

A virtual card kept for subscriptions.

Wallet

A wallet stack: the chosen card sits on top, the rest peek below.

API reference

Prop Type Default
number* string

Full card number — spaces optional. Only the last four show until revealed.

 —
holder string

Name embossed on the card.

 —
expiry string

"MM/YY".

 —
cvv string

Security code printed on the back.

 —
issuer string

Bank or product name, top left.

 —
label string

Short tag beside the issuer — "Virtual", "Travel", "Joint".

 —
network string

Plain wordmark, bottom right — "Debit", "Credit", "Business". Never a logo.

 —
kind "physical" | "virtual"

Physical cards show a chip and contactless mark. Default "physical".

 "physical"
finish
"ink" | "light" +2 "ink" | "light" | "accent" | "color"

Card face: ink, light (titanium), accent (follows <Accent>) or a custom color. Default "ink".

 "ink"
color string

Face colour when finish="color" — content colour, any CSS colour.

 —
onColor "light" | "dark"

Text tone on a custom color face. Default "light".

 "light"
revealed boolean

Controlled number reveal.

 —
defaultRevealed boolean

Uncontrolled initial reveal. Default false.

 false
onRevealedChange (revealed: boolean) => void

Fires when a long-press toggles the reveal.

 —
revealOnLongPress boolean

Long-press the card to show / hide the full number. Default true.

 true
flipped boolean

Controlled flip — true shows the back.

 —
defaultFlipped boolean

Uncontrolled initial flip. Default false.

 false
onFlippedChange (flipped: boolean) => void

Fires when a tap flips the card.

 —
flipOnPress boolean

Tap to flip. Default true when a cvv is given.

 —
frozen boolean

Frozen — frost overlay, details masked, flip disabled.

 false
frozenLabel string

Copy under the lock while frozen. Default "Frozen".

 "Frozen"
tilt boolean

Press and move to tilt the card under a following highlight. Default true.

 true
className string —