104Get started
HextaUI

Spinner: Sizes

sm, default, lg and xl for both variants.

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

const sizes = ["sm", "default", "lg", "xl"] as const

export function SpinnerSizes() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-6">
        {sizes.map((size) => (
          <Spinner key={size} size={size} />
        ))}
      </div>
      <div className="flex items-center gap-6">
        {sizes.map((size) => (
          <Spinner key={size} size={size} variant="ring" />
        ))}
      </div>
    </div>
  )
}

Add this example

This adds the example as components/examples/spinner/sizes.tsx, together with the Spinner component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/spinner-sizes.json

To add only the component, follow the Spinner installation.

Props in this example

The Spinner props this example sets, from the API reference.

Spinner

PropTypeDefault
variant
"ticks" | "ring""ticks"
sizenull leaves sizing to the parent.
"sm" | "default" | "lg" | "xl" | null"default"

Every prop is in the Spinner API reference.

More Spinner examples

See them all, with keyboard support and accessibility notes, on the Spinner page.

Related components