Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Primary Color Spinner
A React spinner with primary brand color for branded loading states and emphasized operations built with shadcn/ui Spinner
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Generic gray spinners lack brand personality. This React pattern shows Spinner with text-primary className—applies your brand color to loading indicator. Built with shadcn/ui Spinner inheriting from theme's primary color variable, it's perfect for splash screens, branded loading overlays, marketing pages, first-time user experiences, primary call-to-action operations, or any loading state where brand identity matters and generic gray spinner feels disconnected from your visual identity.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Spinner
Standard foreground color spinner
Muted Spinner
Subtle muted-foreground spinner
Loading Button
Button with primary spinner
Branded Loading Screen
Full-screen branded loading
Primary Button
Button with primary styling
Primary Badge
Badge with primary color
Questions you might have
React Large Spinner
A prominent React spinner with size-8 (32px) for full-screen loading and high-visibility states built with shadcn/ui Spinner
React Muted Spinner
A subtle React spinner with muted-foreground color for background operations and de-emphasized loading states built with shadcn/ui Spinner