PhotoGallery
Property image gallery with carousel navigation and fullscreen viewer.
Quick Preview
Usage
<PhotoGallery images={images} />Examples
Default PhotoGallery
Use this as the starting point for PhotoGallery. Keep product data, routing, fetching, and authorization logic in the consuming app.
Fullscreen viewer
Wire onImageClick to open a PhotoGalleryFullscreen lightbox, sharing index / onIndexChange so the inline gallery and the viewer stay in sync. The viewer contains each photo within the available space — never overflowing the chrome and never stretching.
Props
PhotoGallery
| Prop/API | Type | Default | Description |
|---|---|---|---|
images | PhotoGalleryImage[] | - | Gallery images and alt text. |
index | number | - | Controlled active image index. |
onIndexChange | (index) => void | - | Called when the active image changes. |
onImageClick | (index) => void | - | Called when the hero image is activated. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
PhotoGalleryFullscreen
| Prop/API | Type | Default | Description |
|---|---|---|---|
images | PhotoGalleryImage[] | - | Gallery images and alt text. |
open | boolean | - | Whether the fullscreen viewer is open. |
onOpenChange | (open) => void | - | Called when the viewer requests to open or close. |
index | number | - | Controlled active image index. |
onIndexChange | (index) => void | - | Called when the active image changes. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.