Meter

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 love-ui@latest add meter

Usage

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

<Meter value={40}>
  <MeterLabel>Progress</MeterLabel>
  <MeterValue />
</Meter>

Examples

The examples show a simple meter, formatted value, and range-based display.

Without Label and Value

With Formatted Value

With Range