Data

Amount

One way to show money across an app, so every screen formats alike and columns line up: mono, tabular figures, the real minus sign. The currency symbol takes the muted ink, so the number reads first. With a tone the sign always shows, since color only reinforces it. Set the locale and currency once on a FormatProvider.

view .md

Preview

the same amount, four currencies

R$ 1.234,561.234,56 €$1,234.56￥1,234

tone, always with a sign

+$45.00−$45.00$0.00

compact, the full value on hover

a large value with muted cents

$23,500.00

tabular figures line up

rent−$1,800.00
client invoice+$9,500.00
coffee−$12.50
refund+$89.90

Installation

terminal

bash

npx @entrepta/cli@latest add amount

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

amount.tsx

tsx

import { Amount } from "@/components/entrepta/amount"
import { FormatProvider } from "@/hooks/use-format"

// once, near the root
<FormatProvider locale="pt-BR" currency="BRL" timeZone="America/Sao_Paulo">
  …
</FormatProvider>

<Amount value={123456} />                       // R$ 1.234,56
<Amount value={-4500} tone="auto" />            // −R$ 45,00, in the error ink
<Amount value={250000} muteCents />             // R$ 2.500,00, cents muted
<Amount value={110000} compact />               // R$ 1,1 mil, the full value on hover
<Amount value={9900} currency="USD" locale="en-US" />

Props

Prop	Type	Default	Description
value	number	-	Integer minor units: 123456 is 1,234.56 in a currency with cents
currency / locale	string	-	Fall back to the FormatProvider's. A currency is required somewhere
tone	"auto" \| "neutral" \| "positive" \| "negative"	"neutral"	auto colors by the sign. Any tone but neutral also shows the sign
signDisplay	"auto" \| "always" \| "never"	-	always with a tone, auto without one
compact	boolean	false	1.2K, for axes and small widgets. Screen readers and hover get the full value
muteCents	boolean	false	Cents in the muted ink, for a large value