---
title: Meter
description: "Astro range meters for capacity, usage, and other bounded measurements."
seo:
    title: "Meter for Astro — examples and usage"
---

```astro
---
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

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

## Usage

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

Use the Code tab above for the complete Astro composition.

## API reference

Read the [registry source](/r/meter.json) 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](/components/progress) for task completion and [Badge](/components/badge) for a short status alongside the measurement.