Zoomable Image

Galleries 24

About

Click-to-zoom image component with a medium.com-style lightbox that expands on click and closes on scroll.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Zoomable Image to your project and fits it to your theme.

Code

How Zoomable Image is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ZoomableImage from "@/components/ui/zoomable-image";

export default function Default() {
  return (
    <div className="flex flex-col items-center gap-3 p-8">
      <p className="text-sm text-muted-foreground">
        click the image to zoom in, click again or scroll to close.
      </p>
      <ZoomableImage
        src="https://cdn.21st.dev/assets/mirror/ca/ca905300194e1d0ffc3223cfd3ba226477f36706c5461ffcd97c6f9e15344b8e.jpg"
        alt="A beautiful landscape"
        className="rounded-lg w-full max-w-md"
      />
    </div>
  );
}