Gallery

A grid of images that open in a lightbox.

import { Gallery } from 'components/UI/Gallery'

Product screenshots

Select a screenshot to inspect it.

Images keep their proportions in CSS columns.

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Use Gallery for a set of screenshots or photos that users may want to see larger.
Give each image width and height from its metadata to stop layout shift, and write alt text. A caption does not replace alt text.
Do not put links or buttons in thumbnails or captions.

Gallery is a site component. It uses the library Dialog for an image lightbox.

Prop	Type	Default	Description
items	GalleryItem[]	–	The images in keyboard and lightbox order.
label	string	–	Names the image group and the lightbox.
layout	'grid' \| 'columns'	'grid'	Uses rows or CSS columns.
columns	1 \| 2 \| 3 \| 4	3	Sets the maximum column count. Narrow containers show one column.
className	string	–	Adds classes to the outer container.
frame	boolean	true	Shows the raised surface around each thumbnail.
renderThumbnail	(item: GalleryItem) => ReactNode	–	Replaces the thumbnail content. Gallery keeps the button and lightbox behavior.
showThumbnailCaptions	boolean	true	Shows captions below thumbnails. Lightbox captions remain visible.

Prop	Type	Default	Description
imageLight	string	–	The image URL. It also serves dark mode when imageDark is absent.
imageDark	string	–	The optional dark image URL.
alt	string	–	Describes the image and names its thumbnail button.
caption	ReactNode	–	The visible caption below the image.
width / height	number	–	The intrinsic dimensions from image metadata.