Spinner
An indicator that can be used to show a loading state.
Made by shadcnPowered by
Installation
When to use
Use this decision tree to determine when to use the Spinner component:
Usage
import { Spinner } from "@/components/ui/spinner"<Spinner />Anatomy
The Spinner component is a simple animated loading indicator. Here's how it's structured:
<Spinner /> {/* Animated icon with spin animation */}Layout Structure
- Spinner: Single SVG icon with
animate-spinanimation applied - Size controlled via className (
size-4,size-6, etc.) - Color controlled via text color utilities (
text-primary, etc.)
Typical Usage Patterns
// Standalone
<Spinner />
// Custom size
<Spinner className="size-8" />
// Custom color
<Spinner className="text-primary" />
// In button
<Button disabled>
<Spinner />
Loading...
</Button>
// In badge
<Badge>
<Spinner className="size-3" />
Processing
</Badge>
// In input group
<InputGroup>
<InputGroupInput placeholder="Searching..." />
<InputGroupAddon>
<Spinner />
</InputGroupAddon>
</InputGroup>
// In empty state
<Empty>
<EmptyHeader>
<EmptyMedia>
<Spinner className="size-8" />
</EmptyMedia>
<EmptyTitle>Loading data</EmptyTitle>
</EmptyHeader>
</Empty>
// In item
<Item>
<ItemMedia>
<Spinner />
</ItemMedia>
<ItemContent>
<ItemTitle>Processing...</ItemTitle>
</ItemContent>
</Item>Customization
You can replace the default spinner icon with any other icon by editing the Spinner component.
import { LoaderIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
return (
<LoaderIcon
role="status"
aria-label="Loading"
className={cn("size-4 animate-spin", className)}
{...props}
/>
)
}
export function SpinnerCustom() {
return (
<div className="flex items-center gap-4">
<Spinner />
</div>
)
}
import { LoaderIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
return (
<LoaderIcon
role="status"
aria-label="Loading"
className={cn("size-4 animate-spin", className)}
{...props}
/>
)
}
export { Spinner }Examples
Size
Use the size-* utility class to change the size of the spinner.
Color
Use the text- utility class to change the color of the spinner.
Button
Add a spinner to a button to indicate a loading state. The <Button /> will handle the spacing between the spinner and the text.
Badge
You can also use a spinner inside a badge.
Input Group
Input Group can have spinners inside <InputGroupAddon>.
Empty
Item
Use the spinner inside <ItemMedia> to indicate a loading state.
API Reference
Spinner
Use the Spinner component to display a spinner.
| Prop | Type | Default |
|---|---|---|
className | string | `` |
<Spinner />Props
Credits
- We take our inspiration from Shadcn UI for the
spinnercomponent and style.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109