Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Progress examples · With Label

With Percentage Progress for React

A progress bar at 65 percent with a label and the percentage above it.

Framework
UI library

A progress bar with a label on the left and the exact percentage on the right, for uploads and installs where people want the number.

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 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.

All 20 progress examples