Meter

A measurement on a scale that colours itself by thresholds: storage, battery, strength. Free, MIT · Data and metrics › Metrics and widgets

A measurement on a known scale (storage used, battery, password strength): role="meter", not a progress bar. With low / high / optimum it colours itself like the HTML <meter> and announces the status.

Installation

npx valyro-cli@latest add meter

npx shadcn@latest add https://valyro.xyz/r/meter.json

npm install valyro-ui

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

Props

Prop	Type	Default
`value` *	`number`		The measured value, clamped to min…max.
`min`	`number`		Lower end of the scale (default 0).
`max`	`number`		Upper end of the scale (default 100; never below `min`).
`low`	`number`		Upper bound of the low region, as on the HTML `<meter>`.
`high`	`number`		Lower bound of the high region, as on the HTML `<meter>`.
`optimum`	`number`		The best value. With `low` / `high` it decides the colour: an optimum below `low` means "less is better" (storage, quotas), above `high` "more is better" (battery, password strength).
`color`	`'auto' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'auto'`	`auto` follows the region of the value when thresholds are set (else the accent); any other value fixes the colour.
`label`	`ReactNode`		Visible caption above the bar; also names the meter unless `aria-label` is given.
`showValue`	`boolean`	`false`	Show the value next to the label.
`formatValue`	`(value: number, min: number, max: number) => string`		Custom value text (shown and announced), e.g. "7.4 of 10 GB".
`locale`	`string`		Locale for the percentage (default: the ThemeProvider's, then the browser's).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Bar thickness.
`showThresholds`	`boolean`	`false`	Tick marks at `low` and `high` on the track.
`labels`	`Partial<MeterLabels>`		Status words added to the announced value when thresholds are set.

Related components

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
Number Value — Locale-aware number: currency, percent, compact notation and units
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

Previous: KPI Group · Next: Widget · All Data and metrics