Numeral

A utility component used to format numbers. Typographic utilities may be composed with other typography components.

Example

120,000

Props

Format

The default style "decimal", is for plain number formatting. Values of "percent" will be multiplied by 100 before formatting.

3,500350,000%

Values of "currency" and "unit" are valid, but can be omitted. The format for each will be derived from the currency and unit props, respectively.

Currency

The currency to use when formatting the value. Possible values are the ISO 4217 currency codes, such as “USD” for the US dollar, “EUR” for the euro, or "CNY" for the Chinese RMB — see the Current currency & funds code list.

When a currency is provided the format property will be derived automatically.

$98.77

Units

A limited set of unit identifiers is available. Pairs of simple units can be concatenated with "-per-" to make a compound unit.

When a unit is provided the format property will be derived automatically.

98km/h

Abbreviations

For interfaces with limited real estate you may want to abbreviate some numeric values.

12K123 thousand€1.2M

Be cautious when abbreviating unit values. It may yield unexpected results.

123Kkm

Precision

Override the default precision behaviour. Provide a tuple to allow minimum and maximum fraction digits.

1,234.001,2341,234.57

Avoid setting precision when formatting currency values. Prefer the ISO standard in most cases.

Patterns

Composition

Compose Numeral with other components to create rich interfaces.

Acme Corporation shares hit 1.5M today

We asked investors which private company’s stock they would most like to own. More than 80% of respondents picked Acme Corp.Hooli, Acme’s parent component, went public earlier in the year. The median commitment was $1,000 though the average was significantly higher.
© 2025 @jossmac