liftbox

Installation

Install liftbox with npm, pnpm, yarn or bun, import its stylesheet once, and see every export the package ships.

npm install liftbox

react and react-dom 18 or 19 are peer dependencies. Nothing else gets installed.

Stylesheet

Import the CSS once, anywhere in your app. A root layout or your entry file is a good place.

import "liftbox/styles.css";

The package marks CSS files as side effects, so bundlers keep the import. Without it the lightbox still works, but it has no layout.

Exports

import {
  Lightbox,
  useLightboxHash,
  defaultLabels,
  defaultIcons,
  Icon,
  getMedia,
  fitContain,
  type Slide,
  type LightboxProps,
} from "liftbox";

The full list is in Exports.

Edit this page on GitHub

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.

Quick start

Build a working React image gallery in one component: describe your slides, render a grid and open the lightbox out of the clicked thumbnail.

On this page

StylesheetExports