Payment cardPro
A wallet card with a holographic sheen that follows the pointer and a number reveal.
•••• •••• •••• 4242
Card holder
Ada Lovelace
Expires
09/29
•••• •••• •••• 8210
Card holder
Grace Hopper
Expires
03/28
When to use
- Wallets, virtual cards and saved payment methods.
When not to use
- Collecting card details: use the credit card input.
Installation
Usage
Import it from @/components/ui/payment-card after installing.
example.tsx
import { PaymentCard } from "@/components/ui/payment-card";
<PaymentCard last4="4242" holder="Ada Lovelace" expiry="09/29" theme="aurora" />API reference
PaymentCard
A 3D card that tilts and shines under the pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
| last4 / holder / expiry | string | – | Card details shown. |
| brand | "visa" | "mastercard" | "amex" | "visa" | Logo. |
| theme | "midnight" | "lime" | "aurora" | string | "midnight" | Preset or any CSS background. |
| number | string | – | Full number; adds a show / hide button. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Reach the reveal button |
Accessibility
- The number is labelled as "Card ending in 4242" unless revealed.
- Tilt and sheen are skipped under reduced motion.
Motion
- Tilts toward the pointer with a spring; a light sheen follows it.
Responsive behavior
- Up to 340px at the standard card ratio.
Performance
- Motion values only; no re-renders while moving.
Notes for AI
- Never pass full numbers of real cards except to their owner.
This page as Markdown, for assistants and coding agents:
/components/payment-card/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt