Skip to content
Lenso UI

Meter

A meter represents a quantity within a known range, or a fractional value.

Usage

import { Meter, Label } from '@lenso/ui';
"use client";
import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ meter: { width: 256 } });
export function Basic() {  return (    <Meter aria-label="Storage" xstyle={styles.meter} value={60}>      <Meter.Label>Storage</Meter.Label>      <Meter.Output />      <Meter.Track>        <Meter.Fill />      </Meter.Track>    </Meter>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

import { Meter, Label } from '@lenso/ui';
export default () => (  <Meter value={60}>    <Label>Storage</Label>    <Meter.Output />    <Meter.Track>      <Meter.Fill />    </Meter.Track>  </Meter>);

Examples

Sizes

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: { display: "flex", width: 256, flexDirection: "column", gap: 24 },});export function Sizes() {  return (    <div {...stylex.props(styles.column)}>      <Meter color="success" size="sm" value={40}>        <Meter.Label>Small</Meter.Label>        <Meter.Output />        <Meter.Track>          <Meter.Fill />        </Meter.Track>      </Meter>      <Meter color="accent" size="md" value={60}>        <Meter.Label>Medium</Meter.Label>        <Meter.Output />        <Meter.Track>          <Meter.Fill />        </Meter.Track>      </Meter>      <Meter color="warning" size="lg" value={80}>        <Meter.Label>Large</Meter.Label>        <Meter.Output />        <Meter.Track>          <Meter.Fill />        </Meter.Track>      </Meter>    </div>  );}export default Sizes;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Colors

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: { display: "flex", width: 256, flexDirection: "column", gap: 24 },});export function Colors() {  return (    <div {...stylex.props(styles.column)}>      {(["default", "accent", "success", "warning", "danger"] as const).map((color) => (        <Meter key={color} color={color} value={50}>          <Meter.Label>            {color[0]?.toUpperCase()}            {color.slice(1)}          </Meter.Label>          <Meter.Output />          <Meter.Track>            <Meter.Fill />          </Meter.Track>        </Meter>      ))}    </div>  );}export default Colors;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Without Label

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

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ meter: { width: 256 } });export function WithoutLabel() {  return (    <Meter aria-label="Storage usage" xstyle={styles.meter} value={45}>      <Meter.Track>        <Meter.Fill />      </Meter.Track>    </Meter>  );}export default WithoutLabel;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Custom Value Scale

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

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0); native Base UI range and formatting.import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ meter: { width: 256 } });export function CustomValue() {  return (    <Meter      xstyle={styles.meter}      format={{ currency: "USD", style: "currency" }}      max={1000}      min={0}      value={750}    >      <Meter.Label>Revenue</Meter.Label>      <Meter.Output />      <Meter.Track>        <Meter.Fill />      </Meter.Track>    </Meter>  );}export default CustomValue;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  meter: { width: 256 },  label: { fontWeight: 500, color: "var(--foreground)" },  output: { color: "var(--muted)", fontVariantNumeric: "tabular-nums" },  track: { borderRadius: 9999, backgroundColor: "var(--default)" },  fill: { borderRadius: 9999, backgroundColor: "var(--warning)" },});export function CustomStyles() {  return (    <Meter aria-label="Storage used" xstyle={styles.meter} value={68}>      <Meter.Label xstyle={styles.label}>Storage used</Meter.Label>      <Meter.Output xstyle={styles.output} />      <Meter.Track xstyle={styles.track}>        <Meter.Fill xstyle={styles.fill} />      </Meter.Track>    </Meter>  );}export default CustomStyles;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

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 [!toc]

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

Size Classes [!toc]

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

Color Classes [!toc]

  • .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.

PropTypeDefaultDescription
valuenumber0The current value
minValuenumber0The minimum value
maxValuenumber100The maximum value
size"sm" | "md" | "lg""md"Size of the meter track
color"default" | "accent" | "success" | "warning" | "danger""accent"Color of the fill bar
formatOptionsIntl.NumberFormatOptions{style: 'percent'}Number format for the value display
valueLabelReactNode-Custom value label content
childrenReactNode | (values: MeterRenderProps) => ReactNode-Content or render prop

Render Props

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

PropTypeDescription
percentagenumberThe percentage of the meter (0-100)
valueTextstringThe formatted value text