Question 1

What is a shadcn spinner?

Accepted Answer

A shadcn spinner is the rotating circular indicator that means "the app is doing something — wait". You see them inside loading buttons, page-load placeholders, async fetch states, file uploads. The shadcn Spinner ships as a small `<svg>` (Lucide's Loader2 icon by default) styled with `animate-spin` and configurable size / color via Tailwind classes.

Question 2

Are these spinner examples free?

Accepted Answer

Yes, every spinner example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Spinner vs Skeleton vs Progress — which one?

Accepted Answer

Spinner for short, INDETERMINATE actions (saving a form, fetching one record). Skeleton for STRUCTURED loading where users will see content soon (cards, lists, tables). Progress for DETERMINATE actions where you can measure completion (uploads, multi-step forms). Don't show a spinner for a 5-second load — switch to a skeleton so users see the layout while waiting.

Question 4

When should I show a spinner versus letting the action complete instantly?

Accepted Answer

Under 200ms: don't show a spinner — the flash of spinning is more distracting than waiting. 200ms-1s: show a spinner inside the trigger button. 1s+: show a spinner AND disable the trigger so users can't double-fire. 5s+: switch to a skeleton or a Progress bar so users sense "this is going to take a moment". Pair the spinner with a label ("Saving…") for clarity.

Question 5

How do I add a spinner inside a button?

Accepted Answer

Use the button variant. Render `<Loader2 className="animate-spin" />` as the first child of the Button, replacing or alongside the label. While `isPending`, swap the button label to "Saving…" and disable the button. The button variant in this gallery shows the canonical pattern — match the spinner's size to the button's text size for visual harmony.

Question 6

How do I show a spinner inline with text?

Accepted Answer

Use the inline variant. Render the spinner inside a `<span>` with `inline-flex items-center gap-2` so it sits alongside the text baseline. Use `size-3` or `size-4` for inline spinners — anything larger dominates the text. Common in async loading states next to status text ("Connecting…", "Verifying…", "Reloading…").

Question 7

How do I size or color the spinner?

Accepted Answer

Pass className overrides — `size-4` (16px) for inline / button spinners, `size-6` (24px) for standalone, `size-12` (48px) for hero / page-load spinners. Color via `text-primary` / `text-muted-foreground` / brand colors. The `animate-spin` keyframe runs at a fixed speed; for slower / faster spinners, override `animation-duration` directly.

Question 8

How do I install a spinner example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/spinner/…`, plus the shadcn/ui Spinner primitive (and the underlying Loader2 icon from Lucide React) if you don't already have them.

Question 9

How do I disable button + show spinner during async submit?

Accepted Answer

Track `isPending` state via `useTransition` or `useFormStatus` (Server Actions) or your data fetching library. Pass it to the Button's `disabled` prop AND conditionally render the spinner: ``. The disabled + spinner combo is the canonical async submit pattern.

Question 10

How do I respect prefers-reduced-motion?

Accepted Answer

Tailwind's `animate-spin` already respects `prefers-reduced-motion: reduce` — the spinner stops rotating for users who've enabled reduced motion. Pair with an `aria-busy="true"` on the parent so screen readers still announce the loading state without the visual rotation. The chrome stays accessible; only the visual flourish pauses.

Question 11

Which libraries do spinner examples depend on?

Accepted Answer

shadcn/ui Spinner (a styled wrapper for Lucide's Loader2 icon, generated into your project), Lucide React (the icon library), Tailwind CSS. React 19 baseline. No state library — the spinner is pure render; loading state lives in the parent's useState / useTransition / data layer.

Question 12

Are spinner examples accessible for screen reader users?

Accepted Answer

The spinner is purely visual — wrap the parent in `

` so screen readers announce the loading state. For button spinners, also pass `aria-label="Saving"` to the Button so SR users hear the action state instead of just "button". Don't put the spinner itself inside `aria-live` — the announcement should describe what's happening, not narrate a visual symbol.

Question 13

Can I use these spinner examples with React Server Components?

Accepted Answer

Yes — spinners are pure render. Most useful inside a Suspense fallback for streaming Server Components: `}>`. The spinner renders in the initial HTML stream; the real content streams in when ready. Zero JavaScript needed for the swap.

React Spinner Examples for shadcn/ui

Browse every spinner example

Frequently Asked Questions