Shadcn Spinner
React spinner for buttons, badges, and async waits. Built with TypeScript and Tailwind CSS for Next.js using Base UI — size it with utilities, keep role=status.
A spinner is a spinning icon that means work is in flight. It already has role="status" and aria-label="Loading". Use it in a button, a badge, a field, or an empty state — anywhere the result has no layout yet.
Looking for a neobrutalism version for shadcn?
Same spinner, thicker borders. The NeoBrutalism spinner is the kit if you want that look.
Usage
import { Spinner } from "@/components/ui/spinner"<Spinner />className is the API. Default is size-4. Color follows currentColor.
Composition
It’s a Lucide Loader2Icon. Swap the icon in components/ui/spinner.tsx.
Customization
Replace the Lucide icon in components/ui/spinner.tsx. One file, every loading state.
Size
size-3 in a chip, size-4 in a button, size-8 for a page.
Button
Put <Spinner /> before the label with data-icon="inline-start". Disable the button.
Badge
Same data-icon placement. The word is the status — Syncing, Updating, Processing.
Input Group
Drop it in InputGroupAddon. Disable the field while you validate.
Empty
EmptyMedia variant="icon" holds the spinner while the first load resolves.
RTL
Wrap with DirectionProvider and dir="rtl". The icon still spins. The copy flips.
API
Prop
Type
Spinner is an SVG. role="status" is set for you. Every other SVG attribute passes through.
Notes
Disable the control
A spinner in an enabled button is a second click. Set disabled the moment the request starts.
Use a Skeleton when you know the shape. Use Progress when you have a number.
With other components
Submit while it saves
BadgeSyncing status chip
Input GroupValidating the field
EmptyFirst load wait
ItemPayment row in flight
AttachmentInside the media slot
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Sonner
React toast for save confirms, undo, and async feedback. Built with TypeScript and Tailwind CSS for Next.js using Base UI — success, error, and promise states.
Switch
React switch for dark mode, notifications, and feature flags. Built with TypeScript and Tailwind CSS for Next.js using Base UI — checked or unchecked, sm or default.