Meter

Usage

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

Anatomy

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

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

Examples

Sizes

Colors

Without Label

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

Custom Value Scale

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

Customization

Tailwind CSS

Global CSS

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

Styling Reference

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

Inherits from React Aria Meter.

Render Props

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

Related Components