Core ElementsFree

Progress

A horizontal bar showing completion of a task.

Usage

x

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  Progress,
  ProgressCell,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from "@wunderui/react"

Just the bar, when the value speaks for itself.

x

The percentage next to the bar.

x

The percentage under the bar, with room for context.

x

40%

The value floats above the end of the bar.

40%

x

The value floats below the end of the bar.

x

40%

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

Progress with label and value in a settings card.

Storage

68 GB of 100 GB used

Documents

x

Media

x

Backups

x