shadcn.io is not affiliated with official shadcn/ui
Progress examples · Sizes
Extra Small Progress for React
A progress bar at 60 percent with a 4px track, for a quiet indicator.
Framework
UI library
A thin progress bar for dense layouts: cards, table rows, a corner of a dashboard. The track is 4px 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-1 makes the track 4px 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
- Small ProgressA progress bar at 60 percent with a 6px
- Default ProgressA progress bar at 60 percent with its
- Large ProgressA progress bar at 60 percent with a 16px
- Extra Large ProgressA progress bar at 60 percent with a 24px
- Complete ProgressA progress bar at 100 percent, filled to
- Empty ProgressA progress bar at 0 percent: an empty