Money Card
proInteractive wallet card with animated balance, quick-send contacts, recent transactions, custom keypad sheets, and settings.
#wallet#fintech#payments#sheet#keypad
Ana
Your balance
Balance $52,002.50Last transaction
Dribbble ProNov 13 · 13:15$60.00
CLI Installation
Requires Pro API token →pnpm dlx shadcn@latest add https://ui.ibidi.dev/r/money-card.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| user | { name: string; avatar: ReactNode } | DEFAULT_USER | Account owner displayed in the card header and settings sheet. |
| balance | number | 2215.27 | Controlled account balance in major currency units. |
| contacts | Contact[] | DEFAULT_CONTACTS | Quick-send contact list (up to 5 shown in the row, searchable in sheets). |
| transactions | Transaction[] | DEFAULT_TRANSACTIONS | Transaction history ordered newest first; negative amounts represent outgoing funds. |
| onSend | (req: TransferRequest) => Promise<void> | - | Async handler called when sending money; resolving shows success, rejecting displays an inline error. |
| onRequest | (req: TransferRequest) => Promise<void> | - | Async handler called when requesting money; resolving shows success, rejecting displays an inline error. |
| onViewAll | () => void | - | Optional override for the View all transactions button (defaults to the built-in activity sheet). |
| currency | string | "USD" | ISO 4217 currency code used for Intl formatting. |
| locale | string | "en-US" | BCP 47 locale tag used for number and date formatting. |
| paymentLink | string | - | Shareable payment URL shown with a copy action in the Receive and Settings sheets. |
| className | string | - | Additional CSS classes applied to the outer card container. |
| style | CSSProperties | - | Inline styles applied to the outer card container. |