---
title: Import MDX Files
description: Importing MDX files directly.
---

## Introduction

MDX files will be compiled into JavaScript with exports like:

- `default`: the main component.
- `frontmatter`: frontmatter data.
- other properties generated by remark/rehype plugins.

Hence, they can also be used as a page, or components that you can import.

### Using as Component

You can import them as a component:

```tsx title="app/my-page.tsx"
import MyPage from '@/content/page.mdx';
import { getMDXComponents } from '@/components/mdx';

export default function Page() {
  return (
    <div className="prose">
      {/* pass MDX components and render it */}
      <MyPage components={getMDXComponents()} />
    </div>
  );
}
```

### Using as Page

On Next.js, you can use `page.mdx` instead of `page.tsx` for creating a new page under the app directory.

```mdx tab="app/my-page/page.mdx"
---
title: My Page
---

export { default } from '@/components/layouts/page';

# Hello World

This is my page.
```

```tsx tab="components/layouts/page.tsx"
import type { ComponentProps } from 'react';

export default function Content(props: ComponentProps<'main'>) {
  return (
    <main className="px-8 py-12">
      <article className="prose">{props.children}</article>
    </main>
  );
}
```

It doesn't have **MDX components** by default, you have to provide them:

```tsx tab="components/mdx.tsx"
import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultMdxComponents, // for Fumadocs UI
    ...components,
  } satisfies MDXComponents;
}

// export a `useMDXComponents()` that returns MDX components
export const useMDXComponents = getMDXComponents; // [!code ++]
```

```ts tab="source.config.ts"
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    // Path to import your `components/mdx.tsx` above. [!code ++]
    providerImportSource: '@/components/mdx',
  },
});
```

<Callout title="Other Frameworks?">

Other React.js frameworks like Tanstack Start usually prefer explicit declaration of loaders, it's recommended to use them as components in your pages instead.

</Callout>
