shadcn.io is not affiliated with official shadcn/ui
Progress examples · Sizes
Small Progress for React
A progress bar at 60 percent with a 6px track, for compact layouts.
Framework
UI library
A slim progress bar for cards, list items and sidebars, visible without taking much room. The track is 6px 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.5 makes the track 6px 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
- Extra Small ProgressA progress bar at 60 percent with a 4px
- Default ProgressA progress bar at 60 percent with its
- Large ProgressA progress bar at 60 percent with a 16px
- Badge with Text (Standard)A default badge with a short label for a
- Extra Large ProgressA progress bar at 60 percent with a 24px
- Complete ProgressA progress bar at 100 percent, filled to