shadcn.io is not affiliated with official shadcn/ui
Progress examples · Sizes
Large Progress for React
A progress bar at 60 percent with a 16px track, for progress that should stand out.
Framework
UI library
A thick progress bar for when progress is the main thing on screen: an upload, a setup step, an install. The track is 16px 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-4 makes the track 16px 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
- Default ProgressA progress bar at 60 percent with its
- Extra Large ProgressA progress bar at 60 percent with a 24px
- Small ProgressA progress bar at 60 percent with a 6px
- Extra Small ProgressA progress bar at 60 percent with a 4px
- Complete ProgressA progress bar at 100 percent, filled to
- Empty ProgressA progress bar at 0 percent: an empty