Introduction
liftbox is an accessible React lightbox that opens out of the thumbnail you clicked, with zoom, video, grids and deep links, and no runtime dependencies.
liftbox is a lightbox for React. Give it a list of slides and an index, and it opens the image out of the thumbnail that was clicked, lets people swipe, zoom and read captions, then flies back when they close it.
Live demo. Click a thumbnail to open it.
What you get
- An open and close animation that starts and ends on your thumbnail, with a fade and zoom fallback when there is none.
- Arrows, keyboard, swipe and flick navigation, with
slide,fadeandzoomtransitions. - A thumbnail strip, zoom with every input people expect, fullscreen, rotation and downloads.
- Native video with captions, YouTube and Vimeo embeds without their player scripts, and any page in an iframe.
- A slideshow that pauses when the user takes over.
- Fast with thousands of images and videos. See Performance.
- Flip, share, pager dots, idle controls, right-to-left and an overflow menu that keeps a full toolbar usable on a phone.
- Deep links through the URL hash, closed by the back button.
- Modal dialog semantics, a focus trap, focus return, a live region and a scroll lock that keeps the page still.
- Zero runtime dependencies. React is a peer dependency.
- Optional justified, masonry and uniform grids and a category filter.
Bring your own grid
The lightbox does not need the built-in grids. Use your own markup, a CSS grid, a masonry library or CMS output, and point the lightbox at it with getThumbnail.
Compatibility
| Supported | |
|---|---|
| React | 18 and 19, as a peer dependency |
| Module format | ESM only, with TypeScript declarations |
| Frameworks | Any React setup, including the Next.js App Router |
| Browsers | Current evergreen browsers. Without ResizeObserver or the Web Animations API it falls back to window resize events and opens without the flight animation. |