Wallet cardPro
A compact account view with balance, recent activity, and focused money actions.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { WalletCard } from 'animui/wallet-card';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this for a balance summary. The preview uses sample values; connect its actions and amounts to your own verified data.
import { WalletCard } from "animui/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.
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 animui Button, DropdownMenu, Popover, and SegmentedControl.
The full library index for assistants is at /llms.txt.