Image Zoom

[DataHawker]

I'm dumb. How do I get the image zoom to work? I just know how to bring in images by ( ) I have read the docs like 20 times but I can't see where to make this work. Do I have to update the [slug] page and import it into the DocBody?

[fuma-nama]

Add the component to your MDX components prop in docs page.tsx

See #840 (reply in thread) for details

[DataHawker]

Thanks. I got it to work. It's definitely out of the norm for me. Do you have any good recommendations to add the aviator to the right of the theme selector for a dropdown?

[Gitstar-OC]

Add it like this, in your app/docs/page.tsx

import { ImageZoom } from "fumadocs-ui/components/image-zoom";
      <DocsBody>
        <MDX
          components={{
            ...defaultMdxComponents,
            img: props => <ImageZoom {...props as any} />
            }}
        />
      </DocsBody>