Balance Card

Beta

The home balance: a 56px amount with greyed decimals, the change this month, a hide button and the account number with Copy.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add balance-card
Also works with shadcn: npx shadcn@latest add @ritla/balance-card
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

balance-card.tsx

import { BalanceCard } from "@/components/ui/balance-card";<BalanceCard label="Available balance" amount={2450.75} currency="JOD" change={12.4} changeText="+JOD 214.670 this month" account="JO94 CBJO •••• 0302" labels={labels} />

API reference

BalanceCard

Prop	Type	Default	Description
`variant`	`"light" \| "graphite"`	`"light"`	Figma's Style.
`label`	`ReactNode`	None	The heading (“Available balance”).
`amount / currency / decimals`	`number / ReactNode / number`	`decimals 3`	The balance; 3 decimals for JOD.
`change / changeText`	`number / ReactNode`	None	The Trend badge and the words after it.
`account / copyValue`	`string`	None	The account as shown, and what Copy puts on the clipboard.
`labels`	`{ hide, show, copy, copied, hidden }`	None	Button names and the hidden text, in the page language.
`defaultHidden`	`boolean`	`false`	Start with the balance hidden.
`headingLevel`	`2 \| 3`	`2`	The label's heading level.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`EnterSpace`	Hides or shows the balance; copies the account.

ARIA

The hide button is a toggle (aria-pressed); hidden, a screen reader hears “Balance hidden”.
“Copied” is announced politely after Copy.

Arabic and RTL notes

Mirrors

The label on the right and the hide button on the left; Copy on the left.

Does not mirror

The amount and the account number stay left to right.

Numerals: The amount comes from Amount, so it follows the numerals setting; the account number is an identifier and never changes digits.
Arabic typography: numeric-56 Semibold amount, label-14 Medium label.