Skip to content

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

Free

Default Progress for React

A progress bar at 60 percent at the theme's own track height, with the default primary fill.

A bar at 60 percent. The track uses the theme's own height, and the fill is the default primary color. No label is shown.

Start here, then change height or color only when this bar is too quiet or too loud. A Circular Progress fits a square space better than a long track. In React, Base UI does not move the bar on its own.

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
  aria-label="Upload progress"
  className="w-full max-w-md"
  value={60}
/>

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.

API Reference

Progress

Sets aria-label="Upload progress" and value={60}. The rest is on the Progress page.

All 20 progress examples