Meter

Display a numeric value within a known range.

Documentation: React Aria
Pattern: W3C ARIA
Source: GitHub
Issues: Report
Composes: Field
Install: pnpm dlx @kkga/shim add meter

Random chance0%

import { Meter } from "@/shim-ui/meter";

export default () => <Meter label="Random chance" value={70} />;

Install

Use the CLI or copy the source code manually.

Command

Source code

pnpm dlx @kkga/shim add meter

Custom range and labels

Provide additional context with the label anddescription props. Control the range via minValue and maxValue.

See the API documentation for details on each prop.

Progress1 of 4

3 more steps to go!

import { Meter } from "@/shim-ui/meter";

export default () => (
  <Meter
    description="3 more steps to go!"
    label="Progress"
    maxValue={4}
    minValue={0}
    value={1}
    valueLabel="1 of 4"
  />
);

Bar color

Apply a custom color to the meter bar with the color prop. Provide a static CSS color string or a function that maps the current value to a color.

Usage0%

Almost there0%

Getting there0%

Just starting0%

"use client";
import { Meter } from "@/shim-ui/meter";

export default () => (
  <>
    <Meter color="var(--color-warning-solid)" label="Usage" value={80} />
    <Meter color={getColor} label="Almost there" value={95} />
    <Meter color={getColor} label="Getting there" value={55} />
    <Meter color={getColor} label="Just starting" value={15} />
  </>
);

function getColor(value: number) {
  switch (true) {
    case value > 90:
      return "var(--color-success-solid)";
    case value > 50:
      return "var(--color-accent-solid)";
    default:
      return "var(--color-neutral-solid)";
  }
}