Question 1

How do I install the Spinner component?

Accepted Answer

You can install the Spinner component using the shadcn CLI: npx shadcn@latest add "https://ui.nyxhora.com/r/spinner.json". Alternatively, copy the component code directly from the documentation.

Question 2

Is the Spinner component accessible?

Accepted Answer

Yes, the Spinner component is built with accessibility in mind using Radix UI primitives. It supports keyboard navigation, screen readers, and follows WCAG guidelines.

Question 3

Can I customize the Spinner component?

Accepted Answer

Absolutely! The Spinner component is fully customizable using Tailwind CSS classes. You can modify colors, sizes, animations, and more by editing the component code or passing custom className props.

Question 4

Does the Spinner component work with Next.js?

Accepted Answer

Yes, all Nyxhora UI components including Spinner are fully compatible with Next.js 14+ (including Next.js 15), supporting both the App Router and Pages Router.

Prop	Type	Default	Description
`variant`	`string`	`default \| dotted \| bars \| pulse \| gradient`	The visual style of the spinner
`size`	`string`	`default`	The size of the spinner
`loading`	`boolean`	`true`	Whether the spinner is visible

Spinner

Preview

with variants

Installation

Usage

Variants

Default

Dotted

Bars

Pulse

Gradient

Sizes

Props