MDX

Usage

The default MDX components include Cards, Callouts, Code Blocks and Headings.

import defaultMdxComponents from 'fumadocs-ui/mdx';

Relative Link

To support links with relative file path in href, override the default a component with:

import { createRelativeLink } from 'fumadocs-ui/mdx';
import { source } from '@/lib/source';

const page = source.getPage(['...']);

return (
  <MdxContent
    components={{
      // override the `a` tag
      a: createRelativeLink(source, page),
    }}
  />
);

[My Link](./file.mdx)

Example: ../(integrations)/open-graph.mdx

Server Component only.

Usage

Relative Link

Table of Contents