Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt

Use this file to discover all available pages before exploring further.

The Meter component displays a scalar measurement within a known range, similar to a gauge.

​
Installation

import {
  Meter,
  MeterLabel,
  MeterTrack,
  MeterIndicator,
  MeterValue,
} from "@craftdotui/baseui/components/meter";

​
Usage

<Meter value={75}>
  <MeterLabel>Storage Used</MeterLabel>
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
  <MeterValue />
</Meter>

​
Components

​
Meter (Root)

​
value
number
required
Current value.
​
min
number
default:"0"
Minimum value.
​
max
number
default:"100"
Maximum value.
​
optimum
number
Optimal value.
​
low
number
Low threshold.
​
high
number
High threshold.

​
MeterLabel

Label for the meter.

​
MeterTrack

Background track.

​
MeterIndicator

Filled portion indicating the value.

​
MeterValue

Displays the current value as text.

​
Examples

​
Storage Meter

<Meter value={67}>
  <MeterLabel>Disk Usage</MeterLabel>
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
  <MeterValue />
</Meter>

​
Battery Level

<Meter value={battery} min={0} max={100}>
  <MeterLabel>Battery</MeterLabel>
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
  <MeterValue />
</Meter>

​
With Thresholds

<Meter value={85} min={0} max={100} low={30} high={70} optimum={50}>
  <MeterLabel>Performance Score</MeterLabel>
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
  <MeterValue />
</Meter>
The Meter component differs from Progress - use Meter for measurements (like disk usage), and Progress for task completion.

​
Accessibility

  • Built on @base-ui/react Meter primitive
  • Proper role=“meter” attribute
  • ARIA attributes for value and range
  • Screen reader support for value announcements