Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Progress - Default
Default progress bar with standard height providing optimal visibility and usability balance for general-purpose progress tracking built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Default exists for a reason—it just works most places. This React Progress uses shadcn/ui's default height (typically h-2 or 8px) at 60 percent completion with no custom size classes. Built with Radix UI primitives, default sizing balances visibility with space efficiency—perfect for most use cases, forms, file uploads, onboarding flows, or any progress indicator where you want solid functionality without overthinking sizing decisions or custom height specifications.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Small Progress
h-1.5 compact progress bar
Large Progress
h-4 prominent progress bar
Standard Progress
Basic progress patterns
Progress with Label
Progress with text label
Skeleton
Loading placeholder
Spinner
Loading spinner
Questions you might have
React Progress - Small
Small progress bar with h-1.5 height (6px) balancing visibility and compactness for space-efficient progress tracking built with shadcn/ui
React Progress - Large
Large progress bar with h-4 height (16px) for prominent visibility and improved accessibility in primary progress scenarios built with shadcn/ui