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. Arrow keys and Esc work in full screen.
BeforeAfter: before, after ({src, alt} or {art}), start (0–100), ratio, beforeLabel, afterLabel. Drag, click or use ← →.
ImageVariants: variants ({id, label, src, size, format, weight, ratio, status}), selected / onSelect, alt, tint, actions.

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`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Gallery

Prop	Type	Notes
`items`	`GalleryItem[]`	Required
`start?`	`number`
`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.