MeterNew

Import

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

Usage

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

export function Basic() {
  return (
    <Meter aria-label="Storage" className="w-64" value={60}>

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

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

export function Sizes() {
  return (
    <div className="flex w-64 flex-col gap-6">

Colors

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

export function Colors() {
  return (
    <div className="flex w-64 flex-col gap-6">

Custom Value Scale

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

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

export function CustomValue() {
  return (
    <Meter

Without Label

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

import {Meter} from "@heroui/react";

export function WithoutLabel() {
  return (
    <Meter aria-label="Storage usage" className="w-64" value={45}>

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: