Meter
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
A graphical display of a numeric value within a range.
Overview
Use Meter to show a known numeric value within a known range.
Meter is useful for storage usage, quota, health, score, strength, capacity, and other measured values. Use Progress instead when a task is actively moving toward completion.
Anatomy
A meter has a value, minimum, maximum, optional label, optional formatted value, and visual bar.
Usage guidance
Use a label and value when the number matters. Use range styling when different portions of the range have meaning, such as low, normal, and high.
Accessibility
Expose the value in text when precision matters. Do not rely only on bar length or color.
Installation
npx honestui@latest add meterUsage
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"<Meter value={40}>
<MeterLabel>Progress</MeterLabel>
<MeterValue />
</Meter>Examples
Our examples cover a simple meter, formatted value, and range-based display.