npm
Controls

Meter

Labelled progress with a shimmering fill.

<Meter value={68} max={100} label="LEVEL 12" valueText="68%" />
<Meter tone="gold" value={12} max={20} label="GOLD RUSH" valueText="12/20" />
<Meter tone="accent" value={15} max={45} label="⏳ HURRY!" valueText="0:15" />

A semantic meter with explicit host-owned bounds, label, and display text. The package clamps the visual fill without changing the value owned by your application.