Meter

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

export default function MeterDemo() {

Installation#

pnpmnpmyarnbun
bunx --bun shadcn@latest add @ondo-ui/meter
Copy

Usage#

Copyimport { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"

Copy<Meter value={72} min={0} max={100} variant="default">
  <MeterLabel>Disk used</MeterLabel>
  <MeterValue />
</Meter>

Meter builds on Base UI's Meter, so it is announced as a meter with the right aria-valuenow and aria-valuetext. Unlike Progress it has no indeterminate state — a meter always has a reading.

Children render above the track, which is where MeterLabel and MeterValue go. The bar fills with bg-current, so variant — or any text-color utility in className — recolors it.

Composition#

CopyMeter
├── MeterLabel
├── MeterValue
└── MeterTrack
    └── MeterIndicator

Examples#

Label and value#

MeterLabel names the reading and MeterValue prints it. MeterValue sits hard right, so the pair reads as one row above the bar.

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

export default function MeterLabelDemo() {

Variants#

variant picks the bar color from the theme's semantic set. Which band a reading falls into is yours to decide, so pick the variant from the value at the call site.

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

export default function MeterVariants() {

Formatting the value#

format takes Intl.NumberFormat options and shapes both the printed text and the value announced to screen readers. MeterValue also takes a render function when the reading needs surrounding words.

That render function is a function prop, so the component passing it has to be a Client Component.

"use client"

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

API reference#

Meter#

Plus the rest of Base UI's Meter.Root props.

MeterTrack, MeterIndicator#

The bar and its fill. Meter composes them for you; reach for them only to restyle the track.

MeterLabel, MeterValue#

Base UI's Meter.Label and Meter.Value with ondo styling. MeterValue takes a render function ((formatted, value) => ReactNode) when format alone is not enough.