On this page

Spinner

---
import { Spinner } from "@/components/starwind/spinner";
---

<Spinner />

Installation

pnpx starwind@latest add spinner

npx starwind@latest add spinner

yarn dlx starwind@latest add spinner

Usage

Custom Size

---
import { Spinner } from "@/components/starwind/spinner";
---

<Spinner class="size-4" />
<Spinner class="size-6" />
<Spinner class="size-8" />
<Spinner class="size-12" />

Custom Color

---
import { Spinner } from "@/components/starwind/spinner";
---

<Spinner class="text-blue-500" />
<Spinner class="text-green-500" />
<Spinner class="text-red-500" />
<Spinner class="text-purple-500" />

In Button

---
import { Spinner } from "@/components/starwind/spinner";
import { Button } from "@/components/starwind/button";
---

<Button disabled>
  <Spinner />
  Loading...
</Button>

API Reference

Spinner

An accessible loading spinner component with customizable styling.

Prop	Type	Default
`class`	`string`	-

<Spinner class="size-6 text-primary" />

Additional Notes:

Use Tailwind classes to control size with size-* utilities
Use Tailwind color classes to change the spinner color

Changelog

v1.0.0

Initial release with starwind v1.10.0