# Modern Card Input

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react, react-payment-inputs
- Live preview: https://21st.dev/@ruixen.ui/components/modern-card-input

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/modern-card-input?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt