Component
Spinner
Indicates an indeterminate loading state with an accessible label.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/spinnerExamples
Live previews render through the docs app's PandaCSS codegen.
<Spinner aria-label="Loading" />
<Spinner size="lg" aria-label="Loading project" />
<Spinner size="sm" aria-label="Saving" />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `size` | `SpinnerSize` | No | - | - |
| `'aria-label'` | `string` | No | - | Accessible name announced to assistive tech. Defaults to \`"Loading"\`. |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `size` | `sm`, `md`, `lg`, `xl` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/spinner.json`
- Recipe: `spinner`
- Files: `src/components/ui/spinner.tsx`