A component that represents a scalar value within a known range, or a fractional value.

Meter component

Almacenamiento

import * as React from 'react';
import { Meter } from 'gnome-ui/meter';
import { HardDrive } from 'lucide-react';

export function MeterDefault() {
  return (
    <Meter.Root value={65} className="flex w-full max-w-sm flex-col gap-2">
      <div className="flex w-full items-center justify-between">
        <Meter.Label className="flex items-center gap-2 text-sm font-medium text-foreground">
          <Icons.HardDrive className="size-4 text-muted-foreground" />
          Storage
        </Meter.Label>
        <Meter.Value className="text-sm font-medium text-muted-foreground" />
      </div>
      <Meter.Track className="h-2.5 w-full overflow-hidden rounded-full bg-secondary">
        <Meter.Indicator className="h-full bg-primary transition-all duration-500 ease-in-out" />
      </Meter.Track>
    </Meter.Root>
  );
}

Anatomy

import { Meter } from 'gnome-ui/meter';

<Meter.Root>
  <Meter.Label />
  <Meter.Value />
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
</Meter.Root>

Examples

Custom Format

You can format the displayed value using the format prop, which accepts options from Intl.NumberFormatOptions. Base UI automatically calculates the formatted string based on the value, min, and max.

Meter component

Presupuesto consumido

$0$1,000

import * as React from 'react';
import { Meter } from 'gnome-ui/meter';
import { Activity } from 'lucide-react';

export function MeterFormatted() {
  return (
    <Meter.Root 
      value={850} 
      min={0} 
      max={1000} 
      format={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }} 
      className="flex w-full max-w-sm flex-col gap-2"
    >
      <div className="flex w-full items-center justify-between">
        <Meter.Label className="flex items-center gap-2 text-sm font-medium text-foreground">
          <Icons.Activity className="size-4 text-muted-foreground" />
          Budget spent
        </Meter.Label>
        <Meter.Value className="text-sm font-medium text-muted-foreground" />
      </div>
      <Meter.Track className="h-2.5 w-full overflow-hidden rounded-full bg-secondary">
        <Meter.Indicator className="h-full bg-[oklch(0.55_0.12_250)] transition-all duration-500 ease-in-out" />
      </Meter.Track>
      <div className="flex justify-between text-xs text-muted-foreground">
        <span>$0</span>
        <span>$1,000</span>
      </div>
    </Meter.Root>
  );
}

MeterIndicator

Visualizes the position of the value along the range. Renders a <div> element.

Documentation: Base UI Meter

API reference

Root

Groups all parts of the meter and provides the value for screen readers. Renders a <div> element.

Root Props:

Prop	Type	Default	Description
value	`number`	-	The current value.
aria-valuetext	`string`	-	A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
getAriaValueText	`((formattedValue: string, value: number) => string)`	-	A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter.
locale	`Intl.LocalesArgument`	-	The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale.
min	`number`	`0`	The minimum value
max	`number`	`100`	The maximum value
format	`Intl.NumberFormatOptions`	-	Options to format the value.
className	`string \| ((state: Meter.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Meter.Root.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Meter.Root.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Track

Contains the meter indicator and represents the entire range of the meter. Renders a <div> element.

Track Props:

Prop	Type	Default	Description
className	`string \| ((state: Meter.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Meter.Root.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Meter.Root.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Indicator

Visualizes the position of the value along the range. Renders a <div> element.

Indicator Props:

Prop	Type	Default	Description
className	`string \| ((state: Meter.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Meter.Root.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Meter.Root.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Value

A text element displaying the current value. Renders a <span> element.

Value Props:

Prop	Type	Default	Description
children	`((formattedValue: string, value: number) => ReactNode) \| null`	-	-
className	`string \| ((state: Meter.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Meter.Root.State) => CSSProperties \| undefined)`	-	*
render	`ReactElement \| ((props: HTMLProps, state: Meter.Root.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Label

An accessible label for the meter. Renders a <span> element.

Label Props:

Prop	Type	Default	Description
className	`string \| ((state: Meter.Root.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component’s state.
style	`CSSProperties \| ((state: Meter.Root.State) => CSSProperties \| undefined)`	-	-
render	`ReactElement \| ((props: HTMLProps, state: Meter.Root.State) => ReactElement)`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a `ReactElement` or a function that returns the element to render.

Meter

On this page