Meter

A graphical display of a numeric value within a range.

Storage usage

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

export default function Particle() {
  return (
    <Meter value={75}>
      <div className="flex items-center justify-between gap-2">
        <MeterLabel>Storage usage</MeterLabel>
        <MeterValue />
      </div>
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  );
}

Installation


pnpm dlx shadcn@latest add @coss/meter

Usage

import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"

<Meter value={40}>
  <MeterLabel>Progress</MeterLabel>
  <MeterValue />
</Meter>

API Reference

Meter

Root component. Styled wrapper for Meter.Root from Base UI with flex column layout.

MeterTrack

Track container for the meter indicator. Styled wrapper for Meter.Track from Base UI.

MeterIndicator

Visual indicator showing the current value. Styled wrapper for Meter.Indicator from Base UI.

MeterLabel

Label text for the meter. Styled wrapper for Meter.Label from Base UI.

MeterValue

Displays the current value. Styled wrapper for Meter.Value from Base UI.

Examples

Without Label and Value

With Formatted Value

Rating

"use client";

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

export default function Particle() {
  return (
    <Meter max={5} value={3}>
      <div className="flex items-center justify-between gap-2">
        <MeterLabel>Rating</MeterLabel>
        <MeterValue>{(_formatted, value) => `${value} / 5`}</MeterValue>
      </div>
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  );
}

With Range

Bandwidth (Mbps)

"use client";

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

export default function Particle() {
  return (
    <Meter max={1000} min={500} value={700}>
      <div className="flex items-center justify-between gap-2">
        <MeterLabel>Bandwidth (Mbps)</MeterLabel>
        <MeterValue>{(_formatted, value) => value}</MeterValue>
      </div>
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  );
}

On This Page

Installation Usage API Reference Meter MeterTrack MeterIndicator MeterLabel MeterValue Examples Without Label and Value With Formatted Value With Range