Question 1

How do I install the Image Slider component?

Accepted Answer

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

Question 2

Is the Image Slider component accessible?

Accepted Answer

Yes, the Image Slider 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 Image Slider component?

Accepted Answer

Absolutely! The Image Slider 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 Image Slider component work with Next.js?

Accepted Answer

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

Prop	Type	Default	Description
`images`	`string[] \| {src: string, alt: string}[]`	`-`	Array of image URLs or objects
`showControls`	`boolean`	`true`	Show previous/next arrows
`showThumbnails`	`boolean`	`true`	Show thumbnail navigation
`autoplay`	`boolean`	`false`	Enable automatic sliding
`autoplayInterval`	`number`	`3000`	Interval in milliseconds

Image Slider

Preview

Autoplay

Minimal

Installation

Props