Spinner

A simple loading spinner component using Lucide's Loader2 icon with spin animation.

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

export function SpinnerDemo() {
  return (
    <Card className="flex items-center justify-center p-8">
      <Spinner size={32} />
    </Card>
  )
}

Installation


pnpm dlx shadcn@latest add https://ui.nowts.app/r/spinner.json

Usage

import { Spinner } from "@/components/ui/spinner"
 
export function MyComponent() {
  return <Spinner />
}

With custom size

<Spinner size={24} />
<Spinner size={32} />
<Spinner size={48} />

With custom color

<Spinner className="text-blue-500" />
<Spinner className="text-green-500" />

Props

The Spinner component accepts all props from Lucide's icon components:

Prop	Type	Default	Description
size	number	24	Icon size in pixels
className	string	-	Additional CSS classes
...iconProps	LucideProps	-	All Lucide icon props

Submit Button Next Top Loader

On This Page

Installation Install dependencies Add the component Usage With custom size With custom color Props

Build Your SaaS in Days, Not Months

NOW.TS is the Next.js 15 boilerplate with everything you need to launch your SaaS—auth, payments, database, and AI-ready infrastructure.