Meter

The Meter component shows how full something is — storage, rate limits, seat quotas. Coloring shifts automatically from calm green through amber to red as usage approaches the limit, so operators can scan a column of meters and spot pressure instantly.

Meter is distinct from Progress: Progress tracks task completion (role="progressbar"), Meter reports a measurement within a known range (role="meter").

Import

import { Meter } from '@nim-ui/components';

Playground

Edit the values — coloring shifts automatically as usage crosses the thresholds.

Editable

<div className="flex w-full max-w-sm flex-col gap-3">
<Meter value={42} label="Media storage" showValue />
<Meter value={78} label="Webhook queue" showValue />
<Meter value={19} max={20} label="Seats used" showValue />
<Meter value={35} tone="neutral" size="md" label="Archive quota" showValue />
</div>

Automatic threshold coloring

Green below 70%, amber from 70%, red from 90% — thresholds are fractions of max.

42%

78%

95%

Code

<Meter value={42} label="Media storage" showValue />
<Meter value={78} label="Webhook queue" showValue />
<Meter value={95} label="API rate limit" showValue />

Custom range and thresholds

90%

Code

<Meter value={450} max={500} label="API calls this hour" showValue />
<Meter
  value={18}
  max={20}
  thresholds={{ warning: 0.8, critical: 0.95 }}
  label="Seats used"
  showValue
/>

Fixed tones

Opt out of threshold logic when the meter is informational rather than a limit.

35%

88%

Code

<Meter value={35} tone="neutral" label="Archive quota" showValue />
<Meter value={88} tone="success" label="Cache hit rate" showValue />

Sizes

sm is the default for table rows; md suits card summaries.

Code

<Meter value={62} size="sm" label="Small meter" />
<Meter value={62} size="md" label="Medium meter" />

Props

Name	Type	Default	Description
`value*`	`number`	`-`	Current measurement
`max`	`number`	`100`	Upper bound of the range
`label`	`string`	`-`	Accessible name for the meter (required unless aria-labelledby is set)
`thresholds`	`{ warning: number; critical: number }`	`{ warning: 0.7, critical: 0.9 }`	Fractions of max where auto coloring shifts to warning and error
`tone`	`'auto' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	`'auto'`	auto colors by thresholds; fixed tones override
`showValue`	`boolean`	`false`	Show the percentage as trailing text
`size`	`'sm' \| 'md'`	`'sm'`	Track height
`className`	`string`	`-`	Additional CSS classes to apply

Accessibility

Uses role="meter" with aria-valuenow / aria-valuemin / aria-valuemax and a human-readable aria-valuetext ("82% used").
Always provide label (or aria-labelledby) so the measurement has a name.
Threshold colors are reinforced by showValue text — enable it wherever color alone would carry the warning.

Best Practices

Do

Use Meter for capacity, quotas, and limits; Progress for task completion
Tune thresholds to when an operator should actually react
Show showValue in detail panes; omit it in tight table columns

Don't

Animate Meter toward a target — it reports a state, not an activity
Use red/amber tones for informational meters; use tone="neutral"

Progress - Task completion indicator
MetricCard - KPI summary cards
Stat - Single metric display

On this page