Lightbox

Props

Prop	Type	Default	Description
`media`	`ProductMedia[]`	required	Images and/or a 360° video to display
`initialIndex`	`number`	`0`	Which item to show first
`onClose`	`() => void`	required	Called when user closes the lightbox

Usage

const [lightboxIndex, setLightboxIndex] = useState<number | null>(null)

<button onClick={() => setLightboxIndex(0)}>Open</button>

{lightboxIndex !== null && (
  <Lightbox
    media={media}
    initialIndex={lightboxIndex}
    onClose={() => setLightboxIndex(null)}
  />
)}

Escape — close
ArrowLeft / ArrowRight — previous / next item

360° video

When a video360 item is active, a scrub bar is always visible (desktop and mobile). Drag the thumb left/right to rotate the video.

Best practices

Do: Render Lightbox conditionally ({idx !== null && <Lightbox ... />}) and control open/close state in the consumer. The consumer owns whether the lightbox is open.

Don't: Keep Lightbox always mounted — it uses fixed positioning and will block page interactions when open.

Quality checklist

role="dialog" + aria-modal="true" on the overlay
Keyboard: Escape closes, ArrowLeft/ArrowRight navigate
Close and nav buttons have aria-label
Scrub bar always visible for 360° items (no hover dependency inside Lightbox)
Tokens only — no hardcoded colours