Amount in Words

Beta

The figure and the same amount written out, as cheques, transfer receipts and invoices require; both come from one number, so they never disagree.

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 amount-in-words
Also works with shadcn: npx shadcn@latest add @ritla/amount-in-words
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

amount-in-words.tsx

import { AmountInWords, amountInWords } from "@/components/ui/amount-in-words";<AmountInWords amount={1250.5} currency="SAR" /> // The words alone, for a PDF or an email:amountInWords(1250.5, "SAR", "ar"); // "فقط ألف ومئتان وخمسون ريالًا سعوديًا وخمسون هللة لا غير"

Examples

Currencies and sizes

Dinars with three digits of fils, the dual «ديناران كويتيان», and the lg size. note={null} hides the note.

EnglishMirroredArabic

Get the code

LTR →

API reference

AmountInWords

Prop	Type	Default	Description
`amount`	`number`	None	The amount; rounded to the currency's digits.
`currency`	`string`	None	SAR, JOD, KWD, BHD, AED, QAR, OMR, EGP or USD (`amountWordsCurrencies`).
`size`	`"md" \| "lg"`	`"md"`	Figma Size.
`lang`	`"en" \| "ar"`	None	The words' language; the page language by default.
`label / wordsLabel / note`	`ReactNode`	None	The labels and the note; `null` hides the note.

amountInWords

Prop	Type	Default	Description
`(amount, currency, lang)`	`string`	None	The same line as text, for documents and messages.

Accessibility

ARIA

Read-only output: nothing takes focus. The words line carries its own lang, so a screen reader reads it in its language even on an English page.

Arabic and RTL notes

Mirrors

The labels and the box start on the right.

Does not mirror

The figure is one left-to-right run, so the currency never parts from the number.

Numerals: The figure keeps Western digits, as Figma sets it and as cheques are written, whatever the numerals setting.
Arabic typography: Arabic follows the cheque formula «فقط … لا غير»: 3 to 10 take the counted noun's opposite gender («ثلاثة ريالات», «خمس هللات»), 11 to 99 take the accusative singular («خمسة عشر دينارًا»), and a dual before a noun drops its nun («ألفا دينار»).
Mixed-direction text: The words line carries its language's lang and dir, so Arabic words can sit on an English page without their punctuation flipping.