kagadmodyaa

Spinner

KbdInput OTP

An accessible loading indicator that rotates.

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

export default function SpinnerDemo() {
  return (
    <div className="flex items-center gap-6 text-muted-foreground">
      <Spinner className="size-4" />
      <Spinner className="size-6" />
      <Spinner className="size-8" />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/spinner.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Spinner imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<Spinner />
<Spinner className="size-6 text-muted-foreground" aria-label="Uploading" />

Examples

In a button

import { Spinner } from '@/components/ui/spinner'
import { Button } from '@/components/ui/button'

export default function SpinnerButton() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button disabled>
        <Spinner aria-label="Saving" />
        Saving…
      </Button>
      <Button variant="outline" disabled>
        <Spinner aria-label="Loading" />
        Please wait
      </Button>
    </div>
  )
}

API Reference

NameTypeDefaultDescription
classNamestring'size-4'Set the size with size-* and the colour with text-*; it draws in currentColor.
aria-labelstring'Loading'What screen readers announce. The spinner has role="status".
Reduced motion——For visitors who prefer reduced motion the rotation runs three times slower rather than stopping.