ClaudeSkills
Browse documentation

Historical template

Zoomable Image

Allow zoom-in images in your documentation

Historical Fumadocs template

Historical template documentation, retained for existing links. It is not current ClaudeSkills product guidance.

View source
On this page

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.

![Test](/banner.png)

Image Optimization

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