Question 1

How do I install the Image Grid component?

Accepted Answer

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

Question 2

Is the Image Grid component accessible?

Accepted Answer

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

Accepted Answer

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

Accepted Answer

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

Prop	Type	Default	Description
`items`	`ImageGridItem[]`	`-`	Array of image objects {id, src, alt}
`layout`	`"hero-left" \| "hero-right" \| "hero-top"`	`"hero-left"`	The layout configuration
`enableSwapping`	`boolean`	`true`	Enable swapping images on click

Image Grid

Preview

Hero Right

Hero Top

Installation

Props