Display

Image zoom

Click an image to see it full screen over a blurred backdrop, on react-medium-image-zoom.

packages/design-system/components/ui/image-zoom.tsx

Examples

Builtwell placeholder artwork
Click to zoom, click or Escape to close

Anatomy

  1. 01Wrapper
  2. 02The image, zoom-in cursor
  3. 03Dialog, blurred background/80
  4. 04Unzoom button

Usage

import { ImageZoom } from "@repo/design-system/components/ui/image-zoom";
import Image from "next/image";

<ImageZoom>
  <Image src={src} alt="The homepage on a phone" width={768} height={612} />
</ImageZoom>

Props

PropTypeDefaultDescription
isZoomed / onZoomChangeboolean / (zoomed: boolean) => voidnoneControl it from outside.
zoomMarginnumber0Space around the zoomed image.
backdropClassNamestringnoneAdded to the dialog, after the blurred backdrop.
classNamestringnoneMerged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Do

  • Use it on screenshots and detail shots people will want to inspect.

Don't

  • Use it on images that are already full width.