---
title: Meter
description: A graphical display of a numeric value within a range.
links:
  doc: https://base-ui.com/react/components/meter
  anatomy: https://base-ui.com/react/components/meter#anatomy
  api: https://base-ui.com/react/components/meter#api-reference
---

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

export function MeterDemo() {
  return (
    <Meter value={75} className="max-w-xs">
      <div className="flex items-center justify-between gap-2">
        <MeterLabel>Storage usage</MeterLabel>
        <MeterValue />
      </div>
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  );
}
```

## Installation

<ComponentSource name="meter" title="components/ui/meter.tsx" />

## Usage

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

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

## Examples

### Without label

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

export function MeterDemo() {
  return <Meter value={75} className="max-w-xs" />;
}
```

### Formatted value

```tsx
"use client";

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

const MAX = 5;

export function MeterDemo() {
  return (
    <Meter max={MAX} value={3} className="max-w-xs">
      <div className="flex items-center justify-between gap-2">
        <MeterLabel>Rating</MeterLabel>
        <MeterValue>{(_formatted, value) => `${value} / ${MAX}`}</MeterValue>
      </div>
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  );
}
```