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 {
Item,
ItemContent,
ItemMedia,
ItemTitle,
} from "@/components/ui/item";
import { Spinner } from "@/components/ui/spinner";<div className="flex w-full max-w-xs flex-col gap-4">
<Item className="border- rounded-full" variant="muted">
<ItemMedia>
<Spinner />
</ItemMedia>
<ItemContent>
<ItemTitle className="line-clamp-1">Generating image...</ItemTitle>
</ItemContent>
<ItemContent className="flex-none justify-end">
<span className="text-sm tabular-nums">78%</span>
</ItemContent>
</Item>
</div>Demos
Badge
Input Group
Size
API Reference
Spinner
PropType
AttributeType