Skip to Content
Fumadocs

Manual Installation

Add Fumadocs to an existing Astro project.

You can also let Fumadocs CLI set it up for you:

npx @fumadocs/cli init

Prerequisites

Before continuing, make sure you have configured:

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

This guide uses Astro content collections as the content source. @fumadocs/astro compiles them with Fumadocs and renders their MDX as React islands.

Getting Started

Install the packages:

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

Styles

Add the following to your Tailwind CSS file:

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

Integration

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()],
  },
});

Content Collections

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.

Routes

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 });

The search route uses ZBSearch. See Document Search to configure it.

Finish

Start the dev server and write your docs in content/docs:

content/docs/index.mdx
---
title: Hello World
---

## Introduction

I love Fumadocs.

How is this guide?

Last updated on

On this page

PrerequisitesGetting StartedStylesIntegrationContent CollectionsRoutesFinish
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep