About
Lightweight, fully controlled card form with live number/holder/expiry/CVV rendering, CVV back-face flip, and built-in validation. Customizable accent rings and layout.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds CreditCardForm to your project and fits it to your theme.
Code
How CreditCardForm is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { CreditCardForm, type CardState, type CardValidity } from "@/components/ui/credit-card-form";
export default function DemoOne() {
return (
<main style={{ minHeight: "100vh", display: "grid", placeItems: "center" }}>
<CreditCardForm
defaultHolder="Rahil Vahora"
maskMiddle
onChange={(state: CardState, validity: CardValidity) => {
// live form output here (analytics, preview, etc.)
// console.log("live", state, validity);
}}
onSubmit={(state, validity) => {
// send to your API
alert(JSON.stringify({ state, validity }, null, 2));
}}
/>
</main>
)
}