Meter

A meter component for displaying a scalar value within a known range. Supports low, high, and optimum thresholds for contextual coloring.

Basic

Use the low, high, and optimum props to define value ranges that affect the meter appearance.

Prop	Type	Default	Description
`value`	`number`	—	The current meter value.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`low`	`number`	—	The upper bound of the low range.
`high`	`number`	—	The lower bound of the high range.
`optimum`	`number`	—	The optimal value within the range.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the meter fill.
`label`	`string`	—	Label displayed above the meter.
`showValue`	`boolean`	`false`	Displays the current value next to the label.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

value

number

The current meter value.

min0

number

Minimum value.

max100

number

Maximum value.

low

number

The upper bound of the low range.

high

number

The lower bound of the high range.

optimum

number

The optimal value within the range.

color"blue"

Accent color for the meter fill.

label

string

Label displayed above the meter.

showValuefalse

boolean

Displays the current value next to the label.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}