Shadcn.io is not affiliated with official shadcn/ui
Primary Color Spinner
A React spinner with primary brand color for branded loading states and emphasized operations built with shadcn/ui Spinner
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.
Primary Color Spinner preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.