Zoomable Image
Allow zoom-in images in your documentation
Usage
Replace img
with ImageZoom
in your MDX components.
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.

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