eo-n/ui

Meter

Visualizes progress, a measurement, or value within a known range.

Battery Level
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter";
 
export function MeterDemo() {
  return (
    <Meter value={34} className="max-w-xs">
      <MeterLabel>Battery Level</MeterLabel>
      <MeterValue />
    </Meter>
  );
}

Installation

npx shadcn@latest add @eo-n/meter

Usage

Import all parts and piece them together.

import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter";
<Meter value={34}>
  <MeterLabel>Battery Level</MeterLabel>
  <MeterValue />
</Meter>

On this page