ImageLightbox

A fullscreen image viewer rendered into document.body. It traps focus, locks page scroll and returns focus to the opener on close. Close with the X button, a click on the backdrop or Escape. With more than one image it shows previous and next buttons, dots and a counter, and ArrowLeft and ArrowRight navigate with wrap-around. UserMessage already opens it for attached images; use it directly for images elsewhere, such as tool output. It renders nothing when closed or when the active image has no url.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
API reference
Prop
Type
Required
open
boolean
Yes
Whether the overlay is open
onClose
() => void
Yes
Close handler, wired to overlay click, X button and Esc key
images
LightboxImage[]
Yes
Full set of images for gallery navigation
initialIndex
number
No
Index in `images` to start on, `0` by default
className
string
No
style
React.CSSProperties
No