Credit Card

A beautiful, interactive credit card component with flip animation and real-time validation. Features visual credit card design with chip and icons, card flip animation for CVC/CVV entry, real-time card number formatting, selectable CVC/CCV labels, mobile responsive design, and international format support.

Features

• Visual Credit Card Design: Beautiful card design that resembles a real credit card with chip, card number display, and proper layout.
• Flip Animation: Smooth 3D card flip animation using Framer Motion when focusing on CVC field to simulate flipping a physical card.
• Real-time Updates: Card visual updates instantly as user types with automatic card number formatting (spaces added automatically).
• International Support: Supports various card formats and validation rules, adjustable to accommodate different requirements.
• Mobile Responsive: Component adapts well to different screen sizes ensuring a good user experience on smaller screens.

Props

• value (optional): CreditCardValue object containing all card field values.
• onChange (optional): Callback function that receives the updated card data when any field changes.
• className (optional): Additional CSS classes for styling customization.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/credit-card.json

This component requires Framer Motion for animations. Make sure to install it:

npm install framer-motion

Usage

'use client'

import { CreditCard } from '@/components/ui/credit-card'

const [creditCard, setCreditCard] = useState({
  cardholderName: '',
  cardNumber: '',
  expiryMonth: '',
  expiryYear: '',
  cvv: '',
  cvvLabel: 'CVC' as const
})

<CreditCard
  value={creditCard}
  onChange={setCreditCard}
/>

Form