Meter

Installation

npx shadcn@latest add @fujin/meter

Usage

import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"

<Meter
  value={32.4}
  max={50}
  getAriaValueText={(_, value) => `${value} of 50 GB`}
>
  <MeterLabel>Storage used</MeterLabel>
  <MeterValue>{(_, value) => `${value} of 50 GB`}</MeterValue>
</Meter>

Like progress, Meter renders its own track and bar; label and value go inside as children. Without a MeterLabel, pass aria-label.

Meter or progress?

Screen readers announce them differently (meter vs progressbar), so pick by meaning, not looks. A meter has no indeterminate state.

Pitfalls

• MeterValue is aria-hidden; screen readers hear aria-valuetext, which defaults to a percentage of the range. When MeterValue shows something else ("32.4 of 50 GB"), pass the same text through getAriaValueText.
• Function children and getAriaValueText are functions, so the component that passes them must be a Client Component.
• To colour the bar for "nearly full", target it from the root: className="[&_[data-slot=meter-indicator]]:bg-destructive" - and say it in text too, since colour alone is not enough (WCAG 1.4.1).

API Reference

Every other prop is forwarded to the Base UI Meter.