Meter

A meter displays a scalar measurement within a known range, with optional thresholds that color the indicator by status. Use it for static readings like disk usage, battery level, or a score; for the changing completion of a task, use Progress instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/meter

Usage

import {
  MeterRoot,
  MeterTrack,
  MeterIndicator,
  MeterLabel,
  MeterValue,
} from "@/components/ui/cubby-ui/meter";

<MeterRoot>
  <MeterLabel />
  <MeterValue />
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
</MeterRoot>

Composition

MeterRoot
├── MeterLabel
├── MeterValue
└── MeterTrack
    └── MeterIndicator

Examples

Different Sizes

Use size to set the track height and text size.

With Labels

Add MeterLabel and MeterValue to caption the meter.

With Min and Max

Set min and max to scale the value to a custom range.

With Optimum Range

Set optimumMin and optimumMax to mark the ideal range with tick markers.

With Thresholds

Set low and high to color the indicator by status as the value crosses each threshold.

With Segments

Set segments on MeterTrack to divide the track into discrete blocks.

API Reference

The Meter component is built on top of Base UI's Meter. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Meter documentation.

Custom Props

MeterRoot

MeterTrack