Components
Loading preview...
A lightweight animated loading spinner built on lucide-react's Loader2Icon. Fully accessible with aria-label and role=status, accepts all SVG props, and supports size customization via className.
@msasaadarsalan
npx shadcn@latest add https://21st.dev/r/msasaadarsalan/spinnerimport { Loader2Icon } from "lucide-react";
function cn(...classes: (string | undefined | null | false)[]): string {
return classes.filter(Boolean).join(" ");
}
function Spinner({
className,
...props
}: React.ComponentProps<typeof Loader2Icon>) {
return (
<Loader2Icon
aria-label="Loading"
className={cn("animate-spin", className)}
role="status"
{...props}
/>
);
}
export default function SpinnerDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
<Spinner className="w-10 h-10 text-foreground" />
</div>
);
}