Shadcn.io is not affiliated with official shadcn/ui
Warning
A yellow warning-colored progress bar using custom Tailwind classes for cautionary or moderate state indication at 50 percent
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.
Warning preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.