Credit Card
credit-card-tw
1234567890123456
CARDHOLDERJOHN DOE
EXPIRES12/25
CVV123
Customize
1.2
16px
1
1
1.05
Props
| Name | Type | Default | Description |
|---|---|---|---|
| cardNumber | string | "1234 5678 9012 3456" | Card number (will be automatically formatted with spaces) |
| cardholderName | string | "JOHN DOE" | Name of the cardholder displayed on the card |
| expirationDate | string | "12/25" | Card expiration date in MM/YY format |
| cvv | string | "123" | CVV code (3 digits) shown on the back when card is flipped |
| cardLogo | string | undefined | URL for card company logo (Visa, Mastercard, etc.) |
| chipImage | string | undefined | URL for card chip image (optional) |
| background | string | random gradient | CSS gradient or color for card background |
| textColor | string | "#ffffff" | Color for all text on the card |
| hasTextShadow | boolean | true | Enable text shadow on card number, name, and expiration date |
| scale | number | 1.2 | Scale factor for card size (maintains aspect ratio) |
| rotationIntensity | number | 1 | Multiplier for the 3D rotation effect intensity (0-2) |
| parallaxIntensity | number | 1 | Multiplier for the parallax layer movement intensity (0-2) |
| scaleOnHover | number | 1.05 | Scale factor applied when hovering over the card |
| showShine | boolean | true | Enable or disable the dynamic shine gradient effect |
| showShadow | boolean | true | Enable or disable the shadow effect |
| borderRadius | number | 16 | Border radius of the card in pixels |
| showActionButtons | boolean | false | Show action buttons below card (eye to toggle visibility, copy to clipboard) |
| className | string | "" | Additional CSS classes to apply to the wrapper |
| cardClassName | string | "" | Additional CSS classes to apply to the card element |
| buttonsClassName | string | "" | Additional CSS classes to apply to the action buttons container |