shadcn.io is not affiliated with official shadcn/ui
Progress examples · Sizes
Extra Large Progress for React
A progress bar at 60 percent with a 24px track, for a screen where the progress is the focus.
Framework
UI library
The thickest bar here, for a screen that is all about the progress, like a full-screen install. The track is 24px tall.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
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 colors?
The fill is bg-primary and the track bg-muted, from the theme's progress styles. This demo adds no color class.
Related
- Large ProgressA progress bar at 60 percent with a 16px
- Default ProgressA progress bar at 60 percent with its
- Default SpinnerA spinner at its default size and color
- Extra Small ProgressA progress bar at 60 percent with a 4px
- Small ProgressA progress bar at 60 percent with a 6px
- Complete ProgressA progress bar at 100 percent, filled to