Meter

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/meter

UsageCopy Anchor Link

import {
  Meter,
  MeterIndicator,
  MeterLabel,
  MeterTrack,
  MeterValue,
} from "@/components/ui/meter";

<Meter value={40}>
  <MeterLabel>Storage used</MeterLabel>
  <MeterValue />
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
</Meter>;

Use Meter for a measurement, like disk usage or a password's strength. For a task that moves toward completion, use Progress.

Without a labelCopy Anchor Link

With no children, Meter renders only the track and indicator. Pass aria-label so screen readers can name it.

Formatted valueCopy Anchor Link

Set min and max for a custom range. Pass a function to MeterValue to format what it shows.

API referenceCopy Anchor Link

Meter wraps Base UI Meter. Each part accepts the props of its Base UI counterpart.