Deprecated. Use
Lightbox(@uxf/ui/lightbox) instead. This component is kept only for existing usages.
Full-screen image viewer. Wraps a group of trigger images and, when one is clicked, opens them in a modal overlay with keyboard/swipe navigation, prev/next buttons and dot indicators.
Do not use for new code — reach for Lightbox. ImageGallery remains documented so existing integrations can be maintained and migrated.
There is no @uxf/form twin.
import { ImageGallery } from "@uxf/ui/image-gallery";
const images = [
{ src: "image1.jpg", title: "Image 1" },
{ src: "image2.jpg", title: "Image 2" },
];
<ImageGallery>
<div className="flex gap-2">
{images.map((image) => (
<ImageGallery.Image key={image.src} src={image.src} title={image.title} />
))}
</div>
</ImageGallery>;
ImageGallery.Image renders a clickable <img> that registers itself with the surrounding ImageGallery and opens the overlay on activation.
ImageGallery| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Required. Trigger content, typically ImageGallery.Image elements. |
closeButtonTitle | string | translated "Close" | Screen-reader label for the close button. |
disableBackdropClose | boolean | false | Prevents closing when the backdrop is clicked. |
prevButtonElement | ReactElement | built-in icon | Custom content for the previous button. |
nextButtonElement | ReactElement | built-in icon | Custom content for the next button. |
closeButtonElement | ReactElement | built-in icon | Custom content for the close button. |
ImageGallery.Image (ImageGalleryImageProps)| Prop | Type | Default | Description |
|---|---|---|---|
src | ImageSource | — | Required. Image source (resizer URL string, ImageResponse, or StaticImageData). |
alt | string | — | Alt text for the thumbnail <img>. |
title | string | — | Native title attribute. |
className | string | — | Class on the thumbnail <img>. |
customContent | ReactNode | — | Content overlaid on the image in the overlay. |
| Export | Signature | Description |
|---|---|---|
useImage | (props: ImageGalleryImageProps) => () => void | Registers an image on mount, unregisters on unmount, returns a callback that opens the overlay on that image. Used internally by ImageGallery.Image; export it to build custom triggers. |
ArrowLeft/ArrowRight navigate, Escape closes, and horizontal swipe navigates on touch. The index wraps around at both ends.Import the component stylesheet once in your global CSS. The default buttons render an Icon, so its stylesheet is required too:
@import url("@uxf/ui/css/icon.css");
@import url("@uxf/ui/css/image-gallery.css");