Balance Display

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/balance-display

Usage

import { BalanceDisplay } from "@/components/ui/balance-display/balance-display";
<BalanceDisplay />

Examples

Dark card stage

A credit card's own page, staged on a fixed dark canvas whatever the app theme.

Multi-currency pager

A travel money account with one pocket per currency.

Savings goal

A savings pot working toward a goal.

Wallet hero

The top of a wallet home.

API reference

Prop Type Default
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).

 2
label string

Caption above the amount — "Total balance", "Main · USD".

 —
hidden boolean

Controlled hidden state.

 —
defaultHidden boolean

Initial hidden state when uncontrolled. Default false.

 false
onHiddenChange (hidden: boolean) => void

Fires when the viewer toggles hiding.

 —
hideable boolean

Disable the hide toggle (no eye, amount not pressable).

 true
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".

 "lg"
align "start" | "center"

Left-aligned (home header) or centred (pager, card stage). Default "start".

 "start"
animateChanges boolean

Roll, light and hold when value changes. false swaps the figure instantly. Default true.

 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 —