Spin Resolve - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/spin-resolve

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Examples

Success

Green checkmark — resolves successfully.

Error

Red exclamation — resolves with an error.

Warning

Amber exclamation — resolves with a warning.

Info

Blue checkmark — resolves as informational.

Paused

Gray pause icon — resolves to a paused state.

API Reference

Prop	Type	Default	Description
`size`	`number`	`16`	Diameter in pixels. Common values: 12 (xs), 16 (sm/default), 20 (md), 24 (lg). Scales all internal proportions — arc stroke, fill radius, and icon size — automatically.
`color`	`string`	`"currentColor"`	Any valid CSS color. Controls the spinner arc, fill circle, and border ring. Inherits the parent's text color by default. Use semantic colors to match intent — e.g. #15803d (success), #b91c1c (error), #b45309 (warning), #1d4ed8 (info), #374151 (neutral).
`icon`	`"check" \| "error" \| "warning" \| "pause"`	`"check"`	Icon shown after the fill animation completes. "check" renders a checkmark (resolved successfully). "error" renders an exclamation mark (resolved with error). "warning" renders an exclamation mark on an amber fill (resolved with warning). "pause" renders two vertical bars (resolved to paused state).
`className`	`string`	—	Additional CSS classes applied to the outer wrapper div.