# Balance Display

Hero balance with even-width digits and smaller cents. When money arrives, only the changed digits roll and the amount glows briefly. Tap to hide it behind a row of dots.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/balance-display
```

## Import

```tsx
import { BalanceDisplay } from "@/components/ui/balance-display/balance-display";
```

## Variants

- `dark-card` — Dark card stage: `npx @lumioui/cli add pro/balance-display-dark-card`
- `multi-currency` — Multi-currency pager: `npx @lumioui/cli add pro/balance-display-multi-currency`
- `savings-goal` — Savings goal: `npx @lumioui/cli add pro/balance-display-savings-goal`
- `wallet-hero` — Wallet hero: `npx @lumioui/cli add pro/balance-display-wallet-hero`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `number` | Balance in major units — 12480.32. |
| `currency?` | `string` | Currency symbol before the number. Default "$". |
| `decimals?` | `number` | Fraction digits. Default 2 (0 for yen-style currencies). |
| `label?` | `string` | Caption above the amount — "Total balance", "Main · USD". |
| `hidden?` | `boolean` | Controlled hidden state. |
| `defaultHidden?` | `boolean` | Initial hidden state when uncontrolled. Default false. |
| `onHiddenChange?` | `(hidden: boolean) => void` | Fires when the viewer toggles hiding. |
| `hideable?` | `boolean` | Disable the hide toggle (no eye, amount not pressable). |
| `delta?` | `number` | Signed change in the same currency — drives the chip colour. |
| `deltaPercent?` | `number` | Signed percent change shown after the delta amount. |
| `deltaLabel?` | `string` | Period after the chip — "today", "this month". |
| `size?` | `"md" | "lg"` | md 36pt · lg 48pt. Default "lg". |
| `align?` | `"start" | "center"` | Left-aligned (home header) or centred (pager, card stage). Default "start". |
| `animateChanges?` | `boolean` | Roll, light and hold when `value` changes. false swaps the figure instantly. Default true. |
| `onDepositLanded?` | `() => void` | Fires once a rise has landed and held — chain the next beat of a flow here. |
| `children?` | `React.ReactNode` | Extra content under the delta row (goal bar, account switcher). |
| `className?` | `string` | — |

Source: https://lumioui.com/components/balance-display