Fumadocs
Components

Zoomable Image

Allow zoom-in images in your documentation

banner

Usage

Replace img with ImageZoom in your MDX components.

mdx-components.tsx
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
 
export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    img: (props) => <ImageZoom {...(props as any)} />,
    ...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.

How is this guide?

Edit on GitHub

GitHub Info

Display your GitHub repository information

Inline TOC

Add Inline TOC into your documentation

On this page