Image Zoom

Click-to-zoom image component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring smooth transitions, backdrop blur, and mobile-friendly interactions.

react-medium-image-zoom

Loading component...

'use client';import Zoom, {  type ControlledProps,  type UncontrolledProps,} from 'react-medium-image-zoom';import { cn } from '@/lib/utils';export type ImageZoomProps = UncontrolledProps & {  isZoomed?: ControlledProps['isZoomed'];  onZoomChange?: ControlledProps['onZoomChange'];  className?: string;  backdropClassName?: string;};export const ImageZoom = ({  className,  backdropClassName,  ...props}: ImageZoomProps) => (  <div    className={cn(      'relative',      '[&_[data-rmiz-ghost]]:pointer-events-none [&_[data-rmiz-ghost]]:absolute',      '[&_[data-rmiz-btn-zoom]]:m-0 [&_[data-rmiz-btn-zoom]]:size-10 [&_[data-rmiz-btn-zoom]]:touch-manipulation [&_[data-rmiz-btn-zoom]]:appearance-none [&_[data-rmiz-btn-zoom]]:rounded-[50%] [&_[data-rmiz-btn-zoom]]:border-none [&_[data-rmiz-btn-zoom]]:bg-foreground/70 [&_[data-rmiz-btn-zoom]]:p-2 [&_[data-rmiz-btn-zoom]]:text-background [&_[data-rmiz-btn-zoom]]:outline-offset-2',      '[&_[data-rmiz-btn-unzoom]]:m-0 [&_[data-rmiz-btn-unzoom]]:size-10 [&_[data-rmiz-btn-unzoom]]:touch-manipulation [&_[data-rmiz-btn-unzoom]]:appearance-none [&_[data-rmiz-btn-unzoom]]:rounded-[50%] [&_[data-rmiz-btn-unzoom]]:border-none [&_[data-rmiz-btn-unzoom]]:bg-foreground/70 [&_[data-rmiz-btn-unzoom]]:p-2 [&_[data-rmiz-btn-unzoom]]:text-background [&_[data-rmiz-btn-unzoom]]:outline-offset-2',      '[&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:pointer-events-none [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:absolute [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:size-px [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:overflow-hidden [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:whitespace-nowrap [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip-path:inset(50%)] [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip:rect(0_0_0_0)]',      '[&_[data-rmiz-btn-zoom]]:absolute [&_[data-rmiz-btn-zoom]]:top-2.5 [&_[data-rmiz-btn-zoom]]:right-2.5 [&_[data-rmiz-btn-zoom]]:bottom-auto [&_[data-rmiz-btn-zoom]]:left-auto [&_[data-rmiz-btn-zoom]]:cursor-zoom-in',      '[&_[data-rmiz-btn-unzoom]]:absolute [&_[data-rmiz-btn-unzoom]]:top-5 [&_[data-rmiz-btn-unzoom]]:right-5 [&_[data-rmiz-btn-unzoom]]:bottom-auto [&_[data-rmiz-btn-unzoom]]:left-auto [&_[data-rmiz-btn-unzoom]]:z-[1] [&_[data-rmiz-btn-unzoom]]:cursor-zoom-out',      '[&_[data-rmiz-content="found"]_img]:cursor-zoom-in',      '[&_[data-rmiz-content="found"]_svg]:cursor-zoom-in',      '[&_[data-rmiz-content="found"]_[role="img"]]:cursor-zoom-in',      '[&_[data-rmiz-content="found"]_[data-zoom]]:cursor-zoom-in',      className    )}  >    <Zoom      classDialog={cn(        '[&::backdrop]:hidden',        '[&[open]]:fixed [&[open]]:m-0 [&[open]]:h-dvh [&[open]]:max-h-none [&[open]]:w-dvw [&[open]]:max-w-none [&[open]]:overflow-hidden [&[open]]:border-0 [&[open]]:bg-transparent [&[open]]:p-0',        '[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all',        '[&_[data-rmiz-modal-overlay="hidden"]]:bg-transparent',        '[&_[data-rmiz-modal-overlay="visible"]]:bg-background/80 [&_[data-rmiz-modal-overlay="visible"]]:backdrop-blur-md',        '[&_[data-rmiz-modal-content]]:relative [&_[data-rmiz-modal-content]]:size-full',        '[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform',        'motion-reduce:[&_[data-rmiz-modal-img]]:transition-none motion-reduce:[&_[data-rmiz-modal-overlay]]:transition-none',        backdropClassName      )}      {...props}    />  </div>);

Installation

npx shadcn@latest add https://www.shadcn.io/registry/image-zoom.json

npx shadcn@latest add https://www.shadcn.io/registry/image-zoom.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/image-zoom.json

bunx shadcn@latest add https://www.shadcn.io/registry/image-zoom.json

Features

Click-to-zoom - Instant image enlargement with click or tap using react-medium-image-zoom for React apps
Smooth transitions - Animated zoom in/out with customizable timing using CSS transforms and Tailwind CSS
Backdrop blur - Configurable background with blur effects and custom styling using TypeScript options
Controlled states - Programmatic zoom control with state management for Next.js applications
Mobile optimized - Touch-friendly interactions with reduced motion support using JavaScript event handling
Keyboard accessible - Full navigation support with escape key and focus management using shadcn/ui patterns
Open source - Free image zoom component with SVG and custom element support

Examples

Custom backdrop

Loading component...

'use client';import Zoom, {  type ControlledProps,  type UncontrolledProps,} from 'react-medium-image-zoom';import { cn } from '@/lib/utils';export type ImageZoomProps = UncontrolledProps & {  isZoomed?: ControlledProps['isZoomed'];  onZoomChange?: ControlledProps['onZoomChange'];  className?: string;  backdropClassName?: string;};export const ImageZoom = ({  className,  backdropClassName,  ...props}: ImageZoomProps) => (  <div    className={cn(      'relative',      '[&_[data-rmiz-ghost]]:pointer-events-none [&_[data-rmiz-ghost]]:absolute',      '[&_[data-rmiz-btn-zoom]]:m-0 [&_[data-rmiz-btn-zoom]]:size-10 [&_[data-rmiz-btn-zoom]]:touch-manipulation [&_[data-rmiz-btn-zoom]]:appearance-none [&_[data-rmiz-btn-zoom]]:rounded-[50%] [&_[data-rmiz-btn-zoom]]:border-none [&_[data-rmiz-btn-zoom]]:bg-foreground/70 [&_[data-rmiz-btn-zoom]]:p-2 [&_[data-rmiz-btn-zoom]]:text-background [&_[data-rmiz-btn-zoom]]:outline-offset-2',      '[&_[data-rmiz-btn-unzoom]]:m-0 [&_[data-rmiz-btn-unzoom]]:size-10 [&_[data-rmiz-btn-unzoom]]:touch-manipulation [&_[data-rmiz-btn-unzoom]]:appearance-none [&_[data-rmiz-btn-unzoom]]:rounded-[50%] [&_[data-rmiz-btn-unzoom]]:border-none [&_[data-rmiz-btn-unzoom]]:bg-foreground/70 [&_[data-rmiz-btn-unzoom]]:p-2 [&_[data-rmiz-btn-unzoom]]:text-background [&_[data-rmiz-btn-unzoom]]:outline-offset-2',      '[&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:pointer-events-none [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:absolute [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:size-px [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:overflow-hidden [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:whitespace-nowrap [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip-path:inset(50%)] [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip:rect(0_0_0_0)]',      '[&_[data-rmiz-btn-zoom]]:absolute [&_[data-rmiz-btn-zoom]]:top-2.5 [&_[data-rmiz-btn-zoom]]:right-2.5 [&_[data-rmiz-btn-zoom]]:bottom-auto [&_[data-rmiz-btn-zoom]]:left-auto [&_[data-rmiz-btn-zoom]]:cursor-zoom-in',      '[&_[data-rmiz-btn-unzoom]]:absolute [&_[data-rmiz-btn-unzoom]]:top-5 [&_[data-rmiz-btn-unzoom]]:right-5 [&_[data-rmiz-btn-unzoom]]:bottom-auto [&_[data-rmiz-btn-unzoom]]:left-auto [&_[data-rmiz-btn-unzoom]]:z-[1] [&_[data-rmiz-btn-unzoom]]:cursor-zoom-out',      '[&_[data-rmiz-content="found"]_img]:cursor-zoom-in',      '[&_[data-rmiz-content="found"]_svg]:cursor-zoom-in',      '[&_[data-rmiz-content="found"]_[role="img"]]:cursor-zoom-in',      '[&_[data-rmiz-content="found"]_[data-zoom]]:cursor-zoom-in',      className    )}  >    <Zoom      classDialog={cn(        '[&::backdrop]:hidden',        '[&[open]]:fixed [&[open]]:m-0 [&[open]]:h-dvh [&[open]]:max-h-none [&[open]]:w-dvw [&[open]]:max-w-none [&[open]]:overflow-hidden [&[open]]:border-0 [&[open]]:bg-transparent [&[open]]:p-0',        '[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all',        '[&_[data-rmiz-modal-overlay="hidden"]]:bg-transparent',        '[&_[data-rmiz-modal-overlay="visible"]]:bg-background/80 [&_[data-rmiz-modal-overlay="visible"]]:backdrop-blur-md',        '[&_[data-rmiz-modal-content]]:relative [&_[data-rmiz-modal-content]]:size-full',        '[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform',        'motion-reduce:[&_[data-rmiz-modal-img]]:transition-none motion-reduce:[&_[data-rmiz-modal-overlay]]:transition-none',        backdropClassName      )}      {...props}    />  </div>);

Custom margin

Loading component...

'use client';import Zoom, {  type ControlledProps,  type UncontrolledProps,} from 'react-medium-image-zoom';import { cn } from '@/lib/utils';export type ImageZoomProps = UncontrolledProps & {  isZoomed?: ControlledProps['isZoomed'];  onZoomChange?: ControlledProps['onZoomChange'];  className?: string;  backdropClassName?: string;};export const ImageZoom = ({  className,  backdropClassName,  ...props}: ImageZoomProps) => (  <div    className={cn(      'relative',      '[&_[data-rmiz-ghost]]:pointer-events-none [&_[data-rmiz-ghost]]:absolute',      '[&_[data-rmiz-btn-zoom]]:m-0 [&_[data-rmiz-btn-zoom]]:size-10 [&_[data-rmiz-btn-zoom]]:touch-manipulation [&_[data-rmiz-btn-zoom]]:appearance-none [&_[data-rmiz-btn-zoom]]:rounded-[50%] [&_[data-rmiz-btn-zoom]]:border-none [&_[data-rmiz-btn-zoom]]:bg-foreground/70 [&_[data-rmiz-btn-zoom]]:p-2 [&_[data-rmiz-btn-zoom]]:text-background [&_[data-rmiz-btn-zoom]]:outline-offset-2',      '[&_[data-rmiz-btn-unzoom]]:m-0 [&_[data-rmiz-btn-unzoom]]:size-10 [&_[data-rmiz-btn-unzoom]]:touch-manipulation [&_[data-rmiz-btn-unzoom]]:appearance-none [&_[data-rmiz-btn-unzoom]]:rounded-[50%] [&_[data-rmiz-btn-unzoom]]:border-none [&_[data-rmiz-btn-unzoom]]:bg-foreground/70 [&_[data-rmiz-btn-unzoom]]:p-2 [&_[data-rmiz-btn-unzoom]]:text-background [&_[data-rmiz-btn-unzoom]]:outline-offset-2',      '[&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:pointer-events-none [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:absolute [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:size-px [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:overflow-hidden [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:whitespace-nowrap [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip-path:inset(50%)] [&_[data-rmiz-btn-zoom]:not(:focus):not(:active)]:[clip:rect(0_0_0_0)]',      '[&_[data-rmiz-btn-zoom]]:absolute [&_[data-rmiz-btn-zoom]]:top-2.5 [&_[data-rmiz-btn-zoom]]:right-2.5 [&_[data-rmiz-btn-zoom]]:bottom-auto [&_[data-rmiz-btn-zoom]]:left-auto [&_[data-rmiz-btn-zoom]]:cursor-zoom-in',      '[&_[data-rmiz-btn-unzoom]]:absolute [&_[data-rmiz-btn-unzoom]]:top-5 [&_[data-rmiz-btn-unzoom]]:right-5 [&_[data-rmiz-btn-unzoom]]:bottom-auto [&_[data-rmiz-btn-unzoom]]:left-auto [&_[data-rmiz-btn-unzoom]]:z-[1] [&_[data-rmiz-btn-unzoom]]:cursor-zoom-out',      '[&_[data-rmiz-content="found"]_img]:cursor-zoom-in',      '[&_[data-rmiz-content="found"]_svg]:cursor-zoom-in',      '[&_[data-rmiz-content="found"]_[role="img"]]:cursor-zoom-in',      '[&_[data-rmiz-content="found"]_[data-zoom]]:cursor-zoom-in',      className    )}  >    <Zoom      classDialog={cn(        '[&::backdrop]:hidden',        '[&[open]]:fixed [&[open]]:m-0 [&[open]]:h-dvh [&[open]]:max-h-none [&[open]]:w-dvw [&[open]]:max-w-none [&[open]]:overflow-hidden [&[open]]:border-0 [&[open]]:bg-transparent [&[open]]:p-0',        '[&_[data-rmiz-modal-overlay]]:absolute [&_[data-rmiz-modal-overlay]]:inset-0 [&_[data-rmiz-modal-overlay]]:transition-all',        '[&_[data-rmiz-modal-overlay="hidden"]]:bg-transparent',        '[&_[data-rmiz-modal-overlay="visible"]]:bg-background/80 [&_[data-rmiz-modal-overlay="visible"]]:backdrop-blur-md',        '[&_[data-rmiz-modal-content]]:relative [&_[data-rmiz-modal-content]]:size-full',        '[&_[data-rmiz-modal-img]]:absolute [&_[data-rmiz-modal-img]]:origin-top-left [&_[data-rmiz-modal-img]]:cursor-zoom-out [&_[data-rmiz-modal-img]]:transition-transform',        'motion-reduce:[&_[data-rmiz-modal-img]]:transition-none motion-reduce:[&_[data-rmiz-modal-overlay]]:transition-none',        backdropClassName      )}      {...props}    />  </div>);

Use Cases

Product galleries - E-commerce image zoom for detailed product views
Documentation - Technical diagrams and screenshots with zoom capability
Portfolio sites - Photography and artwork display with full-size viewing
Content management - Media libraries with preview and zoom functionality

Implementation

Built on react-medium-image-zoom with customizable animations. Works with any image element or SVG. Supports controlled zoom states for complex interactions.

Reactimage-zoom

Installation

Features

Examples

Custom backdrop

Reactimage-zoom

Custom margin

Reactimage-zoom

Use Cases

Implementation

On this page