Number ValueUpdated

Import

import { NumberValue } from '@darkcode-ui/react';

Anatomy

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

The formatted number is always rendered in the .number-value__value element. Add <NumberValue.Prefix> and <NumberValue.Suffix> to place text around it.

<NumberValue value={1234.56}>
  <NumberValue.Prefix />
  <NumberValue.Suffix />
</NumberValue>

Usage

By default, NumberValue renders a locale-aware decimal number using Intl.NumberFormat.

import {NumberValue} from "@darkcode-ui/react";

export function NumberValueDefault() {
  return (
    <div className="text-2xl font-semibold">
      <NumberValue value={1234567.89} />
    </div>
  );
}

Compact

Use notation="compact" to render large numbers in short form (e.g. 1.2K, 1.2M).

import {NumberValue} from "@darkcode-ui/react";

export function NumberValueCompact() {
  return (
    <div className="flex flex-wrap items-center gap-6 text-2xl font-semibold">

Currency

Set style="currency" together with a currency code to format monetary values.

import {NumberValue} from "@darkcode-ui/react";

export function NumberValueCurrency() {
  return (
    <div className="flex flex-wrap items-center gap-6 text-2xl font-semibold">

Format Options

Pass formatOptions to access the full Intl.NumberFormat API. It overrides the individual convenience props.

import {NumberValue} from "@darkcode-ui/react";

export function NumberValueFormatOptions() {
  return (
    <div className="flex flex-col items-start gap-3 text-2xl font-semibold">

Percent

Set style="percent" to render a fraction as a percentage.

import {NumberValue} from "@darkcode-ui/react";

export function NumberValuePercent() {
  return (
    <div className="flex flex-wrap items-center gap-6 text-2xl font-semibold">

Sign Display

Use signDisplay to control when the + / - sign is shown.

import {NumberValue} from "@darkcode-ui/react";

export function NumberValueSignDisplay() {
  return (
    <div className="flex flex-wrap items-center gap-6 text-2xl font-semibold">

Tabular Nums

The value uses tabular figures by default, so digits stay aligned as the number changes.

"use client";

import {NumberValue} from "@darkcode-ui/react";
import React from "react";

With Prefix Suffix

Use NumberValue.Prefix and NumberValue.Suffix to add contextual text around the value.

import {NumberValue} from "@darkcode-ui/react";

export function NumberValueWithPrefixSuffix() {
  return (
    <div className="flex flex-wrap items-center gap-8 text-2xl font-semibold">

Localization

NumberValue reads the locale from the nearest I18nProvider. Wrap your app (or a subtree) to format numbers for a specific locale, or pass the locale prop to override it on a single value.

import {I18nProvider} from 'react-aria-components';
import {NumberValue} from '@darkcode-ui/react';

<I18nProvider locale="de-DE">
  <NumberValue currency="EUR" style="currency" value={1234567.89} />
</I18nProvider>

Styling

Passing Tailwind CSS classes

import {NumberValue} from '@darkcode-ui/react';

function CustomNumberValue() {
  return (
    <NumberValue className="text-2xl font-semibold" currency="USD" style="currency" value={1234.56}>
      <NumberValue.Suffix className="ms-1 text-sm text-muted">USD</NumberValue.Suffix>
    </NumberValue>
  );
}

Customizing the component classes

To customize the NumberValue component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .number-value {
    @apply items-baseline gap-0.5;
  }

  .number-value__value {
    @apply font-semibold tabular-nums;
  }

  .number-value__prefix,
  .number-value__suffix {
    @apply text-muted;
  }
}

DarkCode UI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The NumberValue component uses these CSS classes (View source styles):

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.

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.