Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Progress - Info
A blue info-colored progress bar using custom Tailwind classes for informational or neutral state indication at 60 percent
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Blue means information—calm and neutral. This React Progress component uses blue colors (bg-blue-500 indicator, bg-blue-500/20 track) to indicate informational or neutral states at 60 percent. Built with shadcn/ui Progress and Radix UI primitives with Tailwind overrides, blue communicates non-urgent information states—perfect for data syncing, routine processing, background tasks, informational updates, or any progress where color signals normal operations without urgency or concern.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Success Progress
Green success state progress
Warning Progress
Yellow warning state progress
Empty Progress
Default neutral progress
Badge
Info badges with colors
Info Alert
Informational notification
Gradient Progress
Multi-color gradient progress