Spinner

Compact ring, dots, and matrix indicators for inline copy, buttons, and loading surfaces.

Installation

npx shadcn@latest add @iconiq/spinner

File Structure

Usage

"use client";

import Spinner from "@/components/ui/spinner";

export function SpinnerPreview() {
  return (
    <p className="flex max-w-xl flex-wrap items-center justify-center gap-x-1.5 gap-y-2.5 text-center text-[13px] leading-relaxed text-neutral-600 dark:text-neutral-300">
      <span className="text-neutral-500 dark:text-neutral-400">
        Every stall deserves a kinder signal —
      </span>
      <Spinner className="shrink-0" decorative size="sm" />
      <span className="font-medium text-sky-600 dark:text-sky-400">
        one tireless lap
      </span>
      <span className="text-neutral-400 dark:text-neutral-500">,</span>
      <span>or</span>
      <Spinner className="shrink-0" decorative variant="dots" />
      <span className="font-medium text-violet-600 dark:text-violet-400">
        three staggered taps
      </span>
      <span className="text-neutral-500 dark:text-neutral-400">
        — calm motion that still reads.
      </span>
    </p>
  );
}

Props

Props
Description

Spinner

variant

Chooses between the rotating ring, three bouncing dots, or a square dot-matrix sweep.

Type "ring" | "dots" | "matrix"·Default ring

size

Scales the spinner footprint and ring border thickness together.

Type "sm" | "md" | "lg"·Default md

decorative

When true, hides the spinner from assistive tech so a parent can announce loading once.

Type boolean·Default false

className

Merged onto the root span so you can fine-tune color, spacing, or layout with Tailwind utilities.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Every stall deserves a kinder signal —calm motion that still reads.