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)

Default Components

The following components are included by default:

Headings

All headings (h1 - h6) are automatically given an ID based on their content, which allows for linking directly to sections.

Code Blocks

Syntax highlighting is enabled by default with support for:

• Line highlighting
• Word highlighting
• Line numbers
• Copy button
• Title/filename display

Links

Internal links use next/link for client-side navigation. External links are automatically marked with target="_blank" and rel="noreferrer noopener".

Images

Images are optimized using next/image when using built-in content sources.

Customizing Components

You can override any default component by passing your own implementation:

import defaultMdxComponents from 'fumadocs-ui/mdx';

<MDX
  components={{
    ...defaultMdxComponents,
    // Override the heading component
    h1: ({ children }) => (
      <h1 className="text-4xl font-bold">{children}</h1>
    ),
  }}
/>

Adding Custom Components

You can add any React component to be used in your MDX files:

import defaultMdxComponents from 'fumadocs-ui/mdx';
import { MyCustomComponent } from '@/components/my-custom';

<MDX
  components={{
    ...defaultMdxComponents,
    MyCustomComponent,
  }}
/>

Then use it in your MDX:

<MyCustomComponent prop="value" />