Use as Page

Setup

You can use page.mdx instead of page.tsx for creating a new page under the app directory.

However, it doesn't have MDX components by default so you have to provide them:

mdx-components.tsx

import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
 
export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents, // for Fumadocs UI
    ...components,
  };
}
 
// export a `useMDXComponents()` that returns MDX components
export const useMDXComponents = getMDXComponents;

source.config.ts

import { defineConfig } from 'fumadocs-mdx/config';
 
export default defineConfig({
  mdxOptions: {
    // Path to import your `mdx-components.tsx` above.
    providerImportSource: '@/mdx-components',
  },
});

Usage

app/test/page.mdx

{/* this will enable Typography styles of Fumadocs UI */}
export { withArticle as default } from 'fumadocs-ui/page';
 
## Hello World

Setup

Usage

On this page