Meter
Displays a visual gauge bar showing a quantity within a known range, such as battery level, disk capacity, or password strength.
1.6 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-meterUsage
Code
import { Meter, MeterLabel, MeterValue } from '@/components/ui/meter'Code
<Meter value={40}>
<MeterLabel>Progress</MeterLabel>
<MeterValue />
</Meter>API Reference
Meter
Root component. Styled wrapper for Meter.Root from Base UI with flex column layout.
MeterTrack
Track container for the meter indicator. Styled wrapper for Meter.Track from Base UI.
MeterIndicator
Visual indicator showing the current value. Styled wrapper for Meter.Indicator from Base UI.
MeterLabel
Label text for the meter. Styled wrapper for Meter.Label from Base UI.
MeterValue
Displays the current value. Styled wrapper for Meter.Value from Base UI.
Examples
Simple meter
Meter with formatted value
Meter with range