---
title: "Image zoom"
description: "An image that zooms in to fill the screen when clicked."
url: https://docscn.dev/docs/components/image-zoom
lastModified: 2026-10-08T07:54:30.000Z
---

# Image zoom (/docs/components/image-zoom)

> An image that zooms in to fill the screen when clicked.

<ImageZoom src="gradient" alt="A gradient" />

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/image-zoom
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/image-zoom
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/image-zoom
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/image-zoom
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

`ImageZoom` takes the props of Next.js' `Image`. To make every image in your content zoomable, render Markdown images with it in `components/mdx.tsx`:

```tsx title="components/mdx.tsx"
import {
  ImageZoom,
  type ImageZoomProps,
} from "@/components/docs/components/image-zoom";

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultMdxComponents,
    img: (props) => <ImageZoom {...(props as ImageZoomProps)} />,
    ...components,
  } satisfies MDXComponents;
}
```

It's built on [react-medium-image-zoom](https://github.com/rpearce/react-medium-image-zoom). Installing it adds the styles the zoomed image needs to your global stylesheet, with the page's `--background` behind the image.

## Props [#props]

<TypeTable
  type="{
  zoomInProps: {
    description: (
      <>
        Props for the zoomed-in image, such as a higher-resolution{&#x22; &#x22;}
        <code>{&#x22;src&#x22;}</code>.
      </>
    ),
    type: 'ComponentProps<&#x22;img&#x22;>',
  },
  rmiz: {
    description: <>Props for react-medium-image-zoom.</>,
    type: &#x22;UncontrolledProps&#x22;,
  },
}"
/>