Constella

Meter

Shows a measurement against a limit, like usage against a quota.

View as Markdown
Storage
x
Messages this month
x
<Meter value={24}>  <MeterLabel>Storage</MeterLabel>  <MeterValue /></Meter>

Installation

$ npx shadcn@latest add @constella/meter

Usage

import { Meter, MeterLabel, MeterValue } from "@/components/primitives/meter";
<Meter value={24}>  <MeterLabel>Storage</MeterLabel>  <MeterValue /></Meter>

Use Progress for a task that's on its way to done.

Composition

Meter├── MeterLabel├── MeterValue└── MeterTrack    └── MeterIndicator

Meter Variant

Use variant="ring" for an icon-sized ring in place of the bar, for a meter in a table row or beside an icon. The label and value sit beside it.

Seats
x
Seatsx
Seatsx
Guestsx
<Meter max={10} value={7} variant="ring">  <MeterLabel>Seats</MeterLabel>  <MeterValue>{(_, value) => `${value} of 10`}</MeterValue></Meter>
VariantDraws
barA full-width track under the label and value (default)
ringA ring the size of an icon before them, filling clockwise from the top

Meter Color

The fill, bar or ring, is accentSolid until you give it a color. A full meter isn't always bad, so the meter never picks one itself: set it from your own thresholds.

Battery
x
Memory
x
Storage
x
<Meter color="success" value={100}>  <MeterLabel>Battery</MeterLabel>  <MeterValue /></Meter><Meter color="warning" value={82}>  <MeterLabel>Memory</MeterLabel>  <MeterValue /></Meter><Meter color="danger" value={100}>  <MeterLabel>Storage</MeterLabel>  <MeterValue /></Meter>

Meter Value

Set max to measure in the quota's own units, and give MeterValue a function to show the value your way.

Storage
x
Messages this month
x
Seats
x
<Meter max={5} value={3.2}>  <MeterLabel>Storage</MeterLabel>  <MeterValue>    {(_, value) => `${gb.format(value)} of ${gb.format(5)}`}  </MeterValue></Meter>

API Reference

PartAdds
MeterRenders MeterTrack and MeterIndicator after its children; variant (bar, ring) swaps them for a ring before its children and sets data-variant; color (success, info, warning, danger) colors the fill and sets data-color

Every part takes sx, applied last. For the rest, see Base UI Meter.