Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Complete Progress for React

A progress bar at 100 percent, filled to the end of the track, with no empty stretch left.

A single bar filled all the way, at 100 percent. The track has no empty stretch left, and there is no visible label.

Use a full bar when the task is finished and the track should stay on screen. A Status can replace it once you no longer need the meter. In React, Base UI shows only the value you pass.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Progress anatomy: root, label, value, track, indicator

Usage

<Progress
  aria-label="Upload progress"
  className="w-full max-w-md"
  value={100}
/>

FAQ

What does the bar show?

value is 100 on the default range of 0 to 100, so the fill covers the whole track. w-full max-w-md sets its width.

Does the bar turn green at 100?

No. The fill stays bg-primary at every value. To show success, add a color class, as Success does, or replace the bar with a message.

What is the accessible name?

aria-label on Progress, Upload progress. The demo has no visible label, so without it a screen reader would announce a bar with no name.

How do I get the bar to 100?

Change value as the work advances. This demo passes a fixed 100.

What if my maximum isn't 100?

Pass value in the same units as the maximum. Set max on Progress: 5 steps of 5 is max 5 and value 5.

What should happen after 100?

That's up to you: this demo only draws the bar. Say what finished in text, or move people on, so they aren't left looking at a full bar.

API Reference

Progress

Sets aria-label="Upload progress" and value={100}. The rest is on the Progress page.

All 20 progress examples