Spinner

spinnerui

Lightweight loading indicator — circular spinner with three sizes and tone variants. Use inside buttons (replacing the icon when an action is in flight) or as a centered page loader.

Also available for Vue ->

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/spinner.json

$npx shadcn@latest add https://uipkge.dev/r/react/spinner.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/spinner.json

$bunx shadcn@latest add https://uipkge.dev/r/react/spinner.json

Named registry:npx shadcn@latest add @uipkge-react/spinnerInstalls to:components/ui/spinner/

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`size`	`'default''sm''lg''icon'`	`default`	optional

npm dependencies

class-variance-authority lucide-react

Used by

block-ui tree-table

[data-used-by-list] { max-height: none !important; overflow: visible !important; } [data-used-by-toggle] { display: none !important; }

Files installed (3)

components/ui/spinner/Spinner.tsx0.7 kB

import * as React from 'react'
import { Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import { spinnerVariants, type SpinnerVariants } from './spinner.variants'

// Omit Lucide's own `size` (number|string) so the cva variant `size` wins.
export interface SpinnerProps
  extends Omit<React.ComponentPropsWithoutRef<typeof Loader2>, 'ref' | 'size'>, SpinnerVariants {}

const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(({ className, size = 'default', ...props }, ref) => (
  <Loader2
    ref={ref}
    data-uipkge=""
    data-slot="spinner"
    className={cn(spinnerVariants({ size }), className)}
    aria-label="Loading"
    role="status"
    {...props}
  />
))
Spinner.displayName = 'Spinner'

export { Spinner }