Free and open-source React credit card components built for modern applications and websites. These credit cards are built using React Aria and styled with Tailwind CSS.
OLIVIA RHYE
06/28
Installation
You can add this credit card component using our CLI or manually:
npx untitledui@latest add credit-card
Customization
The credit card component has props like type, company, cardNumber, cardHolder, and cardExpiration that can be used to customize the card.
PEDRO FRANCESCHI
12/28
TIM COOK
06/29
Sizes
The credit card component has a width prop that can be used to set the width of the card. Based on the width, the height will be automatically adjusted to maintain the aspect ratio.
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
Credit card types
Below are examples and variations of the credit card component:
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
OLIVIA RHYE
06/28
API reference
CreditCard
Import CreditCard from @/components/shared-assets/credit-card/credit-card. Renders a <div> element.
FAQs
Please refer to our frequently asked questions page for more.
Set type to one of 13 styles: "transparent", "transparent-gradient", "brand-dark", "brand-light", "gray-dark" and "gray-light"; the horizontal strip styles "transparent-strip", "gray-strip", "gradient-strip" and "salmon-strip"; and the vertical strip styles "gray-strip-vertical", "gradient-strip-vertical" and "salmon-strip-vertical". The default is "brand-dark".
Pass company, cardNumber, cardHolder and cardExpiration as strings. Without them the card shows placeholder data: "Untitled.", "1234 1234 1234 1234", "OLIVIA RHYE" and "06/28".
No. It is a visual card, not a payment input, and the strings you pass are rendered as-is. Format or mask the card number before passing it in. The cardholder name is uppercased with CSS.
Pass width in pixels. The card is designed at 316px × 190px and scaled with a CSS transform, so the height keeps the same aspect ratio and the text scales with it.
No, there is no prop for the network mark. The component imports the Mastercard icon directly, so every card shows a Mastercard logo; to show another network, swap the icon import in your copy of the component. The "brand-dark", "brand-light", "gray-dark" and "gray-light" types render the full-color mark, and every other type renders the white mark.