Slot UI
3

Meter

PreviousNext

A visual indicator that represents a scalar value within a known range, such as disk usage or battery level.

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

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

Installation

Usage

import {
  Meter,
  MeterLabel,
  MeterTrack,
  MeterIndicator,
  MeterValue,
} from "@/components/ui/meter";
<Meter value={50}>
  <div className="flex items-center justify-between gap-2">
    <MeterLabel>Progress</MeterLabel>
    <MeterValue />
  </div>
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
</Meter>