A card entry form with grouped number formatting, a Luhn check, brand detection, expiry validation and a live card preview. It never sends data anywhere.
npx shadcn@latest add https://hyperblur.dev/r/pay-card-form.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-card-form.tsx.
import { PayCardForm } from "@/components/hyperblur/pay-card-form"
<PayCardForm onSubmit={(values) => console.log(values.brand)} submitLabel="Pay $48.00" />| Prop | Type | Default | Description |
|---|---|---|---|
| onSubmit | (values: PayCardFormValues) => void | Called with digits-only number, name, MM/YY expiry, cvc and the detected brand once every field is valid. | |
| onChange | (values: PayCardFormValues) => void | Called on every edit with the current values. | |
| defaultValues | { number?: string; name?: string; expiry?: string; cvc?: string } | {} | Initial field values. |
| showPreview | boolean | true | Show the live card beside the fields, or above them on narrow containers. |
| submitLabel | string | "Pay now" | Text of the submit button. |
| successLabel | string | "Card accepted" | Text the button shows for a moment after a valid submit. |
| theme | "midnight" | "aurora" | "ember" | "graphite" | "lagoon" | "midnight" | Gradient theme of the preview card. |
| bank | string | "Northvale" | Issuer name printed on the preview card. |
| accent | string | "#2f7bff" | Focus ring and button color. |