Lightbox
Fullscreen dialog for viewing image or video media, with optional gallery navigation.
Examples
Section titled “Examples”Default
Section titled “Default”<LightboxStory {...args} media={imageMedia[0]} />Gallery
Section titled “Gallery”<LightboxStory {...args} media={imageMedia} /><LightboxStory {...args} media={videoMedia} />Mixed Media
Section titled “Mixed Media”<LightboxStory {...args} media={mixedMedia} />With Captions
Section titled “With Captions”<LightboxStory {...args} media={imageMedia} />Zoom Enabled
Section titled “Zoom Enabled”<LightboxStory {...args} media={imageMedia[0]} />Autoplay Video
Section titled “Autoplay Video”<LightboxStory {...args} media={videoMedia} />Controlled Index
Section titled “Controlled Index”<ControlledIndexStory {...args} />Use Lightbox Hook
Section titled “Use Lightbox Hook”<HookStory />Use Lightbox Gallery
Section titled “Use Lightbox Gallery”
<HookGalleryStory />Lightbox
Section titled “Lightbox”Fullscreen dialog for viewing image or video media, with optional gallery navigation.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS class names applied to the dialog. |
data-testid | string | — | Test ID applied to the dialog. |
defaultIndex | number | 0 | Initial gallery index for uncontrolled usage. |
hasAutoPlay | boolean | false | Whether videos autoplay when opened. |
hasZoom | boolean | false | Whether images can be double-clicked to zoom. |
index | number | — | Controlled gallery index. |
isOpen* | boolean | — | Whether the lightbox is open. |
media* | LightboxMedia | ReadonlyArray<LightboxMedia> | — | Media to display. |
onIndexChange | (index: number) => void | — | Called when gallery index changes. |
onOpenChange* | (isOpen: boolean) => void | — | Called when the lightbox requests an open-state change. |
ref | Ref<HTMLDialogElement> | — | Ref forwarded to the dialog element. |
style | CSSProperties | — | Inline styles applied to the dialog. |