Meter

Import

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

Usage

<ComponentPreview name="meter-basic" />

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

<ComponentPreview name="meter-sizes" />

Colors

<ComponentPreview name="meter-colors" />

Custom Value Scale

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

<ComponentPreview name="meter-custom-value" />

Without Label

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

<ComponentPreview name="meter-without-label" />

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.

MeterRenderProps

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