IInbox
Components

Usage meter

Used against a total, with a track that turns before you run out.

Agent credits1,240 of 2,000
Seats17 of 20
Storage49 of 50 GB

Installation

npx shadcn@latest add https://ui.whoisroktim.lol/r/meter.json

Show the remainder, not the percentage

"1,240 of 2,000" beats "62%", because what people act on is what is left, and a percentage makes them do the arithmetic to find it.

The track turns at the thresholds

Brand up to 80%, warning to 95%, error beyond. A meter that stays one colour until it is full has told you nothing until it is too late to act — which is the entire job of a usage meter.

PropTypeDefaultDescription
used / totalnumberFormatted with thousands separators.
unitstringAppended to the total — GB, seats, credits.