This CreditCardDialog component is a sleek, professional dialog built with shadcn/ui that simulates the look and feel of a modern virtual credit card. The centerpiece is a visually rich card element styled with a gradient background, chip detail, masked card number, cardholder name, and expiry date — giving it an authentic credit card aesthetic. The dialog is designed for scenarios where a user needs to activate or authenticate a digital card by entering an activation code. Smooth animations powered by Framer Motion enhance the experience, while the input and action buttons are clearly separated in a structured layout. This makes the component ideal for fintech dashboards, virtual banking apps, or SaaS platforms where a polished, trust-inspiring credit card UI is needed. It balances functionality and design, providing both an engaging user experience and a practical flow for secure actions like card activation.
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { CreditCardDialog } from "@/components/ui/credit-card-dialog";
export default function CreditDemo() {
const [isDialogOpen, setIsDialogOpen] = React.useState(false);
const handleActivate = (code: string): Promise<void> => {
console.log(`Verifying activation code: ${code}`);
return new Promise((resolve) => {
setTimeout(() => {
console.log("✅ Card activated successfully!");
setIsDialogOpen(false);
resolve();
}, 2000);
});
};
return (
<div className="flex min-h-[350px] w-full items-center justify-center">
<Button onClick={() => setIsDialogOpen(true)}>Activate Card</Button>
<CreditCardDialog
open={isDialogOpen}
onOpenChange={setIsDialogOpen}
onActivate={handleActivate}
/>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.