Fumadocs

MDX

Default MDX Components

Usage

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

import defaultMdxComponents from 'fumadocs-ui/mdx';

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.

Callout

Add callout to your docs

Card

Use the Card component in your MDX documentation

Code Block

Adding code blocks to your docs

Heading

Heading components for your MDX documentation

How is this guide?

Edit on GitHub

Type Table

A table for documenting types

Callout

Add callout to your docs

On this page