labsUI

Spinner

Server-safe activity indicator: eight spokes in currentColor, three sizes, its own status label (or silent inside a parent that announces). Holds still under reduced motion.

npx @kznlabs/labsui add spinner
LoadingLoadingLoadingLoading
Syncing 3 servers…
import { Spinner } from "@/components/ui/spinner";export function Syncing() {  // label="" silences the spinner; the text next to it is the status.  return (    <div className="flex items-center gap-2 text-sm">      <Spinner label="" />      <span role="status">Syncing 3 servers…</span>    </div>  );}

<Spinner>

Activity indicator: eight spokes in currentColor. Under reduced motion it holds still.

  • labeldefault "Loading"
    string

    Accessible name. Pass "" when a parent already announces the busy state.

  • sizedefault "default"
    "sm" | "default" | "lg"

    Diameter.

PropTypeDefault
label

Accessible name. Pass "" when a parent already announces the busy state.

string"Loading"
size

Diameter.

"sm" | "default" | "lg""default"

Also accepts every <span> prop.

* required. Every component also takes className.