Fumadocs
Components

Zoomable Image

Allow zoom-in images in your documentation

banner

Usage

Replace img with ImageZoom in your MDX components.

A default sizes property will be defined if not specified

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)} />,
  }}
/>;
Edit on GitHub

Previous

Files

Next

Inline TOC

On this page