UIPackage
Vue React

Spinner

React feedback
Edit on GitHub

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

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

Or with the named registry: npx shadcn@latest add @uipkge-react/spinner

Examples

Props

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

Dependencies

class-variance-authoritylucide-react

Files (3)

  • components/ui/spinner/Spinner.tsx 0.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 }
  • components/ui/spinner/spinner.variants.ts 0.7 kB 
    import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const spinnerVariants = cva('animate-spin text-muted-foreground', {
  variants: {
    size: {
      default: 'size-6',
      sm: 'size-4',
      lg: 'size-8',
      icon: 'size-4',
    },
  },
  defaultVariants: {
    size: 'default',
  },
})

export type SpinnerVariants = VariantProps<typeof spinnerVariants>
  • components/ui/spinner/index.ts 0.1 kB 
    export { Spinner, type SpinnerProps } from './Spinner'
export { spinnerVariants, type SpinnerVariants } from './spinner.variants'

Raw manifest: https://react.uipkge.dev/r/react/spinner.json