Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Progress examples · With Label

With Label Above Progress for React

A progress bar at 45 percent with an Uploading... label above it.

Framework
UI library

A progress bar with a label above it that says what is happening. The label is the component's ProgressLabel, so it also names the bar for screen readers.

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

FAQ

How does the label sit above the bar?

ProgressLabel is a child of Progress, and the track renders after the children at full width, so it wraps onto the next line. gap-2 is the space between them.

What names the bar?

ProgressLabel does: the bar is announced as Uploading....

How do I change the label?

Change the children of ProgressLabel. Its type style comes from the theme's progress styles; add a className to change it.

How do I show the percentage too?

Add a ProgressValue after the label. It prints the value and sits at the end of the row, as With Percentage shows.

How do I update the 45?

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

Does the label change 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.

All 20 progress examples