Components

Gallery, lightbox and compare

Three components about pictures: the gallery is the index, the lightbox is one item, and the compare slider is the difference between two.

import { ImageCompare, ImageGallery, Lightbox } from "@luc/ui";

Gallery

A grid of thumbnails is an index; every image carries an `alt`, because a set of unlabelled pictures is a blank page to a screen reader.

<ImageGallery images={shots} label="Figures" columns={4} />

Lightbox

The viewer is built on the shared Dialog, so focus trapping, Escape, scroll locking and focus restore all come from the same place; the arrow keys walk the set and + / − zoom.

Arrow keys walk the set, + and − zoom, Escape closes.

<Lightbox images={shots} index={index} open={open} onOpenChange={…} onIndexChange={…} />

Before and after

The wipe is a real `range` input rather than custom pointer handling, which is why keyboard stepping, click-to-position and the accessible name all come from the platform.

<ImageCompare before={before} after={after} />

Public API

All three render; none of them decodes, resizes, caches or uploads.

Component props
Prop	Type	Default	Notes
`GalleryImage.alt`	`string`	`—`	Required on every image — a gallery without labels is unusable.
`ImageGallery.columns`	`2 \| 3 \| 4`	`—`	Grid column preset.
`ImageGallery.lightbox`	`boolean`	`—`	Whether the built-in viewer opens on activation; turn it off to handle `onOpen` yourself.
`ImageCompare.value`	`number`	`—`	0–100, the share of the frame given to the “before” image.
`ImageCompare.before/after`	`CompareImage`	`—`	The `src` and `alt` of each of the two images.