Spinner color variants
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A row of 5 spinners at 16px, tinted blue, green, red, yellow and purple through text color classes
When to use
- Pending states inside buttons, status badges and search fields while a request runs
- Loading views for a card or an empty panel, including blurred covers over content being refreshed
- Inline notes such as checking, syncing or reconnecting, led by a small tinted spinner or bouncing dots
When not to use
- Tints drawn from the theme's success and warning tokens beside status words: use the Spinner Inline Text example
- Content of a known layout, held as muted placeholder shapes until it arrives: use the Skeleton component
- A wait where the share of work done is known, such as an upload percent: use the Progress component
- A save control that tracks its own pending and done states after a click: use the Button component
Agent notes
- The 5 tints are fixed palette classes such as
text-blue-500that ignore your theme; swap in your own color tokens - No example holds a pending flag and
disabledis hardcoded where it appears; show the indicator and lock controls from your own request state
https://reui.io/components/spinner/c-spinner-12.mdget_example("c-spinner-12")npx shadcn@latest add @reui/c-spinner-12Shadcn Components in Spinner Color Variants
About Shadcn Spinner Color Variants
Spinner color variants. Built with the Spinner component. A free, open source shadcn spinner example you can install with npx shadcn@latest add @reui/c-spinner-12 and edit as your own code.
What You Can Build With Shadcn Spinner Color Variants
- Composes Spinner, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-spinner-12
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Spinner Examples
- Basic Basic spinner.
- In Buttons Spinners in buttons.
- In Badges Spinners in badges.
- In Input Group Spinner in input group.
- In Empty State Spinner in empty state.
- Pending Buttons Button loading states
- Overlay With Caption Overlay loading spinner
- Full Page Full page loading state
- Inline Text Inline loading text with spinner
- Loading Dots Animated loading dots
- Card Overlay Spinner overlay on card
Related Shadcn Component Categories
Open-source shadcn stepper components for multi-step forms, checkout flows, and onboarding.
Open-source shadcn switch components for settings toggles, preferences, and binary choices.
Open-source shadcn table components for admin tables, data display, and responsive lists.
Open-source shadcn tabs components for segmented content, settings views, and dashboard sections.
Open-source shadcn textarea components for comments, long-form input, and support tickets.
Open-source shadcn time picker components for booking forms, opening hours, and shift scheduling.
Frequently Asked Questions
When should I use Shadcn Spinner Color Variants?
Use it for a row of 5 spinners at 16px, tinted blue, green, red, yellow and purple through text color classes.
Shadcn Spinner as a whole fits:
- Pending states inside buttons, status badges and search fields while a request runs
- Loading views for a card or an empty panel, including blurred covers over content being refreshed
- Inline notes such as checking, syncing or reconnecting, led by a small tinted spinner or bouncing dots
For tints drawn from the theme's success and warning tokens beside status words, use the Spinner Inline Text example. For content of a known layout, held as muted placeholder shapes until it arrives, use the Skeleton component. For a wait where the share of work done is known, such as an upload percent, use the Progress component. For a save control that tracks its own pending and done states after a click, use the Button component.
How do I install Shadcn Spinner Color Variants?
Is Shadcn Spinner Color Variants free to use?
Which components does Shadcn Spinner Color Variants use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.