# Spinner set (goodtabs UI)

Ring, dots and bars spinners that hold still under reduced motion.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/spinner-set.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/spinner-set`

## Usage

```tsx
import { RingSpinner } from "@/components/ui/spinner-set"

<RingSpinner label="Saving changes" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | `"Loading"` | Text for assistive tech, hidden visually. Say what is loading. |
| className | `string` |  | Applies to the status wrapper. |

## When to use

- A short wait inside a button or beside a line of status text
- Work of unknown length where no percentage is available

## When not to use

- Content areas with a known shape: use skeletons
- Anything with a measurable percentage: use a progress bar

## Notes for agents

- Each spinner is role=status with an sr-only label, so it is announced once on mount
- Animation is motion-safe only: under reduced motion the ring shows its still arc and the dots and bars show at full strength
- Set the label to the specific task, not just Loading
- Server component, no JavaScript

Docs: https://ui.goodtabs.co/components/spinner-set