Spinner

Spinners indicate short indeterminate loading activity without changing surrounding layout.

Overview and decision boundary

Spinner indicates short indeterminate loading activity without changing surrounding layout.

Do not use Spinner for long tasks where determinate Progress is available.

Preview

Loading activity

1import { Spinner } from '@nerio-ui/ui';23<Spinner label="Loading activity" />

Installation and imports

Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.

1pnpm dlx nerio add spinner23import { Spinner } from '@nerio-ui/ui';

Usage

1import { Spinner } from '@nerio-ui/ui';23<Spinner label="Loading activity" />

Variants

Size	Use
`sm`	Compact size for dense layouts and inline use.
`md`	Default size for most product surfaces.
`lg`	Larger size for prominent local actions.

Anatomy

Slot	Description
`root`	Inline loading indicator that is a status or decorative mark, depending on its mode.
`label`	Visually hidden localized status label, rendered only for standalone Spinner.

States

Mode	Behavior
`Standalone`	Requires label and renders a status with a visually hidden localized label.
`Decorative`	Use when a parent already owns aria-busy and the loading announcement.
`Reduced motion`	Stops rotating and remains visible as a static loading mark.

Motion

State changes should use shared motion tokens and preserve reduced-motion behavior.

Accessibility

Provide a localized label when Spinner is the loading announcement; use decorative when a parent already exposes loading state.
Use for short waits and prefer Skeleton when layout should be reserved.
Use one loading announcement per region; decorative Spinner does not create a nested status.
Spinner stops rotating when reduced motion is requested and remains visible as a static loading mark.

API

Prop	Type	Description
`size`	`"sm" \| "md" \| "lg"`	Defaults to md.
`label`	`string`	Required localized text for standalone Spinner.
`decorative`	`boolean`	Removes status semantics when a parent already announces loading.
`className`	`string`	Adds a semantic foreground color inherited through currentColor.

Implementation contract

Item	Contract
`Registry item`	spinner installs three source files into the configured components directory.
`Base UI`	No interactive primitive required.
`Registry dependencies`	None.
`Package dependencies`	clsx, react

Styling contract

Contract	Value
`Authoring`	`Complete, statically detectable Tailwind CSS v4 recipes own component visuals.`
`Values`	`Semantic and component --n-* variables remain the canonical customization layer.`
`Overrides`	`Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically.`
`Residual CSS`	`Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer.`

Design notes

Spinner indicates short indeterminate loading activity without changing surrounding layout.

Do / do not

Use Spinner for quick work such as saving, filtering, or refreshing. Use currentColor through semantic text color or className to match the surrounding foreground.

Do not use Spinner for long tasks where determinate Progress is available.

Tokens

These are the primary customization points. Override semantic or component tokens instead of changing component source.

Token	Purpose
`--n-spinner-size-sm`	Public customization point for this component contract.
`--n-spinner-size-md`	Public customization point for this component contract.
`--n-spinner-size-lg`	Public customization point for this component contract.
`--n-spinner-border-width`	Public customization point for this component contract.
`--n-spinner-duration`	Public customization point for this component contract.
`--n-radius-full`	Public customization point for this component contract.