Components

Meter

Meter on Base UI Meter: same hairline track and ink fill as Progress, for a value in a known range.

Storage used

Install

bash

npx shadcn add @eloquent/meter

tsx

import { Meter } from "@/components/ui/meter";

<Meter value={62} label="Storage used" />

Low

Mid

Near full

Score out of 5

State	Treatment
Low, mid, high	Ink fill length only; no colour change
`min` / `max`	Range other than 0 to 100
`showValue={false}`	Value text hidden; the name remains

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Dung lượng đã dùng

As Progress: 1px ink outline track, square ink fill, value text in Barlow Condensed. No colour bands for low or high; the number states it.