Luke UI
ComponentsTypography

Numeral

Locale-aware number formatting powered by Intl.NumberFormat.

Numeral formats a number with Intl.NumberFormat. It reads the active locale from React Aria's I18nProvider and accepts the relevant typography props from Text.

Numeral — Basic
12,345.67

Format

Numeral uses decimal formatting by default. It infers currency or unit formatting when currency or unit is present. Set format to 'percent' or 'decimal', or when you want to make currency and unit formatting explicit in the component call.

Numeral — Formats
Conversion rate: 13%Monthly spend: A$98.76Wind speed: 98km/hPage views: 12,345

Compact notation

Set abbreviate for compact notation such as 12K. Pass "long" for a long display such as 12 thousand.

Numeral — Compact notation
Short: 12KLong: 12 thousand

Precision

Pass a number for fixed fraction digits or a [min, max] tuple for a range. Use formatOptions for other Intl.NumberFormat options.

Numeral — Precision
Fixed: 98.77Range: 1,234.57

Formatting rules

Numeral throws when:

  • both currency and unit are provided.
  • format="currency" is used without a currency code.
  • format="unit" is used without a unit value.
  • precision is not a non-negative integer or valid [min, max] tuple.

Typography and alignment

Numerals use tabular figures and end alignment by default, so values remain readable in a column. Set fontVariantNumeric, textAlign, or inherited Text typography props when the context needs a different treatment.

Use Text for non-numeric content and Heading for section titles.