Zoomable Image
Allow zoom-in images in your documentation
Install to your codebase
Easier customization & control.
npx @fumadocs/cli@latest add image-zoomUsage
Replace img with ImageZoom in your MDX components.
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) {
return {
...defaultComponents,
img: (props) => <ImageZoom {...(props as any)} />,
...components,
} satisfies MDXComponents;
}Now image zoom will be automatically enabled on all images.
Image Optimization
On Next.js, a default sizes property will be defined for <Image /> component if not specified.
How is this guide?