How do I install the Vibe UI Spinner component?

You can install Spinner into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add spinner" in your terminal.

Does Vibe UI Spinner support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

A visual progress loading indicator widget supporting customized speed animations and theme presets.

A visual progress loading indicator widget supporting customized speed animations and theme presets.

Loading workspace...

pnpm dlx vibe-ui-kit@latest add spinner

Explore the visual design presets of the Spinner component, including Default, Glassmorphic, Retro Brutalist, Neon Glow, and Cyberpunk matrix styles.

Default

Glassmorphic

Retro Brutalist

Neon Glow

Cyberpunk

The Spinner component supports multiple layout motions beyond simple rotation, including bouncing dots, fading bars, and flashing grid squares.

Rotating Circle

Bouncing Dots

Pulsating Bars

Flashing Grid

Radial Pinwheel

Expanding Ripple

Combine Spinner presets inside buttons, data upload containers, and workspace overlays to indicate loading feedback loops.

Click to upload large document

Node ID#0921B-NODE

Database Sync Status

Prop	Type	Default	Description
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The visual design style variant preset of the spinner SVG outline and drop-shadow.
size	'sm' \| 'md' \| 'lg'	'md'	The height and width dimensions of the spinner SVG.
design	'circle' \| 'dots' \| 'bars' \| 'grid' \| 'pinwheel' \| 'pulse'	'circle'	The layout design shape of the spinner. When not set to circle, container rotation is disabled and internal shape animations are used.