Components
Unofficial shadcn components that you asked for and we could not find better so far.
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.
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
'use client'import { CreditCard } from '@/components/ui/credit-card'
const [creditCard, setCreditCard] = useState({cardholderName: '',cardNumber: '',expiryMonth: '',expiryYear: '',cvv: '',cvvLabel: 'CVC' as const})<CreditCardvalue={creditCard}onChange={setCreditCard}/>