Skip to content

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

Free

With Percentage Progress for React

A progress bar at 65 percent with the label Progress on the left and 65% on the right, above the track.

Progress sits at the start of the row and 65% at the end. The bar under that row is filled to 65 percent.

Show the number when people will ask how much is left. Drop it, and keep a Spinner, when the length of the task is unknown. In React, Base UI does not time the upload.

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 className="w-full max-w-md gap-2" value={65}>
  <ProgressLabel className="font-normal text-muted-foreground">
    Progress
  </ProgressLabel>
  <ProgressValue className="font-medium text-foreground" />
</Progress>

FAQ

How do the label and number sit above the bar?

ProgressLabel and ProgressValue are children of Progress. The value style has ml-auto, which pushes the number to the end of the row, and the full-width track wraps below. gap-2 is the space.

Where does 65% come from?

ProgressValue has no children, so it prints the value as a percent. Nothing in the demo writes 65% by hand.

What names the bar?

ProgressLabel does: the bar is announced as Progress.

How do I change the printed text?

Pass format to Progress with Intl.NumberFormat options, or give ProgressValue a function that returns the text.

How do I update the 65?

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

Does this demo recolor the bar?

No. The fill is bg-primary and the track bg-muted, from the theme's progress styles. This demo adds no color class.

API Reference

Progress

Sets value={65}. The rest is on the Progress page.

All 20 progress examples