Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Progress - Warning
A yellow warning-colored progress bar using custom Tailwind classes for cautionary or moderate state indication at 50 percent
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Yellow means caution—proceed with awareness. This React Progress component uses yellow colors (bg-yellow-500 indicator, bg-yellow-200 track) to indicate warning or moderate states at 50 percent. Built with shadcn/ui Progress and Radix UI primitives with Tailwind overrides, yellow communicates attention-needed states—perfect for slow uploads, moderate resource usage, approaching limits, quota warnings, or any progress where color signals users should monitor but not panic.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Success Progress
Green success state progress
Danger Progress
Red danger state progress
Half Progress
50 percent halfway state
Badge
Warning badges with colors
Warning Alert
Warning notification component
Info Progress
Blue info state progress