Meter

Preview

Storage Usage

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>

Examples

Different Sizes

Display meters in various sizes.

Small

Medium

Large

With Labels

Add descriptive labels to meters.

Product Rating

Memory Usage

With Min and Max

Define custom minimum and maximum values.

Response Time

Rating

With Optimum Range

Highlight the optimal value range.

Blood Sugar

Normal range: 4.5-5.5 mmol/L

With Thresholds

Set thresholds for different value ranges.

Battery Level (higher is better)

Battery

CPU Temperature (lower is better)

CPU Temp

Body Temperature (middle range is safe)

Body Temp

With Segments

Display segmented meter visualization.

Setup Progress

Segmented with thresholds

Battery Level

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

Prop

Type

Default

MeterTrack

Prop

Type

Default

On this page