Skip to content

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

Free

Multi-line Label Progress for React

A progress bar at 35 percent under Project Setup, the subtitle Installing dependencies, and 35%.

Project Setup and a muted Installing dependencies sit beside 35%. The bar under that block is filled to 35 percent.

Use a title and a subtitle when the bar is one step inside a larger job. A Spinner next to the subtitle is enough if that step has no size. 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 className="w-full max-w-md gap-2" value={35}>
  <div className="flex flex-col">
    <ProgressLabel>Project Setup</ProgressLabel>
    <span className="text-muted-foreground text-xs">
      Installing dependencies
    </span>
  </div>
  <ProgressValue className="font-medium text-foreground" />
</Progress>

FAQ

What is above the bar?

A column with ProgressLabel, Project Setup, over a muted span, Installing dependencies. ProgressValue sits at the end of the same row, and the full-width track wraps below.

Which line names the bar?

ProgressLabel does: the bar is announced as Project Setup.

The subtitle is plain text.

How do I have the subtitle read too?

The demo doesn't connect it. Give the span an id and pass it to Progress as aria-describedby.

What does ProgressValue show?

It has no children, so it prints the value, 35, as a percent.

How do I change the step text as work goes on?

Render the subtitle from your own state, such as Installing dependencies, then Building. The demo's text is fixed.

How do I update the 35?

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

API Reference

Progress

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

All 20 progress examples