Fumadocs MDX

Installation

The adapter is included in fumapress, install Fumadocs MDX as a dependency:

npm i fumadocs-mdx

Setup

Fumadocs MDX needs two pieces of configuration:

The Vite plugin.
Collections defined with fumadocs-mdx/macro in press.config.tsx, plus the Fumapress adapter.

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import press from "fumapress/vite";
import { fumadocsMdx } from "fumadocs-mdx/vite";

export default defineConfig({
  plugins: [
    press(),
    fumadocsMdx(),
    tailwindcss(),
  ],
});

Start the dev server and write content under your collection directory.

Options

The adapter only handle body rendering, see the Fumadocs MDX documentation for other available configurations.

MDX Components

By default, fumadocsMdx() renders pages with Fumadocs UI's built-in MDX components.

Override getMdxComponents to add custom components:

press.config.tsx

import { defineConfig } from "fumapress";
import { fumadocsMdx } from "fumapress/adapters/mdx";
import { defineDocs } from "fumadocs-mdx/macro";
import defaultMdxComponents, { createRelativeLink } from "fumadocs-ui/mdx";
import { TypeTable } from "fumadocs-ui/components/type-table";

const docs = defineDocs({
  dir: "content/docs",
  docs: { async: true },
});

export default defineConfig({
  content: docs.toFumadocsSource(),
}).adapters(
  fumadocsMdx({
    async getMdxComponents(page) {
      const source = await this.getLoader();

      return {
        ...defaultMdxComponents,
        TypeTable,
        a: createRelativeLink(source, page),
      };
    },
  }),
);

Fumadocs MDX

Installation

Setup

Options

MDX Components

On this page