Skip to content

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

Free

Extra Large Progress for React

A progress bar at 60 percent with a 24 pixel track, for a screen where the bar is the focus.

A bar at 60 percent on a 24 pixel track. The fill is the default primary color, and no label sits beside it.

Use the tall track when progress is the whole message, such as a full-screen install. A Circular Progress can play that role in a square. In React, Base UI shows only the value you pass.

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 *:data-[slot=progress-track]:h-6"
  value={60}
/>

FAQ

How is the track's height set?

With a class on Progress, since it has no size prop. *:data-[slot=progress-track]:h-6 makes the track 24px tall. The fill is h-full, so it follows.

How tall is it without the class?

This demo sets no height. Each theme style sets its own, from h-0.5 to h-3.

Does the height change the value?

No. value is 60 out of 100 at any height.

Does the height change the colors?

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.

API Reference

Progress

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

All 20 progress examples