Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Progress - Extra Large
Extra large progress bar with h-6 height (24px) for maximum prominence and accessibility in hero progress scenarios built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Maximum visibility for maximum importance—extra large makes a statement. This React Progress uses h-6 height (24px) for commanding visual presence at 60 percent completion using shadcn/ui. Built with Radix UI primitives and Tailwind sizing, extra large bars dominate focus—perfect for full-screen uploads, installation wizards, critical onboarding, hero sections, or any scenario where progress is the singular focus requiring impossible-to-miss prominence and maximum accessibility for all users.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Large Progress
h-4 prominent progress bar
Default Progress
Standard height progress bar
Standard Progress
Basic progress patterns
Progress with Label
Progress with text and percentage
Skeleton
Loading skeleton
Spinner
Loading spinner
Questions you might have
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
React Progress - With Percentage
A progress bar with percentage label displaying current completion as numeric value at 65 percent with text label