ImageGalleryLightbox

Options

label Plates

Accessible name for the sheet and for the overlay. Keep it a noun. It is read out as the name of the whole gallery.

closeLabel Close

Text on the close control. There is a visible one as well as Escape, because Escape is not discoverable and on a touch device it does not exist.

columns 3

1 to 6

Columns at the widest the container gets. The sheet steps down on its own below that, because it fits its container rather than the viewport.

autoplay 0

0 to 12

Seconds between plates once the overlay is open. Zero is off, and off is the default: a gallery that starts moving on its own is rarely what the reader wanted. Any value above zero renders a pause control, and reduced motion turns it off entirely.

playLabel Play

Text on the autoplay control when it is stopped.

pauseLabel Pause

Text on the autoplay control when it is running.

What it needs

Dependencies

react@>=18

Browser

No WebGL

Frame budget

~0.2 ms · 0 context

Pinned to

v0.6.2

• Uses <dialog>.showModal(), so the focus trap, Escape, top layer, inerting and focus restoration are the browser's
• The fade uses transition-behavior: allow-discrete and @starting-style; where those are unsupported the overlay appears instantly, which is a graceful loss
• No carousel library, no focus-trap library, no portal, no scroll-lock package
• Swipe is Pointer Events, and is ignored for mouse input, where a small drag is the start of a click rather than a gesture
• No JavaScript runs per frame. The enter is one CSS animation on the image
• Thumbnails below the first row are lazy, and the two neighbouring full-size files are decoded while you are looking at the current one
• Intrinsic width and height are required on every plate so the sheet reserves its shape and does not reflow as the files arrive