Installation
You can add the meter using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add meterUsing a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.
Anatomy
A meter describes a level within a known range, not a task moving towards done, and screen readers announce it that way. It is drawn on ProgressBar's track: the same rail and fill, easing to each new value.
Set the range with minValue and maxValue, write the reading yourself with valueLabel, and add a hint under the bar with description.
Tones
tone colours the fill from semantic tokens, so it follows the theme in light and dark mode.
<Meter label="Accent" value={40} /> // the default<Meter label="Success" value={55} tone="success" /><Meter label="Warning" value={78} tone="warning" /><Meter label="Error" value={94} tone="error" />Thresholds
Pick the tone from the value to warn as a limit gets close. Drag the slider to fill the meter.
const toneFor = (percent: number): MeterTone => percent >= 90 ? "error" : percent >= 75 ? "warning" : "accent";
<Meter label="Storage" value={used} tone={toneFor(used)} />Right-to-left
Inside DirectionProvider, the fill grows from the right.
import { DirectionProvider } from "@/components/foundations/direction/direction";
<DirectionProvider locale="ar"> <Meter label="التخزين" value={72} /> <Meter label="المقاعد" value={19} maxValue={20} tone="warning" /></DirectionProvider>Accessibility
The meter is announced with its label and value, as role meter. Colour is never the only signal: keep the value visible, or say what the tone means in the description.