Lightbox

overlays

Full-screen image viewer with navigation, zoom, and keyboard controls.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system

Import

import { Lightbox } from "@launchapp/design-system";

Examples

Image lightbox

const [open, setOpen] = React.useState(false);return (  <>    <button type="button" onClick={() => setOpen(true)}>View Gallery</button>    <Lightbox      open={open}      onClose={() => setOpen(false)}      images={[        { src: "/photo1.jpg", alt: "Photo 1" },        { src: "/photo2.jpg", alt: "Photo 2" },      ]}    />  </>);

Props

Prop	Type	Default	Description
`images`*	`LightboxImage[]`	—	Array of images with src, alt, and optional caption.
`open`	`boolean`	—	Controls lightbox visibility.
`initialIndex`	`number`	`0`	Starting image index.
`onClose`	`() => void`	—	Called when lightbox closes.

← PreviousInline Editable

Next →Live Indicator