Lightbox

A headless React lightbox and image viewer with pinch zoom, swipe and pull to dismiss. Thumbnails morph into the full photo and back. Built on Base UI and Motion, it ships behavior only, no CSS, so the gallery looks like your product, not like a plugin.

Docs and live demos · Made by Frontend Supply

pnpm add @frontendsupply/lightbox @base-ui/react motion

import { Lightbox } from '@frontendsupply/lightbox'

<Lightbox.Root items={photos}>
  {photos.map((photo, i) => (
    <Lightbox.Trigger key={photo.src} index={i}>
      <img src={photo.thumb} alt={photo.alt} className="aspect-square object-cover" />
    </Lightbox.Trigger>
  ))}
  <Lightbox.Portal>
    <Lightbox.Backdrop className="bg-black" />
    <Lightbox.Popup>
      <Lightbox.Viewport />
      <Lightbox.Close>Close</Lightbox.Close>
    </Lightbox.Popup>
  </Lightbox.Portal>
</Lightbox.Root>

Requires React 19 or later. Read Getting started for the full setup.

Features

• Morph open and close that un-crops object-fit: cover thumbnails and interpolates corner radius
• Native swiping: a real scroll-snap scroller, so touch and trackpad momentum come from the OS. Mouse dragging comes from Blossom Carousel, loaded only where there's a mouse
• Pinch, trackpad, wheel, double-tap and keyboard zoom, with rubber-banding and inertial panning
• Pull to dismiss with velocity carried into the close animation. Pinch below fit to close
• Page scroll sync: the page behind the viewer follows along, so closing lands on the right thumbnail
• Accessible: focus trap, scroll lock, Esc, focus return (Base UI Dialog) and a reduced-motion fallback
• Headless: style every part with Tailwind, CSS modules or anything else, through data attributes and a CSS variable

Docs

• Getting started
• Gestures
• Styling
• API reference
• Examples: chat, listing gallery, stories, product page, travel map, fly to bag, Quick Look, floor plan, contact sheet

License

MIT. Made by Frontend Supply.