Skip to main content

​
Installation

npx @kuzenbo/cli add spinner

​
Usage

import { Spinner } from "@kuzenbo/core";

export default function Example() {
  return <Spinner />;
}

​
Examples

​
Sizes

Spinner supports the standard size system. 
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

​
With Text

Combine spinner with loading text. 
<div className="flex items-center gap-2">
  <Spinner size="sm" />
  <span>Loading...</span>
</div>

​
Centered

Center the spinner in a container. 
<div className="flex h-40 items-center justify-center">
  <Spinner />
</div>

​
Custom Stroke Width

Adjust the stroke width for different visual weights. 
<Spinner strokeWidth={1} />
<Spinner strokeWidth={2} />
<Spinner strokeWidth={3} />

​
Custom Color

Override the color with CSS classes. 
<Spinner className="text-primary" />
<Spinner className="text-success" />
<Spinner className="text-warning" />

​
Button Loading State

Show spinner in buttons during loading. 
<Button disabled>
  <Spinner size="sm" />
  Loading...
</Button>

​
API Reference

​
Spinner

​
size
UISize
default:"md"
Size of the spinner.Options: "xs" | "sm" | "md" | "lg" | "xl"
​
strokeWidth
number
default:"2"
Stroke width of the spinner icon.
​
className
string
Additional CSS classes.

​
Accessibility

  • Has role="status" for screen reader announcements
  • Includes aria-label="Loading" for context
  • Always pair with text for critical loading states
  • Use meaningful loading messages nearby

​
Best Practices

  • Use for indeterminate loading states
  • Prefer Progress for determinate operations
  • Don’t use multiple spinners simultaneously
  • Center spinners in their container
  • Provide context about what’s loading
  • Use appropriate sizes for the context (e.g., sm for buttons)
  • Consider skeleton loaders for content placeholders

Build docs developers (and LLMs) love

Get started for freeTalk to us