Astro

Getting Started

Before continuing, make sure to configure:

Node.js 22.23.4 or later (required by Astro).
Tailwind CSS 4.

Astro uses its own content collections instead of Fumadocs MDX. @fumadocs/astro compiles collections with Fumadocs and renders MDX as React islands.

Installation

npm i fumadocs-core fumadocs-ui @fumadocs/astro @astrojs/react react react-dom @types/mdx

Styles

Add the following to your Tailwind CSS file:

src/styles/global.css

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

Create Pages

Add the Fumadocs integration to your Astro config:

astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import fumadocs from '@fumadocs/astro';

export default defineConfig({
  integrations: [fumadocs({ components: './src/components/mdx.tsx' })],
  vite: {
    plugins: [tailwindcss()],
  },
});

Define your content collections:

src/content.config.ts

import { defineCollection } from 'astro:content';
import { metaLoader, pageLoader } from '@fumadocs/astro/loaders';

export const collections = {
  docs: defineCollection({ loader: pageLoader() }),
  meta: defineCollection({ loader: metaLoader() }),
};

Create the Fumadocs source from your collections:

src/lib/source.ts

import { getCollection } from 'astro:content';
import { loader } from 'fumadocs-core/source';
import { toFumadocsSource } from '@fumadocs/astro/source';

export const source = loader({
  source: toFumadocsSource(await getCollection('docs'), await getCollection('meta')),
  baseUrl: '/docs',
});

To combine it with other sources in one loader(), pass { baseDir } as the third argument of toFumadocsSource() to place its files under a directory.

Create the following files:

import defaultMdxComponents from 'fumadocs-ui/mdx';
import { DocsBody } from 'fumadocs-ui/layouts/docs/page';
import type { MDXComponents } from 'mdx/types';

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

// for the Fumadocs integration, `wrapper` gives the content its prose styles
export default getMDXComponents({ wrapper: DocsBody });

Done

You can start writing documents at content/docs:

content/docs/index.mdx

---
title: Hello World
---

I love Fumadocs

Getting StartedCopy Anchor Link

InstallationCopy Anchor Link

StylesCopy Anchor Link

Create PagesCopy Anchor Link

DoneCopy Anchor Link

On this page

Getting Started

Installation

Styles

Create Pages

Done