Amount

A sum of money formatted for any currency, with signs, colours, compact form, small cents and a hide toggle.

Base UI React Aria Radix UI

Payroll

Direct deposit

+ $4,280.50

Hydro bill

BC Hydro

- $142.18

Refund

Canadian Tire

+ $36.99

Price$49.99

Revenue$1.3M

In euros1 840,50 €

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/amount.json

Usage

import { Amount, formatAmount } from "@/components/ui/amount"

<Amount value={13482.17} />
<Amount value={-309.52} signGap tone="positive" />
<Amount value={1284300} compact />
<Amount value={49.99} smallCents />
<Amount value={13482.17} masked={hidden} />

currency and locale default to CAD and en-CA. compact shortens large sums, like $1.3M. decimals sets the digits after the point. formatAmount(value, options) returns the same text as a string, for toasts and labels.

Sign and tone

sign is auto (a minus only), always (a plus too) or never. signGap puts a space after the sign, like "- $309.52". tone="positive" colours money in green and leaves money out as it is. tone="signed" also colours money out in red.

Hiding and motion

Pass masked to hide the digits behind dots. Passing it at all, true or false, uses the transitions.dev spinning counter, so each digit spins back in when it turns off and spins to a new value when it changes. Use animate="spin" for the spin without masking, or animate="pop" for the number pop-in. smallCents only applies to a still amount.

Props

value. The number. Negative for money out.
currency, locale, compact, decimals. Formatting.
sign, signGap. How the sign shows.
tone. none, positive or signed.
smallCents. Sets the cents smaller and raised.
masked, maskLabel. Hides the digits. maskLabel is what screen readers hear while hidden.
animate. spin, pop or off.

Alert Dialog Approval Card

On This Page

Installation Usage Formatting Sign and tone Hiding and motion Props