Components: Shadcn UI

Spinner

Understand the design system and contribute to it

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

Spinner

className

React.ComponentProps<"svg">

Code

// owner: shadcn, we do not change

import { Loader2Icon } from "lucide-react";

import { cn } from "@/lib/utils";

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  );
}

export { Spinner };

Sonner

Understand the design system and contribute to it

Switch

Understand the design system and contribute to it

Spinner

Component preview

On this page

Command Palette