Components
Loading preview...
This is a modern, reusable credit card input component designed for a smooth and intuitive user experience. It features dynamic card brand detection, displaying the appropriate card logo as the user types. Each field—card number, expiry, and CVC—has floating labels and focus highlights, ensuring clarity and accessibility. The component also supports an optional card preview for a quick glance at the detected card type. With built-in onChange callbacks, it is highly reusable and can easily integrate into any payment form.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/modern-card-inputimport ModernCardInput from "@/components/ui/modern-card-input";
export default function DemoOne() {
return <ModernCardInput />;
}