Spinner

Displays an animated loading indicator for pending work, sized and colored to sit inside buttons, inputs, and empty states.

TSX
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export default function SpinnerDemo() {
  return (
    <div className="flex items-center gap-4">
      <Spinner />
      <Button disabled>
        <Spinner />
        Loading…
      </Button>
    </div>
  );
}

Installation

Bash
Package manager:npmpnpmyarnbun
npx shadcn@latest add @sevenui/spinnerpnpm dlx shadcn@latest add @sevenui/spinneryarn dlx shadcn@latest add @sevenui/spinnerbunx --bun shadcn@latest add @sevenui/spinner

Usage

TSX
import { Spinner } from "@/components/ui/spinner";

<Spinner />;

API reference

Spinner

Renders the lucide-react Loader2 icon with a spin animation — accepts all svg props. Size it with className (defaults to the surrounding icon size).