Block · C-051 · storefront

ProductGallery

A main image with four-column thumbnails. It can own its index or receive it controlled from the page.

Install

Blocks compose Koten primitives; install koten-theme first.

npx shadcn@latest add https://koten.codehive.com.co/r/product-gallery.json

Requirements

Controlled selection with activeIndex: Pass activeIndex with onIndexChange when the page decides the active image, for example to sync the URL or a zoom panel. Without activeIndex, the gallery uses defaultIndex and manages its own state.

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/components/patterns/product-gallery.tsx
@/lib/koten/cn.ts
@/lib/koten/format.ts
@/lib/koten/intl.ts
@/lib/koten/labels.ts
@/lib/koten/provider.tsx

Accessibility

Thumbnails are buttons with aria-pressed, grouped in a fieldset with a hidden legend.
The main image has descriptive alt text; thumbnails use empty alt because the button already has a name.
Each button shows a visible focus ring and activates with Enter or Space.
Changing the image does not move focus; state is conveyed by the name and aria-pressed.

Read the whole page