Components
Loading preview...
Sleek, minimal Mastercard design with gold chip and masked number, flipping on hover to reveal card details. Perfect for payment UI interactions and digital wallet animations.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/credit-debit-cardimport { FlippableCreditCard } from "@/components/ui/credit-debit-card";
export default function FlippableCreditCardDemo() {
return (
<div className="flex h-full w-full items-center justify-center rounded-lg bg-background p-8">
<FlippableCreditCard
cardholderName="RAVI KATIYAR"
// It's a good practice to show masked numbers in demos.
cardNumber="•••• •••• •••• 1939"
expiryDate="12/27"
cvv="987"
/>
</div>
);
}