Meter

Astro range meters for capacity, usage, and other bounded measurements.

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

<div class="grid w-full max-w-sm gap-6">
  <Meter value={7} max={10} aria-labelledby="storage-label">
    <div class="flex justify-between">
      <MeterLabel id="storage-label">Storage used</MeterLabel>
      <MeterValue>7 of 10 GB</MeterValue>
    </div>
    <MeterTrack>
      <MeterIndicator />
    </MeterTrack>
  </Meter>
  <Meter value={0} aria-label="Empty archive capacity" />
  <Meter value={100} aria-label="Full archive capacity" />
</div>

Installation

bunx --bun shadcn@latest add @gnosticai/meter

Usage

import { Meter } from "@/components/ui/meter"

Use the Code tab above for the complete Astro composition.

API reference

Read the registry source for the exported parts and prop types.

When to use Meter

Pass a finite value and bounds to Meter. Use a meter for a measurement such as storage used, not a task that is still completing. The root can render its default track or accept the exported parts through its slot.

Keyboard and behavior

Give the meter an accessible name with aria-label or aria-labelledby. Min and max must define a valid range. Label and Value parts display your text; they do not generate labels or formatted percentages automatically.

Theme and layout

The fill width comes from the clamped value and shared primary color. A custom status color still needs explanatory text. This is a server-rendered measurement; application scripts must update both the ARIA value and CSS percentage for live data.

Related choices

Use Progress for task completion and Badge for a short status alongside the measurement.