5Sponsor

Spinner

Animated spinner with 12+ styles

Terminal

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
import { Box } from "ink";

import { Spinner, spinnerNames } from "@/registry/bases/ink/ui/spinner";

export default function SpinnerStyles() {
  return (
    <Box flexDirection="column" gap={1}>
      {spinnerNames.map((name) => (
        <Spinner key={name} label={name} type={name} />
      ))}
    </Box>
  );
}

API Reference

Spinner

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