Lightbox

Work through these decisions in order:

1. State — controlled props, createHandle, or both? See State & lifecycle.
2. Layout — default to the swipe carousel (Slides + Zoom). See Composition.
3. Morph — on by default; wrap destination media in Lightbox.Media (and imageRef on Trigger thumbs), choose crossfade / morphTo, or pass viewTransition={false} to opt out. See View transitions.
4. Gestures — pull-to-dismiss on Content, Zoom on media, keyboard on Content. See Gestures.
5. Cosmetics vs mechanics — colors, chrome, and radius values are yours. Structural styles (view-transition morph CSS, morph host box, zoom overflow, slide snap alignment, placeholders) are applied by the library or via Media width/height; slide track width (full-bleed vs snug cards) is consumer CSS — see Composition → Slides + Zoom. Style with documented data-* attributes and CSS variables from the API reference.

Import the namespace and compose parts. The sketch below is the default gallery shape (Slides + Zoom + chrome). Every part is optional except Root for state.

import * as Lightbox from '@ramka/react/lightbox';

<Lightbox.Root>
  <Lightbox.Trigger index={0}>{/* thumb */}</Lightbox.Trigger>
  <Lightbox.Portal>
    <Lightbox.Backdrop />
    <Lightbox.Content>
      <Lightbox.Slides>
        <Lightbox.Slide>
          <Lightbox.Item index={0}>
            <Lightbox.Zoom>
              <Lightbox.Media>
                <img alt="" />
              </Lightbox.Media>
            </Lightbox.Zoom>
          </Lightbox.Item>
        </Lightbox.Slide>
      </Lightbox.Slides>
      <Lightbox.Counter />
      <Lightbox.ZoomOut aria-label="Zoom out" />
      <Lightbox.ZoomIn aria-label="Zoom in" />
      <Lightbox.Close aria-label="Close" />
      <Lightbox.Caption />
    </Lightbox.Content>
  </Lightbox.Portal>
</Lightbox.Root>

• State & lifecycle

  Controlled open/index, createHandle, and open-change callbacks.

• Composition

  Slides + Zoom chrome, media fill / fit-box sizing, and itemCount.

• Next.js Image

  next/image with Ramka — destination blur only when that item has no trigger image.

• View transitions

  Morph refs (on by default), crossfade, morphTo, and scrollTriggerIntoView.

• Gestures

  Pull-to-dismiss, zoom bridge, keyboard, and what wins when.

• RTL support

  Reading direction, what mirrors and what stays physical, and styling notes.

• API reference

  Props, data attributes, and CSS variables for every part.

Browse product demos under Examples. Guides above are canonical for behavior; examples are compositions.