Meter

A value inside a known range, like budget spent or storage used, colored by thresholds. Comes as a single bar, segments, or a stack of parts with a legend.

Base UI React Aria Radix UI

Software budget, October$3,180 of $4,000

Most of this month is spent.

Storage87.1 GB of 100 GB

Receipts38.4 GB
Contracts21.2 GB
Design files17.9 GB
Backups9.6 GB

New password

Fair

AI credits120 left

Credits run out in about 2 days at this rate.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/meter.json

Usage

import { Meter, MeterStack } from "@/components/ui/meter"

<Meter
  label="Software budget"
  value={3180}
  max={4000}
  formatOptions={{ style: "currency", currency: "CAD" }}
  thresholds={{ low: 3000, high: 3800, optimum: 0 }}
/>
 
<MeterStack
  label="Storage"
  max={100}
  parts={[
    { label: "Receipts", value: 38.4 },
    { label: "Contracts", value: 21.2 },
  ]}
/>

Meter or Progress

Use Meter for an amount that sits in a range and can go up or down, like credits left. Use Progress for a task moving toward done, like an upload.

Thresholds

Thresholds work like the HTML meter. low and high split the range into three regions, and optimum says which region is good.

The region holding optimum is ok and uses the primary color.
The region next to it is a warning and turns amber.
The far region is danger and turns red.

For a budget, less is better, so set optimum: 0. For credits left, more is better, so set optimum to the max. Pass tone to set the color yourself.

Props

Meter. value, min and max. label and description sit above and below the bar. formatOptions takes any Intl.NumberFormat options, and valueLabel replaces the formatted value. segments splits the bar into equal parts, and hideHeader keeps only the bar.
MeterStack. parts is a list of labels and values, drawn in one track with a legend. max defaults to the total of the parts. Each part takes a className for its color, and the defaults run through the chart colors.

The fill grows from zero on first paint and eases between values on the motion scale. It stays still when reduced motion is on.

Message Scroller Multi Select

On This Page

Installation Usage Meter or Progress Thresholds Props