Number Value

Usage

Anatomy

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

import { NumberValue } from "@thenamespace/uikit";

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

Compact

1,2341.2K

45,67846K

1,234,5671.2M

9,876,543,2109.9B

"use client";

import { NumberValue } from "@thenamespace/uikit";

export const DemoCompactExample = () => (

Currency

USD$228,441.00

EUR€228,441.00

JPY¥228,441

GBP£228,441.00

"use client";

import { NumberValue } from "@thenamespace/uikit";

export const DemoCurrencyExample = () => (

Format Options

Compact currency$1.2M

Accounting($1,234.56)

"use client";

import { NumberValue } from "@thenamespace/uikit";

export const DemoFormatOptionsExample = () => (

Percent

3.3%98.5%-2%

"use client";

import { NumberValue } from "@thenamespace/uikit";

export const DemoPercentExample = () => (

Sign Display

auto

420-42

always

+42+0-42

exceptZero

+420-42

never

42042

"use client";

import { NumberValue } from "@thenamespace/uikit";

export const DemoSignDisplayExample = () => (

Tabular Nums

$228,441.00$71,887.00$156,540.00$1,234.00$98,234.00

"use client";

import { NumberValue } from "@thenamespace/uikit";

export const DemoTabularNumsExample = () => (

With Prefix Suffix

228,441revenue1.2Musers$99.99/month

"use client";

import { NumberValue } from "@thenamespace/uikit";

export const DemoWithPrefixSuffixExample = () => (

CSS Classes

Base Classes

.number-value - Base inline-flex wrapper

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.

Prop	Type	Default	Description
`value`	`number`	-	Required. The numeric value to format
`style`	`'decimal' \| 'currency' \| 'percent' \| 'unit'`	`'decimal'`	Formatting style
`currency`	`string`	-	Currency code (e.g. `"USD"`). Required when `style` is `"currency"`
`unit`	`string`	-	Unit type (e.g. `"degree"`). Required when `style` is `"unit"`
`notation`	`'standard' \| 'compact' \| 'scientific' \| 'engineering'`	`'standard'`	Notation style
`signDisplay`	`'auto' \| 'always' \| 'exceptZero' \| 'never'`	-	Controls when the sign is displayed
`minimumFractionDigits`	`number`	-	Minimum number of fraction digits
`maximumFractionDigits`	`number`	-	Maximum number of fraction digits
`locale`	`string`	-	Override the locale from the nearest I18nProvider
`formatOptions`	`NumberFormatOptions`	-	Format options passed directly to `NumberFormatter`. Overrides individual convenience props
`children`	`ReactNode \| ((formatted: string) => ReactNode)`	-	Prefix/Suffix sub-components or a render function receiving the formatted string

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

NumberValue.Prefix

Text displayed before the formatted number.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Prefix text

Also supports all native span HTML attributes.

NumberValue.Suffix

Text displayed after the formatted number.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Suffix text

Also supports all native span HTML attributes.