LogoMkSaaS Docs
    LogoMkSaaS Docs
    Homepage

    Introduction

    Quick StartWhat is FumadocsComparisons

    Setup

    Manual InstallationStatic Export

    Writing

    MarkdownInternationalization

    UI

    OverviewThemesSearch
    Components
    AccordionBannerCode Block (Dynamic)FilesGitHub InfoZoomable ImageInline TOCRoot ToggleStepsTabsType Table
    MDX
    X (Twitter)
    Components

    Zoomable Image

    Allow zoom-in images in your documentation

    banner

    Usage

    Replace img with ImageZoom in your MDX components.

    app/docs/[[...slug]]/page.tsx
    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.

    GitHub Info

    Display your GitHub repository information

    Inline TOC

    Add Inline TOC into your documentation

    Table of Contents

    Usage
    Image Optimization