Meter

Import

import { Meter, Label } from '@heroui/react';

Usage

Anatomy

import { Meter, Label } from '@heroui/react';

export default () => (
  <Meter value={60}>
    <Label>Storage</Label>
    <Meter.Output />
    <Meter.Track>
      <Meter.Fill />
    </Meter.Track>
  </Meter>
);

Sizes

Colors

Custom Value Scale

Use minValue, maxValue, and formatOptions to customize the value range and display format.

Without Label

When no visible label is needed, use aria-label for accessibility.

Styling

Passing Tailwind CSS classes

You can customize individual Meter parts:

import { Meter, Label } from '@heroui/react';

function CustomMeter() {
  return (
    <Meter value={60}>
      <Label>Storage</Label>
      <Meter.Output />
      <Meter.Track className="bg-purple-100 dark:bg-purple-900">
        <Meter.Fill className="bg-purple-500" />
      </Meter.Track>
    </Meter>
  );
}

Customizing the component classes

To customize the Meter component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .meter {
    @apply w-full gap-2;
  }

  .meter__track {
    @apply h-3 rounded-full;
  }

  .meter__fill {
    @apply rounded-full;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Meter component uses these CSS classes (View source styles):

Base & Element Classes

• .meter - Base container (grid layout)
• .meter__output - Value text display
• .meter__track - Track background
• .meter__fill - Filled portion of the track

Size Classes

• .meter--sm - Small size variant (thinner track)
• .meter--md - Medium size variant (default)
• .meter--lg - Large size variant (thicker track)

Color Classes

• .meter--default - Default color variant
• .meter--accent - Accent color variant
• .meter--success - Success color variant
• .meter--warning - Warning color variant
• .meter--danger - Danger color variant

API Reference

Meter Props

Inherits from React Aria Meter.

Prop	Type	Default	Description
value	number	0	The current value
minValue	number	0	The minimum value
maxValue	number	100	The maximum value
size	"sm" | "md" | "lg"	"md"	Size of the meter track
color	"default" | "accent" | "success" | "warning" | "danger"	"accent"	Color of the fill bar
formatOptions	Intl.NumberFormatOptions	{style: 'percent'}	Number format for the value display
valueLabel	ReactNode	-	Custom value label content
children	ReactNode | (values: MeterRenderProps) => ReactNode	-	Content or render prop

MeterRenderProps

When using the render prop pattern, these values are provided:

Prop	Type	Description
percentage	number	The percentage of the meter (0-100)
valueText	string	The formatted value text