Finance
The money components: balances, spending, transactions, and market quotes.
Total balance
$24,980.50
+$1,240.50this month
Strings vs numbers is deliberate
Balance takes a pre-formatted string, because a headline figure is often abbreviated ("$2.44M") in ways no formatter should guess. The list components take raw numbers and a formatAmount callback instead, so every row in a list is formatted identically. Both default to USD with two decimals.
Rent
₦1,450.00
Food
₦380.40
Transport
₦122.80
Spending against a limit
Monthly spending
$1,240.00
of $2,000.00 limit
Categories and transactions
In Transactions, the sign of amount is what picks income or expense styling — don't pass absolute values with a separate type flag.
Rent
$1,450.00
Food
$380.40
Transport
$122.80
Figma
Software
-$45.00
Client payment
Income
+$2,400.00
Coffee
Food
-$6.40
Markets
ACME
Acme Corp
$184.22
+$3.14 (+1.73%)
Ticker
ACME+1.73%
GLOB-0.42%
NDEX+0.88%
Balance props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | Pre-formatted balance. Formatting and currency are yours. | |
| label | string | Caption above the figure. | |
| change | { value: string; label?: string; direction?: 'up' | 'down' } | Delta row. The sign in value is yours to include; direction only sets the colour and arrow. | |
| progress | number | 0–100. Adds the small progress ring beside the figure. | |
| hidden | boolean | Controlled masked state. Omit to let the component manage the eye toggle itself. | |
| onToggleHidden | (hidden: boolean) => void | Fires when the mask is toggled. |
The rest of the set
| Prop | Type | Default | Description |
|---|---|---|---|
| SpendingBalance | label, spent, limit, formatAmount | Spend against a cap, with the bar derived from the two numbers. | |
| Expenses | categories, variant, formatAmount | Category breakdown. Takes raw numbers, not strings — formatting goes through formatAmount. | |
| Transactions | transactions, formatAmount, emptyTitle, emptyDescription | Positive amounts render as income, negative as expense. Has its own empty state. | |
| StockMarket | logo, symbol, name, price, change, chart, periodLabel, formatAmount | Quote card. Passing chart data expands it into the full card with a bar chart. | |
| Ticker | items, speed, formatChange | Scrolling symbol strip. speed is px/second, default 40. |