saturation/uiCredit Card
An interactive credit card display with gradient themes, masked details, copy-to-clipboard, and spotlight effect.
Art Department
Card number
•••• •••• •••• 9010
CardholderCasey Park
Exp Date••/••
CVC•••
Features
- Masked card details — Toggle visibility for security
- Copy to clipboard — Click to copy card details
- Gradient backgrounds — 17 color options available
- Spotlight effect — Interactive cursor-following glow
- Context menu — Right-click for card actions
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| cardName | string | "CNN license" | Name displayed on the card |
| cardNumber | string | "4500 1234 5678 9010" | Card number (will be masked) |
| cardholderName | string | "Bryce Mohatasb" | Cardholder's name |
| expDate | string | "7/27" | Expiration date |
| cvc | string | "824" | CVC code |
| gradient | string | "bg-gradient-to-br from-purple-400 to-purple-600" | Tailwind gradient classes for background |
| cardIcon | React.ReactNode | - | Custom icon for the card brand |
Components Used
tooltipspotlight