Meter Bar

Pro

Segmented bar for storage, budgets and allocation, with a legend. Segments fill in turn and glide to new sizes, and anything past the limit turns red.

Preview

Installation

npx @lumioui/cli add pro/meter-bar

Usage

import { MeterBar } from "@/components/ui/meter-bar/meter-bar";
<MeterBar />

Examples

Budget over limit

A household food budget for the month.

Single meter with threshold

A single meter against a monthly cap with an alert line.

Portfolio mix

An investing account's allocation as one stacked bar.

Storage breakdown

A device storage page.

API reference

Prop Type Default
segments* MeterSegment[] —
max number

Capacity. Default: the segment sum (a full allocation bar).

 —
size "sm" | "md" | "lg"

Track thickness: sm 6 · md 10 · lg 16. Default "md".

 "md"
threshold { value: number

Warning line on the track.

 —
label string } —
limitLabel string

Label under the limit tick when over. Default "Limit".

 "Limit"
legend "inline" | "list" | "none"

Legend style. Default "inline".

 "inline"
formatValue (value: number) => string

Format values for the legend and a11y. Default locale number.

 (v) => v.toLocaleString("en-US…
showPercent boolean

Show each segment's share of max in the list legend. Default false.

 false
selectable boolean

Legend items focus their segment on tap.

 false
selectedKey string | null

Controlled focused segment key.

 —
defaultSelectedKey string | null

Uncontrolled initial focused key.

 null
onSelectedKeyChange (key: string | null) => void —
releaseHold boolean

Act, hold, resolve on shrink: a segment's freed slice goes ghost, holds ~650ms, then folds away while the rest slide in, and a sheen crosses the track. Default false (shrinks glide straight away).

 false
onRelease () => void

With releaseHold: fires as the fold starts, after the hold.

 —
trackClassName string

Extra classes for the track.

 —
className string —