Meter

A graduated gauge for a value within a known range.

Storage used

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 @madeui/cli add 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.

CPU temperature

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,
  },
});

Built on Base UI 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. Like Progress, MeterValue formats via Intl — pass an explicit locale in SSR apps. Every part accepts a style prop (StyleXStyles, merged last).