credit card

Credit Card Input

Credit Card

Interactive credit-card form with visual card preview and validations.

Preview

•••• •••• •••• ••••
Card Holder
YOUR NAME
Expires
MM/YY
CVC
•••
This card is protected by advanced security features

Features

  • Card number formatting and type detection.
  • Animated card preview with front/back transitions.
  • Validation hooks for expiry and CVV.

Installation

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

Registry JSON: /registry/credit-card.json

Install dependencies:

npm install framer-motion

Usage

import * as React from 'react'
import { CreditCard } from '@/components/ui/credit-card'


const [creditCard, setCreditCard] = React.useState({
  cardholderName: '',
  cardNumber: '',
  expiryMonth: '',
  expiryYear: '',
  cvv: '',
})


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