React library
Gallery component
Configure layouts, limits, and server-provided gallery data.
<Gallery
gallery={gallery}
layout="Masonry"
limit={24}
className="product-gallery"
/>Supported layouts:
| Layout | Best for |
|---|---|
Grid | Predictable cards and equal columns |
Masonry | Editorial image collections with varied heights |
Justified | Rows with balanced visual weight |
Carousel | Focused sequential browsing |
Single | One image at a time |
The component includes lightbox behavior, keyboard navigation, image-view tracking, download tracking, and responsive layout primitives. Use className and your application theme for surrounding layout and presentation.
Pass normalized gallery data through gallery when your server already fetched it. Do not fetch each image through the API; image URLs in the gallery data are delivered by the media plane.