Primitive · CLI

Meter

Read-only meter gauge with soft-rect value fill tween.

Preview

npx shadcn@latest add @atroui/meter

Storage

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/meter

Source lands in your repo. Installation · Registry

Usage

Meters report a bounded level (capacity, score), not task progress. Value changes tween with fillTween; no spring.

tsx

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

<Meter value={72}>
  <div className="flex items-center justify-between gap-2">
    <MeterLabel>Storage</MeterLabel>
    <MeterValue />
  </div>
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
</Meter>

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

<Meter value={72}>
  <div className="flex items-center justify-between gap-2">
    <MeterLabel>Storage</MeterLabel>
    <MeterValue />
  </div>
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
</Meter>