Shadcn Spinner for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/spinner.json

npx shadcn@latest add https://kit.dev/r/base/spinner.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/spinner.json

yarn shadcn@latest add https://kit.dev/r/base/spinner.json

bun add lucide-react

npm install lucide-react

pnpm add lucide-react

yarn add lucide-react

import { Loader2Icon } from "lucide-react";
import type React from "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}
    />
  );
};

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 [--radius:1rem]">
  <Item variant="muted">
    <ItemMedia>
      <Spinner />
    </ItemMedia>
    <ItemContent>
      <ItemTitle className="line-clamp-1">Processing payment...</ItemTitle>
    </ItemContent>
    <ItemContent className="flex-none justify-end">
      <span className="text-sm tabular-nums">$100.00</span>
    </ItemContent>
  </Item>
</div>

Demos

Custom

Replace the default spinner icon with any other icon by editing the Spinner component.

Size

Use the size-* utility class to change the size of the spinner.

Button

Add a spinner to a button to indicate a loading state. Place the Spinner before the label with data-icon="inline-start".

Badge

Add a spinner to a badge to indicate a loading state. Place the Spinner before the label with data-icon="inline-start".

Input Group

Use a spinner inside an input group to show a loading or validating state.

Rtl

Right-to-left spinner. See the RTL configuration guide for document direction.

API Reference