Number Value

Locale-aware number: currency, percent, compact notation and units. Pro · Data and metrics › Metrics and widgets

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add number-value

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { NumberValue } from 'valyro-ui-pro';

Prop	Type	Default
`value` *	`number`		The number; for `percent` a share of one (0.24 prints 24%).
`format`	`'number' \| 'currency' \| 'percent' \| 'compact'`	`'number'`	`number`, `currency`, `percent` or `compact` (12.8K; with `currency` it prints $12.8K).
`currency`	`string`		ISO 4217 code for `currency` and compact money (default USD).
`fractionDigits`	`number`		Fixed number of fraction digits; by default the format decides (2 for USD, 0 for JPY).
`signDisplay`	`Intl.NumberFormatOptions['signDisplay']`		`always` / `exceptZero` add a plus sign to positive values.
`formatOptions`	`Intl.NumberFormatOptions`		Raw Intl.NumberFormat options, applied last.
`label`	`ReactNode`		Caption before the number: a currency code, a metric name.
`unit`	`ReactNode`		Unit after the number in a lighter weight: "kcal", "steps", "avg".
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Text size of the number. Default `md`.
`tone`	`'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'neutral'`	Color of the number. Default `neutral`.
`layout`	`'inline' \| 'row' \| 'stacked'`	`'inline'`	`inline` puts the label before the number; `row` pushes them to opposite ends; `stacked` puts the label above.
`locale`	`string`		BCP 47 locale. Default: the `ThemeProvider` locale, then the browser's.

Stats Card — Metric cards
KPI Group — KPI row: value, change vs. previous period, sparkline and progress to goal
Widget — Dashboard container: title, actions, big number, legend and chart area
Trend Value — Metric change: arrow, sign and color, as text or a pill
Proportion Bar — Proportion bar with a legend: storage, budget, breakdown
Activity Rings — Concentric progress rings toward goals
Leaderboard — Leaderboard: medal places, thumbnails, numbers and change over a period
Data Table — Tables with search and sorting
Data Grid — Grid for 100,000 rows: grouping, filters, inline editing
Virtual List — Virtual list for 100,000 rows
Bulk Action Bar — Actions for selected rows, with keyboard shortcuts
List Block — List with images or icons, descriptions and values