Spinner

Installation#

1. Install the dependencies

   npm install cn lucide-react

2. Copy the source into your project

   components/ui/spinner.tsx

   import { cn } from "cn"import { Loader2Icon } from "lucide-react"function Spinner({ className, ...props }: React.ComponentProps<"svg">) {  return (    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />  )}export { Spinner }

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#