Skip to content
Kura UI

Spinner

stable

Eight-segment radial spinner for indeterminate loading that inherits the current text color.

@kura-ui/react/spinnerCopy page for agents.mdregistry.json

Default

minimal
Loading

Sizes and colors

full
Loading smallLoading mediumLoading large Fetching models…

Syncing knowledge sources

Per-row spinners for indexing, a loading Sync now Button and a Reconnect action for a failed source.

composition

Knowledge sources

Syncing — answers may miss recent changes

  • Product specsDrive · 1,204 filesUp to date
  • Team wikiNotion · 386 pagesIndexing…
  • kura-ui/kuraGitHub · mainUp to date
  • Roadmap issuesLinear · access expired

Installation

npx shadcn@latest add https://kuro.abstergo.fyi/r/spinner.json

Copies the source into components/kura/spinner with its dependencies (kura-theme, utils). Tokens come from the kura-theme item.

When to use it

Use it for

  • Indeterminate waits on a control: a loading button, a pending row, a fetching list.
  • Small inline busy indicators next to text.

Reach for something else when

  • AI ‘thinking’ states — use shimmer-text or thinking-indicator; they read as the model working, not the network.
  • Known progress — use a progress bar or context-meter.
  • Inside a Button — pass `loading` to button instead.

Props

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"12px, 16px or 20px.
labelstring | null"Loading"Accessible label (role=status). Pass null when a parent already announces loading.

All native attributes of the root element, className and ref pass through.

Accessibility

  • Role: status
  • With a label it renders role="status" containing visually hidden label text; with label={null} it is aria-hidden.
  • Reduced motion: Rotation is replaced by a slow opacity pulse.

Notes for agents

  • Color it with a text-* class on the spinner or a parent; it uses currentColor.