Amount

Beta

Money with its currency, an optional sign and decimals, in the reader's digits.

Preview

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

Add the component
$ npx ritla add amount
Also works with shadcn: npx shadcn@latest add @ritla/amount
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.

amount.tsx

import { Amount } from "@/components/ui/amount";<Amount value={2450.75} decimals={3} unit="JOD" size="lg" />

Prop	Type	Default	Description
`value`	`number`	None	The value; negative shows in red with a minus.
`unit`	`ReactNode`	None	Figma's Unit: a currency code, icon or another unit.
`unitAfter`	`boolean`	`false`	The unit after the number (such as grams).
`decimals`	`number`	`2`	Figma's Decimals: 3 for JOD and KWD.
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"md"`	Figma's Size.
`tone`	`"default" \| "positive" \| "negative"`	None	Figma's Tone.
`showSign`	`boolean`	`false`	Figma's Show sign.
`fraction`	`"small" \| "dimmed" \| "same"`	None	Figma's Fraction.
`numerals`	`"latn" \| "arab"`	None	Western or Arabic-Indic digits. Default: what `RitlaProvider` sets.

Numerals: The amount follows the numerals setting like every other amount on the page: ٢٬٤٥٠٫٧٥٠ in Arabic-Indic digits with their own separators, 2,450.750 in Western ones. Figma draws Western digits in both languages.
Arabic typography: numeric-* styles, Semibold.