A credit & debit card component for payment forms: live brand detection, 3D flip, themeable variants. Zero dependencies — React, Vue, Svelte and vanilla JS.
Included Components
21
Try itUsageBrandsDisplayBackgroundsLocalizationStripeAPIAI & agentsPlaygroundCustomizeWith TailwindStyle any sectionInteractive 3D Card PreviewCard Number Auto-formatterExpiry Date InputCVV / CVC with Auto-flipBrand Detection (Visa, Mastercard, Amex, JCB, UnionPay, Discover)Hologram & Microchip LayersCustom Card Gradient ThemesInternational Form Localization
crd-ui provides a hyper-polished credit and debit card interface designed for high-converting checkout flows. As the user enters details into regular payment fields, the card mirrors the input in real-time, displays live brand badges (Visa, Mastercard, Amex, JCB, UnionPay, and more), and realistically flips to the back when focusing the CVV/CVC field. Shipped with zero external dependencies and weighing under 10KB, it provides official bindings for React, Vue, Svelte, and vanilla HTML.
