---
title: Meter
description: "A graduated gauge for a value within a known range."
---

```tsx
import * as stylex from '@stylexjs/stylex';

import { Meter, MeterLabel, MeterValue } from '@/components/ui/meter';
import { container } from '@/lib/constants.stylex';

export default function MeterDemo() {
  return (
    <Meter value={24} max={64} locale="en-US" style={styles.root}>
      <MeterLabel>Storage used</MeterLabel>
      <MeterValue>{(_, value) => `${value} GB of 64 GB`}</MeterValue>
    </Meter>
  );
}

const styles = stylex.create({
  root: {
    maxWidth: container.sm,
  },
});
```

## Install

```bash
npx shadcn@latest add @madeui/meter
```

## Usage

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

## Composition

```tsx
<Meter value={24} max={64}>
  <MeterLabel />
  <MeterValue />
</Meter>
```

## Custom range

Set `min` and `max` for a range other than 0–100, and render a formatted value label via `MeterValue`'s render function.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Meter, MeterLabel, MeterValue } from '@/components/ui/meter';
import { container } from '@/lib/constants.stylex';

export default function MeterCustomRange() {
  return (
    <Meter value={72} min={30} max={90} locale="en-US" style={styles.root}>
      <MeterLabel>CPU temperature</MeterLabel>
      <MeterValue>{(_, value) => `${value}°C`}</MeterValue>
    </Meter>
  );
}

const styles = stylex.create({
  root: {
    maxWidth: container.sm,
  },
});
```

## API reference

Built on [Base UI Meter](https://base-ui.com/react/components/meter) — same layout as `Progress`, but semantically a gauge (`role="meter"`) rather than task progress. All props are forwarded (`value`, `min`, `max`, `format`, …); see the [Base UI Meter API reference](https://base-ui.com/react/components/meter#api-reference). Like Progress, `MeterValue` formats via `Intl` — pass an explicit `locale` in SSR apps. Every part accepts a `style` prop (`StyleXStyles`, merged last).