Zoomable Image

Allow zoom-in images in your documentation

banner

Usage

Replace img with ImageZoom in your MDX components.

app/docs/[[...slug]]/page.tsx

import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
import defaultMdxComponents from 'fumadocs-ui/mdx';

return (
  <MdxContent
    components={{
      ...defaultMdxComponents,
      img: (props) => <ImageZoom {...(props as any)} />,
      // other Mdx components
    }}
  />
);

Now image zoom will be automatically enabled on all images.

![Test](/banner.png)

Image Optimization

A default sizes property will be defined for Next.js <Image /> component if not specified.

Table of Contents

Image Optimization

Zoomable Image | Claude Skills Learning Center - Master Agent Skills