5Sponsor

Spinner

Animated spinner with 12+ styles

Terminal
Loading components...Building registry...

Installation

pnpm dlx shadcn@latest add @termcn/spinner

Usage

import { Spinner } from "@/components/ui/spinner";
<Spinner type="dots" label="Loading components" />

Examples

Spinner Styles

Multiple built-in animation styles.

Terminal
spinner-styles
Loading preview...
/* @jsxImportSource @opentui/react */
import { Spinner, spinnerNames } from "@/registry/bases/opentui/ui/spinner";

export default function OpenTuiSpinnerStyles() {
  return (
    <>
      {spinnerNames.map((name) => (
        <Spinner key={name} label={name} type={name} />
      ))}
    </>
  );
}

API Reference

Spinner

PropTypeDefault
typeSpinnerName from cli-spinners"dots"
labelstringundefined
colorstringundefined
fpsnumber — used only with custom frames12
framesstring[]undefined