Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Progress examples · Colored

Gradient Progress for React

A progress bar at 65 percent whose fill blends from the info color into the primary color.

Framework
UI library

A progress bar whose fill blends from the theme's info color into primary, for a brand touch on a prominent bar. The track keeps its default color.

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 does the fill become a gradient?

With classes on Progress that reach the fill: **:data-[slot=progress-indicator]:bg-linear-to-r, from-info and to-primary under the same selector. The track is untouched.

How do I change the colors?

Swap from-info and to-primary for other theme colors. Theme colors follow light and dark mode; palette classes like from-blue-500 don't.

Does the gradient flip in right-to-left layouts?

No. bg-linear-to-r always runs left to right. Use bg-linear-to-l under rtl: if the blend should follow the reading direction.

Does the gradient stretch with the value?

The gradient spans the fill, so at 65 it runs across 65 percent of the track and changes as the fill grows.

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 65?

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

All 20 progress examples