Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Progress examples · With Label

With Label Below Progress for React

A progress bar at 80 percent with an encouraging Almost there! message below it.

Framework
UI library

A progress bar with a short message under it, here a nudge near the end of a profile setup. The message is plain text beside the bar; the bar's name is its aria-label.

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

Why is the message outside Progress?

Children of Progress render before the track, so anything inside it sits above the bar. To put text below, the demo wraps Progress and a p in a column with gap-2.

Is Almost there! the bar's name?

No. The message is ordinary text that follows the bar. The name is aria-label on Progress, Profile completion.

How do I tie the message to the bar?

The demo leaves them separate. Give the p an id and pass it to Progress as aria-describedby, so a screen reader reads it with the bar.

How do I update the 80?

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

How do I change the message as the bar fills?

Pick the text from the value, such as Getting started under 30 and Almost there! above 75. The demo's message is fixed.

Does the message 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