Spinner

Feedback

An animated indicator for in-flight loading states.

The Spinner is a small rotating icon built on Loader2Icon from lucide. Use it for inline feedback inside buttons, inputs, or panels.

npx shadcn@latest add spinner

Sizes

Three preset sizes are available out of the box.

Preview

Live

tsx

1<Spinner size="sm" />
2<Spinner />
3<Spinner size="lg" />

Pair a small spinner with supporting text.

Preview

Live

Saving changes...

tsx

1<div className="flex items-center gap-2 text-sm">
2  <Spinner size="sm" />
3  Saving changes...
4</div>

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
size	"sm" \| "default" \| "lg"= "default"	Controls the rendered size of the spinner.
className	string	Custom classes for sizing or coloring the spinner.
strokeWidth	number	Thickness of the spinner stroke. Forwarded to the icon.