GitHub

Meter

PreviousNext

Display a scalar value within a known range.

Loading
Loading...
import {
  Meter,
  MeterIndicator,
  MeterLabel,
  MeterTrack,
  MeterValue,
} from "@/components/ui/meter";
 
export function MeterDemo() {
  return (
    <Meter className="w-full max-w-sm" value={24}>
      <div className="flex items-center justify-between gap-2">
        <MeterLabel>Storage Used</MeterLabel>
        <MeterValue>{(formattedValue) => `${formattedValue}%`}</MeterValue>
      </div>
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/meter"

Usage

import {
  Meter,
  MeterIndicator,
  MeterLabel,
  MeterTrack,
  MeterValue,
} from "@/components/ui/meter";
<Meter value={24}>
  <div className="flex items-center justify-between">
    <MeterLabel>Storage Used</MeterLabel>
    <MeterValue>{(formattedValue) => `${formattedValue}%`}</MeterValue>
  </div>
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
</Meter>