Money Card
NEWAn interactive financial wallet card featuring animated live balance updates, quick-send contact shortcuts, recent transaction history, and responsive modal sheets for sending, receiving, and viewing activity.
Ana
Your balance
Balance $52,002.50Last transaction
Dribbble ProOct 14 · 08:40$60.00
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/money-card
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| user | { name: string; avatar: string } | DEFAULT_USER | User profile with display name and avatar icon |
| balance | number | 52002.5 | Headline account balance in major currency units |
| contacts | Contact[] | DEFAULT_CONTACTS | List of quick-send contacts with avatars and tints |
| transactions | Transaction[] | DEFAULT_TRANSACTIONS | List of recent transactions sorted newest first |
| onSend | (req: TransferRequest) => Promise<void> | undefined | Async handler called upon submitting a send transfer |
| onRequest | (req: TransferRequest) => Promise<void> | undefined | Async handler called upon submitting a request transfer |
| onViewAll | () => void | undefined | Optional callback overriding default activity list opening |
| currency | string | 'USD' | ISO currency symbol used for formatted monetary values |
| locale | string | 'en-US' | Locale string for number and date formatting |
| paymentLink | string | 'pay.example/ana' | Personal payment link displayed on receive and settings sheets |
| className | string | '' | Optional CSS class overrides for the outer container |