Beta

Meter

A graphical display of a numeric value within a range.

DocsAPI Reference

Installation


pnpm dlx shadcn@latest add @lumi-ui/meter

Basic Usage

import { Meter } from "@/components/ui/meter";

export default function ExampleMeter() {
  return (
    <Meter value={75}>
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  );
}

Anatomy

<Meter>
  <MeterLabel />
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
  <MeterValue />
</Meter>

Recipes

With Label and Value