Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Progress examples · Sizes

Default Progress for React

A progress bar at 60 percent with its track at the default height.

Framework
UI library

A progress bar at the theme's own height, for most places a bar goes. The size examples change only the track's height; this one shows the starting point.

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 tall is the track?

This demo sets no height. Each theme style sets its own, from h-0.5 to h-3. The other size examples set it with a class on Progress.

What does the bar show?

value is 60 on the default range of 0 to 100. w-full max-w-md sets its width.

Which colors does it use?

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

What is the accessible name?

aria-label on Progress, Upload progress. The demo has no visible label, so without it a screen reader would announce a bar with no name.

How do I update the 60?

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

How wide is it?

w-full max-w-md: as wide as its container, up to 28rem. The track fills that width.

All 20 progress examples