Wallet Card
A physical-card-style visual for a balance: payment methods, crypto wallets, store credit. Five built-in gradients, an optional chip glyph, network badge, and an actions slot.
Primary card
•••• •••• •••• 4242
Balance
$12,480.55
Valid thru
08/29
Visa
Installation
npx ajaxui add wallet-cardGradients
Five built-in palettes. Use them to differentiate accounts (checking vs. savings) or asset classes (USD vs. BTC).
Violet
Balance
$12,480.55
Valid thru
08/29
Visa
Emerald
Balance
$3,210.00
Valid thru
11/27
Mastercard
Slate
Balance
$890.20
Valid thru
04/26
Amex
Sunset
Balance
$5,142.80
Valid thru
02/28
Visa
Midnight
Balance
$48,001.00
Valid thru
09/30
Visa
Sizes
Three built-in sizes. Typography, padding, and the chip glyph all scale together so the card stays balanced.
Small
Balance
$1,204
Valid thru
08/29
Visa
Medium
Balance
$12,480.55
Valid thru
08/29
Visa
Large
Balance
$124,802.10
Valid thru
08/29
Visa
Crypto wallet
Repurpose the same primitive for a crypto wallet — set subtitle to a truncated address, drop the expiry, and label the network.
Main wallet
0x4f3a…b71c
Balance
2.481 ETH
Ethereum
Blur for privacy
blur hides the balance behind a frosted mask until the card is hovered or focused — useful for shared screens. The value remains in the accessibility tree, so screen readers still announce it.
Savings
•••• 1029
Balance
$48,001.00
Valid thru
09/30
Visa
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Top-left label (e.g. "Primary card"). |
| balance | ReactNode | — | The headline balance — pre-formatted. |
| subtitle | string | — | Masked card number, wallet address, etc. |
| network | string | — | Brand / network shown bottom-right. |
| expiresOn | string | — | Valid-thru date in MM/YY format. |
| gradient | "violet" | "emerald" | "slate" | "sunset" | "midnight" | "violet" | Background gradient preset. |
| size | "sm" | "md" | "lg" | "md" | Footprint preset. Scales width, padding, type. |
| chip | boolean | true | Show the small chip glyph in the top-right. |
| actions | ReactNode | — | Slot for action buttons rendered below the card. |
| onClick | () => void | — | Makes the whole card focusable & clickable. |
| blur | boolean | false | Blurs the balance until the card is focused/hovered. |
Accessibility
- The card root is a
<section>labeled byname; balance is announced as plain text. - The decorative gradient and chip are
aria-hidden. - When
bluris on, the balance is still in the accessibility tree — the visual mask is for shoulder-surfing only.