Meter

Display a numeric value within a known range.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field
Random chance0%
Meter example
import { Meter } from "@/shim-ui/meter";

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

Install

Use the CLI or copy the source code manually.

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!
Custom range and labels example
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%
Bar color example
"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)";
  }
}