Credit Card
A decorative credit card component with multiple visual styles, chip, and card network icons.
Brand Dark
Dark gradient card with white text.
Brand Dark
Omnira.
**** **** **** 1234
Card HolderOLIVIA RHYE
Expires06/28
Brand Light
Light card with dark text.
Brand Light
Omnira.
**** **** **** 5678
Card HolderJOHN DOE
Expires12/27
Gradient
Purple gradient card.
Gradient
Omnira.
**** **** **** 9012
Card HolderJANE SMITH
Expires03/29
Minimal
Glassmorphism card that adapts to the current theme.
Minimal
Omnira.
**** **** **** 3456
Card HolderALEX CHEN
Expires09/26
Usage
Import and configure the CreditCard component.
tsx
import { CreditCard } from "@/components/ui/CreditCard";
<CreditCard
type="brand-dark"
company="Omnira."
cardNumber="1234 1234 1234 1234"
cardHolder="OLIVIA RHYE"
cardExpiration="06/28"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "brand-dark" | "brand-light" | "gradient" | "minimal" | "brand-dark" | Card visual style. |
| company | string | "Omnira." | Company name on the card. |
| cardNumber | string | "1234 1234 1234 1234" | Full card number (last 4 shown). |
| cardHolder | string | "CARD HOLDER" | Cardholder name. |
| cardExpiration | string | "00/00" | Expiration date. |