Zoomable Image

npx @fumadocs/cli@latest add image-zoom

UsageCopy Anchor Link

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.

![Test](/banner.png)

Image OptimizationCopy Anchor Link

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

LightboxCopy Anchor Link

Zoomable images inside <Lightbox /> open in one viewer, browse them with arrow keys, swipes or the side buttons.

Wrap your page content to browse every image of the page:

import { Lightbox } from 'fumadocs-ui/components/image-zoom';

<DocsBody>
  <Lightbox>
    <MDX components={getMDXComponents()} />
  </Lightbox>
</DocsBody>;

CaptionCopy Anchor Link

The image title is shown as caption.

![Notebook Layout](/notebook.png 'Tab mode: navbar')

Pass caption for rich content like links.

<ImageZoom
  src="/notebook.png"
  alt="Notebook Layout"
  caption={
    <>
      See <a href="/docs/ui/layouts/notebook">Notebook Layout</a>
    </>
  }
/>

GalleryCopy Anchor Link

To browse a set of images on its own, wrap them in another <Lightbox />, for example as a grid:

<Lightbox>
<div className="not-prose grid grid-cols-2 gap-2">

![Light Mode](/light.png)

![Dark Mode](/dark.png)

</div>
</Lightbox>