Spinner

The macOS spinning progress indicator: twelve spokes that turn a step at a time.

@cupertinoui/spinnerRegistry JSON

import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

export default function SpinnerDemo() {
  return (
    <div className="flex flex-col items-center gap-5">
      <div className="flex items-center gap-4">
        <Spinner className="size-3" />
        <Spinner />
        <Spinner className="size-6" />
        <Spinner className="size-8" />
      </div>
      <Button variant="secondary" disabled>
        <Spinner className="size-3.5" /> Checking for updates…
      </Button>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/spinner

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

import { Spinner } from "@/components/ui/spinner"

<Spinner />

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

Spinner

Set the size with size-*; the color follows the text color.

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.