Primitives
Spinner
Accessible loading indicator for pending buttons, panels, and inline waits.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Root
Single-slot surface with no nested parts.
SpinnerThe refined source installs this primitive from src/registry/sources/refined/ui/spinner.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/spinner.jsonRaw code
Primary installed primitive source
Spinner slot
src/registry/sources/refined/ui/spinner.tsx
import { Loader2 } from "lucide-react";import type { SpinnerProps } from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// Loader, not expressive motion: NOT gated by motion kill-switch (--duration-*) — spins even under reduced motion.// role="status" + visually-hidden "Loading" give it accessible name; size walks control ramp (xs..lg).const spinnerSize = { xs: "size-3", sm: "size-4", md: "size-5", lg: "size-6",} as const;export function Spinner({ size = "sm", className, ...props }: SpinnerProps) { return ( <span role="status" data-ui="agent" data-slot="spinner" className={cn("inline-flex text-muted-foreground", skinSlot("spinner", {}), className)} {...props} > <Loader2 aria-hidden="true" className={cn("animate-spin", spinnerSize[size])} /> <span className="sr-only">Loading</span> </span> );}