Credit Card Input

A photoreal credit card that updates live as you type, flipping over when the CVC field takes focus.

At the top is a 3D photoreal credit card: the number fills into the card face character by character with dots as placeholders for what is not typed yet, the brand is detected live from the leading digit (a 4 shows the Visa wordmark, a 5 shows the Mastercard double circle) and the card face gradient shifts accordingly; the expiry date applies an MM/YY mask, and focusing the security code field rotates the whole card on rotateY to line the back up with the CVC box. Purely a front-end showcase — no form submission included.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/credit-card-input.json?t=<install token>"

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Issuing bankbankName

<CreditCardInput />

Installation

npx shadcn@latest add "https://webberui.com/r/credit-card-input.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/credit-card-input.

Usage

import { CreditCardInput } from "@/components/ui/credit-card-input";

<CreditCardInput
  bankName="WEBBER BANK"
  onChange={(value) => {
    // value: `{ number, name, expiry, cvc, brand }`
    console.log(value.brand); // "visa" | "mastercard" | "unknown"
  }}
/>

The component is purely for display and contains no form submission logic; onChange only returns the current input state. Please do not enter real card numbers in a demo environment.

Props

Prop	Type	Default	Description
`onChange`	`(value: CreditCardValue) => void`	—	Callback whenever any field changes, carrying the complete card data and the detected brand
`bankName`	`string`	`"WEBBER BANK"`	Issuing bank name in the top-left of the card face
`className`	`string`	—	Forwarded to the outermost container and merged with the default styles via `cn()`

CreditCardValue fields:

Field	Type	Description
`number`	`string`	Card number (digits only, up to 16)
`name`	`string`	Cardholder name
`expiry`	`string`	Expiry date in MM/YY format
`cvc`	`string`	Security code (3 digits)
`brand`	`"visa" \| "mastercard" \| "unknown"`	Brand detected from the card number's leading digit

Accessibility

Every input has a matching label, and numeric fields use inputMode="numeric" to bring up the numeric keypad on mobile
When the user has "reduce motion" enabled at the system level, the flip and the digit reveal become instant state changes with no bounce animation
The card face is decorative (aria-hidden), so the form fields below are the only data source for assistive technology
autoComplete is turned off on every field, so the browser cannot fill in the user's real card details
The component contains no form tag and makes no network requests at all, which suits pure showcase or prototype scenarios