Utility
AI
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/spinner.json
Usage
import { Spinner } from "@/components/ui/spinner";<Spinner type="dots" label="Loading components" />Examples
With Label
A spinner with a descriptive label.
Terminal
import { Spinner } from "@/registry/ui/spinner";
export default function SpinnerLabel() {
return <Spinner label="Installing dependencies..." />;
}
Spinner Styles
Multiple built-in animation styles.
Terminal
import { Box } from "ink";
import { Spinner } from "@/registry/ui/spinner";
export default function SpinnerStyles() {
return (
<Box flexDirection="column" gap={1}>
<Spinner type="dots" label="dots" />
<Spinner type="line" label="line" />
<Spinner type="star" label="star" />
<Spinner type="bounce" label="bounce" />
<Spinner type="arc" label="arc" />
<Spinner type="arrow" label="arrow" />
</Box>
);
}
API Reference
Spinner
| Prop | Type | Default |
|---|---|---|
type | "dots" | "line" | "star" | "clock" | "bounce" | "bar" | "arc" | "arrow" | "toggle" | "box" | "pipe" | "earth" | "dots" |
label | string | undefined |
color | string | undefined |
fps | number | 12 |
frames | string[] | undefined |