Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Small
Next: Large

Default

Default progress bar with standard height providing optimal visibility and usability balance for general-purpose progress tracking built with shadcn/ui

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.

Default preview

Scroll to load preview

Installation

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

FAQ

Was this page helpful?

Sign in to leave feedback.

Small

Small progress bar with h-1.5 height (6px) balancing visibility and compactness for space-efficient progress tracking built with shadcn/ui

Large

Large progress bar with h-4 height (16px) for prominent visibility and improved accessibility in primary progress scenarios built with shadcn/ui