Lightbox
Media
Source and install need .
pnpm dlx shadcn@latest add @assembli/product-galleryProduct Gallery
A product page gallery: a scroll-snap stage that phones swipe with native momentum, hover magnification under the mouse, a thumbnail rail on the left or a strip below that keeps the active one in view, dots when it's narrow, and a fullscreen viewer with the same swipes, arrows and keys. A controlled index keeps it in step with a variant picker.
Props
Other props pass through to the root element.
images*
GalleryImage[]
index
number
The image shown, for syncing with a variant picker.
defaultIndex
number
Default
0onIndexChange
(index: number) => void
thumbnails
"left" | "bottom" | "none"
Default
"left"Where the thumbnails sit once the gallery is wide enough. Narrow galleries always use dots.
aspect
string
Default
"4 / 5"Aspect ratio of the stage, as CSS:
"4 / 5","1".zoom
boolean
Default
trueMagnify under the mouse on hover.
badge
React.ReactNode
A label laid over the top-left corner, e.g. "New" or "−20%".
container
HTMLElement | React.RefObject<HTMLElement | null> | null
Mount the fullscreen viewer inside this element instead of
<body>.aria-label
string
| Description | |||
|---|---|---|---|
| images* | GalleryImage[] | – | |
| index | number | – | The image shown, for syncing with a variant picker. |
| defaultIndex | number | 0 | |
| onIndexChange | (index: number) => void | – | |
| thumbnails | "left" | "bottom" | "none" | "left" | Where the thumbnails sit once the gallery is wide enough. Narrow galleries always use dots. |
| aspect | string | "4 / 5" | Aspect ratio of the stage, as CSS: |
| zoom | boolean | true | Magnify under the mouse on hover. |
| badge | React.ReactNode | – | A label laid over the top-left corner, e.g. "New" or "−20%". |
| container | HTMLElement | React.RefObject<HTMLElement | null> | null | – | Mount the fullscreen viewer inside this element instead of |
| aria-label | string | – |
