Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Default Spinner
A standalone React spinner component showing default size and color for basic loading states built with shadcn/ui Spinner
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Simple loading states don't need complexity. This React pattern shows the basic Spinner component with default styling—no customization, just clean loading indication. Built with shadcn/ui Spinner at default size-4 (16px) and foreground color, it's perfect for content placeholders, blocking operations, page-level loading, initial data fetch, or any loading state where standard appearance works and customization adds unnecessary complexity keeping implementation simple.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Small Spinner
Smaller size-3 spinner for subtle loading
Large Spinner
Larger size-8 spinner for prominent loading
Primary Color Spinner
Spinner with primary brand color
Inline with Text
Spinner with text context
Loading Button
Button with loading spinner
Spinner in Card
Spinner in card context
Questions you might have
React Spinner in List Item
A React spinner integrated into list item showing loading state with title and description using shadcn/ui Item and muted-foreground styling
React Small Spinner
A compact React spinner with size-3 (12px) for subtle loading indicators and inline status built with shadcn/ui Spinner