Meter

A graphical display of a numeric value within a range.

Storage Used

CPU Usage

Memory Usage

import {
  Meter,
  MeterLabel,
  MeterTrack,
  MeterIndicator,
  MeterValue,
} from "@/components/ui/meter/meter";
import styles from "./meter-demo.module.css";

export default function MeterDemo() {
  return (
    <div className={styles.container}>
      <Meter value={24} max={100}>
        <div className={styles.meterHeader}>
          <MeterLabel>Storage Used</MeterLabel>
          <MeterValue />
        </div>
        <MeterTrack>
          <MeterIndicator />
        </MeterTrack>
      </Meter>

      <Meter value={67} max={100}>
        <div className={styles.meterHeader}>
          <MeterLabel>CPU Usage</MeterLabel>
          <MeterValue />
        </div>
        <MeterTrack>
          <MeterIndicator />
        </MeterTrack>
      </Meter>

      <Meter value={92} max={100}>
        <div className={styles.meterHeader}>
          <MeterLabel>Memory Usage</MeterLabel>
          <MeterValue />
        </div>
        <MeterTrack>
          <MeterIndicator />
        </MeterTrack>
      </Meter>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/meter.json

Anatomy

anatomy

import {
Meter,
MeterLabel,
MeterTrack,
MeterIndicator,
MeterValue,
} from '../ui/meter'

<Meter value={24} max={100}>
  <MeterLabel>Storage Used</MeterLabel>
  <MeterValue />
  <MeterTrack>
      <MeterIndicator />
  </MeterTrack>
</Meter>