Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Compact doesn't mean invisible—small progress strikes balance. This React Progress uses h-1.5 height (6px) for subtle yet visible indicator at 60 percent completion using shadcn/ui. Built with Radix UI primitives and Tailwind sizing, small bars provide clear feedback—perfect for cards, list items, table rows, sidebar widgets, or any interface where progress needs visibility without dominating layout or consuming excessive vertical real estate while maintaining user awareness.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Extra Small Progress
h-1 minimal progress bar
Default Progress
Standard height progress bar
Large Progress
h-4 prominent progress bar
Standard Progress
Basic progress indicator
Badge
Status badge component
Questions you might have
React Progress - Extra Small
Extra small progress bar with h-1 height (4px) for minimal visual weight and subtle progress indicators built with shadcn/ui
React Progress - Default
Default progress bar with standard height providing optimal visibility and usability balance for general-purpose progress tracking built with shadcn/ui