Gallery

Media · BeforeAfter, Gallery, ImageVariants

Images: Gallery (photos with thumbnails and full screen), BeforeAfter (drag to compare, e.g. virtual staging or upscaling) and ImageVariants (the sizes and formats generated from one image).

Gallery: items ({src, alt, caption, art, tint}), start, ratio, thumbs, fullscreen, badge, loading, referrerPolicy. Arrow keys and Esc work in full screen. BeforeAfter: before, after ({src, alt} or {art}), start (0–100), ratio, beforeLabel, afterLabel, label, valueText, loading, referrerPolicy. Drag, click or use ← → (Page Up/Down for bigger steps, Home and End for the ends). ImageVariants: variants ({id, label, src, size, format, weight, ratio, status}), selected / onSelect, alt, tint, actions.

Images load lazily (loading="eager" for a gallery at the top of the page; thumbnails always load lazily) and decode off the main thread.
referrerPolicy="no-referrer" keeps your page address from hosts the photos come from.
The compare slider tells screen readers both shares ("Before 40%, After 60%", with your labels); valueText words it your way.

PreviewCode

Living room

1 / 5Virtual staging

Virtual staging

BeforeStaged · Scandinavian

Original

Props

BeforeAfter

Prop	Type	Notes
`before`	`MediaPane`	Required
`after`	`MediaPane`	Required
`start?`	`number`
`ratio?`	`string`
`beforeLabel?`	`string`
`afterLabel?`	`string`
`label?`	`string`	Accessible name of the slider (default "Compare before and after").
`valueText?`	`(percent: number) => string`	What screen readers hear for a position (0–100, the share of "before"). Default: "Before 40%, After 60%", with your `beforeLabel`/`afterLabel`.
`loading?`	`"lazy" \| "eager"`	Loading of both images (default `"lazy"`).
`referrerPolicy?`	`ImageReferrerPolicy`	`referrerPolicy` of both images.
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Gallery

Prop	Type	Notes
`items`	`GalleryItem[]`	Required
`loading?`	`"lazy" \| "eager"`	Loading of the main image: `"lazy"` (default) waits until the gallery is near the viewport; use `"eager"` for a gallery at the top of the page. Thumbnails always load lazily.
`referrerPolicy?`	`ImageReferrerPolicy`	`referrerPolicy` of every image, e.g. `"no-referrer"` for photos from other hosts.
`start?`	`number`	First image when uncontrolled.
`index?`	`number`	The shown image (controlled, 0-based), with `onIndexChange`.
`onIndexChange?`	`(index: number) => void`
`label?`	`string`	Accessible name of the gallery (default "Images"), e.g. the listing's title.
`ratio?`	`string`
`thumbs?`	`boolean`
`fullscreen?`	`boolean`
`badge?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ImageVariants

Prop	Type	Notes
`variants`	`ImageVariant[]`	Required
`selected?`	`string \| number`
`onSelect?`	`(id: string \| number) => void`
`alt?`	`string`
`tint?`	`Tint`
`actions?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.