✨ Publier v1 is live — a polished docs platform built for the open web.
Skip to content

ImageZoom

Click-to-zoom lightbox image powered by medium-zoom, with a theme-aware backdrop.

The ImageZoom component from @publier/primitives wraps an image in a click-to-zoom lightbox. Behind the scenes it uses medium-zoom, attached on the client only, with a backdrop that uses the current theme’s background color.

Usage

import { ImageZoom } from '@publier/primitives';


<ImageZoom
  src="/screenshots/dashboard.png"
  alt="Publier dashboard overview"
  width={1280}
  height={720}
/>

Props

PropTypeDefaultDescription
srcstringrequiredImage source URL.
altstringrequiredAlt text for accessibility.
widthnumberundefinedOptional intrinsic width.
heightnumberundefinedOptional intrinsic height.
classstringundefinedExtra CSS class appended to the <img>. The class publier-image-zoom is always applied.

Behaviour

  • Renders a plain <img> (with loading="lazy" and decoding="async") so it degrades gracefully without JavaScript.
  • The lightbox uses a 24 px margin and a backdrop of --color-base-100 at 92% opacity.
  • The lightbox tears down cleanly when the page unmounts.

Usage in .astro and MDX

Drop <ImageZoom> straight into MDX or .astro — no client directive required. The image still renders without JavaScript; click-to-zoom kicks in once the page is interactive.