---
title: Zoomable Image
description: Allow zoom-in images in your documentation
preview: zoomImage
---

## Usage

Replace `img` with `ImageZoom` in your MDX components.

> A default `sizes` property will be defined if not specified

```tsx title="page.tsx"
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
import defaultMdxComponents from 'fumadocs-ui/mdx';

<MDX
  components={{
    ...defaultMdxComponents,
    img: (props) => <ImageZoom {...(props as any)} />,
  }}
/>;
```
