On this page

Spinner

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

    <Spinner />

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

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

Installation

pnpx starwind@latest add spinner

npx starwind@latest add spinner

yarn dlx starwind@latest add spinner

Framework Availability

Astro Available React Available

Spinner is available for Astro and React.

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

Changelog

v1.1.0

Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.

v1.0.2

Refactor tailwind variants functions into separate variants.ts file

v1.0.0

Initial release with starwind v1.10.0