Number Value

Usage

NumberValue formats a single numeric value with locale-aware Intl.NumberFormat rules (via @internationalized/number). Pass a value and an optional style, and the component renders the formatted result in a tabular-nums span.

import { NumberValue } from "@blakeui/pro-react";

<NumberValue value={1234567.89} />;

Formatting styles

Switch between the four Intl.NumberFormat styles with the style prop, and use notation="compact" for abbreviated large numbers. currency requires a currency code and unit requires a unit type.

<NumberValue value={1234567.89} />
<NumberValue style="currency" currency="EUR" value={1234.5} />
<NumberValue style="percent" value={0.1432} />
<NumberValue style="unit" unit="celsius" value={21} />
<NumberValue notation="compact" value={1280000} />

Prefix and suffix

Compose NumberValue.Prefix and NumberValue.Suffix to render text on either side of the formatted number. Each part forwards its own className, so you can style it independently from the value.

<NumberValue style="currency" currency="USD" value={228441}>
  <NumberValue.Prefix className="text-xs font-normal text-[var(--muted)]">
    USD
  </NumberValue.Prefix>
</NumberValue>

<NumberValue maximumFractionDigits={1} value={9.8}>
  <NumberValue.Suffix className="text-sm font-normal text-[var(--muted)]">
    / 10
  </NumberValue.Suffix>
</NumberValue>

Sign display

Use signDisplay to control when the leading sign appears. "exceptZero" renders a + or - for non-zero values, which is handy for deltas and changes.

<NumberValue
  style="currency"
  currency="USD"
  signDisplay="exceptZero"
  value={1242.77}
/>;

Render prop

Pass a function child to receive the formatted string and supply your own wrapping markup. This lets you wrap the value in a badge, link, or any custom element while keeping the locale-aware formatting.

<NumberValue
  style="currency"
  currency="USD"
  signDisplay="exceptZero"
  value={1242.77}
>
  {(formatted) => (
    <span className="rounded-full bg-[var(--success-soft)] px-2 py-0.5 text-sm font-medium text-[var(--success)]">
      {formatted}
    </span>
  )}
</NumberValue>;

Anatomy

Import the NumberValue component and access all parts using dot notation.

import { NumberValue } from "@blakeui/pro-react";

<NumberValue>
  <NumberValue.Prefix />
  <NumberValue.Suffix />
</NumberValue>;

CSS Classes

Base Classes

• .number-value — Base inline wrapper. Applies font-variant-numeric: tabular-nums.

Element Classes

• .number-value__prefix — Text before the formatted number.
• .number-value__value — The formatted number.
• .number-value__suffix — Text after the formatted number.

API Reference

NumberValue

The root component. Formats and displays a number using locale-aware Intl.NumberFormat.

Also supports all native span HTML attributes except children and style.

NumberValue.Prefix

Text displayed before the formatted number.

Also supports all native span HTML attributes.

NumberValue.Suffix

Text displayed after the formatted number.

Also supports all native span HTML attributes.