Skip to main content
The Meter component displays a scalar measurement within a known range, similar to a gauge.

Installation

Usage

Components

Meter (Root)

number
required
Current value.
number
default:"0"
Minimum value.
number
default:"100"
Maximum value.
number
Optimal value.
number
Low threshold.
number
High threshold.

MeterLabel

Label for the meter.

MeterTrack

Background track.

MeterIndicator

Filled portion indicating the value.

MeterValue

Displays the current value as text.

Examples

Storage Meter

Battery Level

With Thresholds

The Meter component differs from Progress - use Meter for measurements (like disk usage), and Progress for task completion.

Accessibility

  • Built on @base-ui/react Meter primitive
  • Proper role=“meter” attribute
  • ARIA attributes for value and range
  • Screen reader support for value announcements