Loading…

Meter

A measurement against a capacity — quota, seats, spend — segmented by category.

Feedback
1 file
No extra npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add meter

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Segmented
Plenty Remaining
Near Capacity
Over Capacity
With Threshold
Token Spend

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Meter>

Prop	Type	Default
`label` (required) Names the meter. Required — an unnamed measurement is unreadable.	`string`	—
`max` (required) The capacity being measured against.	`number`	—
`segments` (required) Parts making up the measurement. One segment is the ordinary case.	`MeterSegment[]`	—
`format` Formats every number that reaches the reader.	`(value: number) => string`	`defaultFormat`
`threshold` Optional marker on the track, for a soft limit or an alert threshold.	`{ value: number; label: string }`	—
`warnAt` Fraction of `max` past which the meter reports strain, between 0 and 1. Presentation only: it never changes the reported value.	`number`	`0.9`
`children` Shown after the bar. Compose `MeterLegend` here, or your own summary.	`React.ReactNode`	—

Plus every attribute of <div> except children.

<MeterLegend>

Plus every attribute of <ul>.

<MeterValue>

Plus every attribute of <p>.

Accessibility

Uses role="meter", not role="progressbar": a meter reports a level with no expectation of reaching the end, and screen readers phrase the two differently. The bar is one meter and the segments inside it are decoration — making each its own widget would put several unlabelled meters in the tab order to describe one quantity. aria-valuetext carries the unit and the capacity, because a bare "4" says nothing about 4 of what. Per-segment detail lives in MeterLegend as text, where it can be read.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

label

Names the meter. Required — an unnamed measurement is unreadable.

string

—

max

The capacity being measured against.

number

—

segments

Parts making up the measurement. One segment is the ordinary case.

MeterSegment[]

—

format

Formats every number that reaches the reader.

(value: number) => string

defaultFormat

threshold

Optional marker on the track, for a soft limit or an alert threshold.

{ value: number; label: string }

—

warnAt

Fraction of max past which the meter reports strain, between 0 and 1. Presentation only: it never changes the reported value.

number

0.9

children

Shown after the bar. Compose MeterLegend here, or your own summary.

React.ReactNode

—