Spinner

A loading indicator for asynchronous operations.

$bunx shadcn@latest add @nx-ui/spinner
Registry item
Installs withutils
Used byisochrone-toollistings-filtersloading-overlaylocation-selectormarketplace-maproute-tooltransfer-preview

Default

A single spinning icon, sized and coloured to match the surrounding text by default.

Sizes & colour

Spinner has no size prop — pass a `size-*` and text colour utility via className to scale it.

On coloured surfaces

Use text-current so the spinner inherits its parent's foreground colour.

Syncing soil readings…
Retrying upload…

Loading buttons

Disable the button and swap its leading icon for a spinner while the action is pending.

Composition

A dashboard card mid-fetch, waiting on the latest reading from a field sensor.

Riverside Reclamation — Plot 4
Live soil moisture feed
Fetching latest sensor reading…

API reference

Exported parts and their props, extracted from the component source.

…extends React.ComponentProps<"svg">