shadcn.io is not affiliated with official shadcn/ui
Shadcn Spinner for React and Tailwind
A spinner for displaying a loading state.
Generating image...
78%
Installation
bunx --bun shadcn@latest add https://kit.dev/r/spinner.jsonpnpm dlx shadcn@latest add https://kit.dev/r/spinner.jsonnpx shadcn@latest add https://kit.dev/r/spinner.jsonyarn shadcn@latest add https://kit.dev/r/spinner.jsonInstall the following dependencies:
bun add lucide-reactpnpm add lucide-reactnpm install lucide-reactyarn add lucide-reactCopy and paste the following code into your project.
"use client";
import { Loader2Icon } from "lucide-react";
import { cn } from "@/lib/utils";
export const Spinner = (props: React.ComponentProps<"svg">) => {
const { "aria-label": ariaLabel, className, ...rest } = props;
return (
<Loader2Icon
aria-label={ariaLabel ?? "Loading"}
className={cn("size-4 animate-spin", className)}
data-slot="spinner"
role="status"
{...rest}
/>
);
};Update the import paths to match your project setup.
Usage
import { Spinner } from "@/components/ui/spinner";<Spinner />Customization
Examples
Size
Use the size-* utility class to change the size of the spinner.
Badge
Add a spinner to a badge to indicate a loading state.
Input Group
Use a spinner in an input group addon to indicate a loading or validating state.
API Reference
Spinner
Use the Spinner component to display a loading indicator. It forwards SVG props and supports className for sizing and styling.
| Prop | Type | Default |
|---|---|---|
className | string | - |
aria-label | string | "Loading" |