Wallet card
ProA compact account view with balance, recent activity, and focused money actions.
Live block · sample data
- A personal or business balance summary with quick send, deposit, swap, and buy actions.
- Dashboards that pair a balance with a small history chart and recent activity.
- Apps with a main and a reserve account shown in one card.
- Use billing-overview for subscription billing and invoices.
- Use wallet-stack for a stack of payment cards.
- Use checkout-flow for paying for an order.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this for a balance summary. The preview uses sample values; connect its actions and amounts to your own verified data.
example.tsx
import { WalletCard } from "@/components/arc/blocks/wallet-card/wallet-card"; export function AccountSummary() { return <WalletCard initialBalanceCents={482_150} />;}WalletCard
A wallet view with two accounts, a scrubbable balance chart, activity search, and send, deposit, swap, and buy panels. All balances, history, and actions are local sample state.
PropTypeDefaultDescription
initialBalanceCentsnumber1_248_032Starting balance of the main wallet in cents. The reserve wallet starts at 285,000 cents.- Arrow keys
- Move along the balance history via the range input scrubber.
- The balance is an aria-live region; hidden balances read as "Balance hidden".
- Action buttons use aria-pressed and aria-controls; focus returns to the action after a submit.
- Amount errors use role="alert" and aria-describedby on the input.
- Balances count to the new value over about 0.75s, and the card resizes on a gentle spring.
- Panels swap with a short rise and blur; new activity rows expand in place.
- Reduced motion sets values instantly and disables layout animation.
- The card is a container query root capped at 660px, so it adapts to its slot, not the viewport.
- At 420px container width padding tightens and action arrows hide; at 280px the wallet switcher drops its label and the footer text shrinks.
- Chart hover scrubbing is mouse only; touch and keyboard use the range input over the chart.
- Balances tween through a motion value over about 0.75s instead of re-rendering per frame.
- Activity search filters in memory and shows three rows until expanded; the list is not virtualized.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a personal or business balance summary with quick money actions.
- Every action is simulated. Replace initialEntries, balances, and submit() with calls to your ledger, and never trust client amounts.
- Composes Arc Button, DropdownMenu, Popover, and SegmentedControl.
The full library index for assistants is at /llms.txt.