Core ElementsFree

Meter

A graphical display of a fixed value within a range, e.g. disk usage.

Usage

Storage used

x

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  Meter,
  MeterIndicator,
  MeterLabel,
  MeterTrack,
  MeterValue,
} from "@wunderui/react"

A quarter step — 25% of the range.

x

A quarter step — 50% of the range.

x

A quarter step — 75% of the range.

x

A full meter.

x

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Three labelled meters for storage in a card.

Workspace storage

68 GB of 100 GB

Documents

x

Media

x

Backups

x