Display

Meter

A labeled readout of a value within a range — storage, quota, capacity. Pine fill, honest number.

Storage used

Weekly focus

Show code

"use client";

import {
  Meter,
  MeterLabel,
  MeterTrack,
  MeterValue,
} from "@/registry/lilt/ui/meter";

export default function MeterDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Meter format={{ style: "unit", unit: "gigabyte" }} value={64}>
        <div className="flex items-baseline justify-between gap-3">
          <MeterLabel>Storage used</MeterLabel>
          <MeterValue />
        </div>
        <MeterTrack />
      </Meter>
      <Meter value={80}>
        <div className="flex items-baseline justify-between gap-3">
          <MeterLabel>Weekly focus</MeterLabel>
          <MeterValue />
        </div>
        <MeterTrack />
      </Meter>
    </div>
  );
}

Installation

npx shadcn@latest add @lilt/meter

Accessibility

Announced as a meter named by its label, with the current value exposed via aria-valuenow and formatted text.
Unlike Progress there is no indeterminate state — a meter always reports a real value within its range.