Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Subtle progress belongs in the background—not demanding attention. This React Progress uses h-1 height (4px) for ultra-minimal visual footprint at 60 percent completion using shadcn/ui. Built with Radix UI primitives and Tailwind sizing, extra small bars stay unobtrusive—perfect for compact cards, dense dashboards, inline indicators, mobile interfaces, or any scenario where progress tracking needs presence without prominence or consuming vertical space unnecessarily.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Small Progress
h-1.5 small progress bar
Default Progress
Standard height progress bar
Large Progress
h-4 large progress bar
Standard Progress
Basic progress indicator
Skeleton
Loading skeleton placeholder
Questions you might have
React Progress - Gradient
A gradient-colored progress bar using Tailwind gradient utilities for modern multi-color visual effect at 65 percent
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