A payment card that shows live number, name and expiry, and flips in 3D to the back when the CVC field is focused.
npx shadcn@latest add https://hyperblur.dev/r/pay-card-preview.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-card-preview.tsx.
import { PayCardPreview } from "@/components/hyperblur/pay-card-preview"
<PayCardPreview number="4242 4242 4242 4242" name="Alex Morgan" expiry="08/29" cvc="318" focusField="cvc" />| Prop | Type | Default | Description |
|---|---|---|---|
| number | string | "" | Card number. Digits are grouped by four and missing digits show as dots. |
| name | string | "" | Card holder name. Shown in capitals and trimmed to 26 characters. |
| expiry | string | "" | Expiry as MM/YY or digits only. Missing characters show as MM/YY placeholders. |
| cvc | string | "" | Security code, shown on the back of the card. |
| focusField | "number" | "name" | "expiry" | "cvc" | null | null | Field to highlight on the card. Focusing cvc flips the card to its back. |
| flipped | boolean | Forces the flipped state. When omitted the card flips whenever focusField is cvc. | |
| theme | "midnight" | "aurora" | "ember" | "graphite" | "lagoon" | "midnight" | Gradient theme of the card. |
| network | "none" | "twin" | "tri" | "arc" | "arc" | Abstract network mark drawn in the bottom right corner. |
| bank | string | "Northvale" | Issuer name printed at the top left. |