Credit or Debit Card

Cards 212

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Credit or Debit Card to your project and fits it to your theme.

Code

How Credit or Debit Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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>
  );
}