# Spinner

Animated spinner with 12+ styles



<ComponentPreview base="opentui" name="spinner-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui-spinner
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="opentui" name="spinner" title="components/ui/spinner.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Spinner } from "@/components/ui/spinner";
```

```tsx
<Spinner type="dots" label="Loading components" />
```

Examples [#examples]

Spinner Styles [#spinner-styles]

Multiple built-in animation styles.

<ComponentPreview base="opentui" name="spinner-styles" />

API Reference [#api-reference]

Spinner [#spinner]

| Prop     | Type                                                                              | Default  |
| -------- | --------------------------------------------------------------------------------- | -------- |
| `type`   | `SpinnerName` from [`cli-spinners`](https://github.com/sindresorhus/cli-spinners) | `"dots"` |
| `label`  | `string`                                                                          | -        |
| `color`  | `string`                                                                          | -        |
| `fps`    | `number` — used only with custom `frames`                                         | `12`     |
| `frames` | `string[]`                                                                        | -        |