Component reference

ImageLightbox

A full-screen viewer for one image.

Preview

ImageLightbox has no story of its own; this one draws it as part of a composed scene.

Sources, JSON and images

packages/meowtail/stories/content-views.stories.tsxline 18tsx

render: () => (
  <Stack>
    <WebBlock
      kind="search"
      answer="Sources are provided by the host; the component does not run searches."
      sources={[
        { title: "Example", url: "https://example.com", snippet: "A verifiable source note." },
        { url: "javascript:alert(1)", title: "A source that cannot be navigated" },
      ]}
    />
    <JsonTree
      data={{ name: "Meowland", options: { theme: "DeepSeek", enabled: true }, items: [1, 2, 3] }}
    />
    <JsonBlock text={'{"broken":'} />
    <ImageLightbox
      src={sampleImage}
      alt="Blue circle example"
      caption="Image preview · Escape returns to the original button"
    />
  </Stack>
)

Installation

bun add meowtail

Usage

usage.tsts

import { ImageLightbox } from "meowtail";

API reference

Native modal top layer keeps the preview independent of transformed ancestors.

Props

Prop	Type	Default
`src`Required	`string`	–
`alt`Required	`string`	–
`caption`	`string`	–
`trigger`	`Child`	`"Preview image"`
`onClose`	`() => void`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

roottriggerdialogimagecaptionclose

Registry

The component is registered as image-lightbox in the meowtail component registry.