Credit card components
A credit card component is a visual representation of a payment card showing card details like number, holder name, expiration date, and payment network branding. These components are commonly used in payment forms, wallet interfaces, and financial dashboards.
OLIVIA RHYE
06/28
Installation
You can add this credit card component using our CLI or manually:
npx untitledui 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
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
FAQs
You can customize card information using props: company for the company name, cardNumber for the card number, cardHolder for the cardholder name, and cardExpiration for the expiration date. All props have sensible defaults if not provided.
You can resize the card using the width prop. The component automatically calculates the appropriate height to maintain the correct aspect ratio. The original dimensions are 316px × 190px.
Currently, the component displays Mastercard logos by default. The logo color automatically adjusts based on the card type - colored logos for light backgrounds and white logos for dark backgrounds.