Fumadocs MDX

InstallationCopy Anchor Link

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

npm i fumadocs-mdx

SetupCopy Anchor Link

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.

FrontmatterCopy Anchor Link

With pageSchema, pages support the following frontmatter fields:

The adapter also reads fields your schema adds:

• date: the creation date, used by Blog, RSS and changelog entries.
• tags, authors, image: blog post fields, included in blogPageSchema, see Blog.

For example, to support date:

import { pageSchema } from "fumapress/adapters/mdx/schema";
import { defineDocs } from "fumadocs-mdx/macro";
import { z } from "zod";

const docs = defineDocs({
  dir: "content",
  docs: {
    schema: pageSchema.extend({
      date: z.coerce.date().optional(),
    }),
  },
});

The last modified date comes from git history when the collection sets lastModified: true.

OptionsCopy Anchor Link

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

MDX ComponentsCopy Anchor Link

By default, fumadocsMdx() renders pages with Fumadocs UI's built-in MDX components: the Markdown elements, plus Card, Cards, and Callout. Other components such as Tabs, Steps, and Files are not registered, import them inside the MDX file, or register them globally.

Override getMdxComponents to add custom components:

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),
      };
    },
  }),
);