Manual Installation

PrerequisiteCopy Anchor Link

Before continuing, make sure you have configured:

• Node.js 22.23.4 or later.
• Astro 7.
• Tailwind CSS 4.

Getting StartedCopy Anchor Link

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

npm i -D @types/react @types/react-dom @types/mdx

IntegrationCopy Anchor Link

Add the Fumadocs integration. It adds Fumadocs Markdown features to Astro's Sätteri processor, and the React and MDX integrations:

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

export default defineConfig({
  integrations: [fumadocs()],
  vite: {
    plugins: [tailwindcss()],
  },
});

The integration requires Sätteri, Astro's default Markdown processor. It throws if markdown.processor is set to another processor.

StylesCopy Anchor Link

Add the following to your Tailwind CSS file:

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

Fumadocs pages load src/styles/global.css, you don't have to import it.

Source FilesCopy Anchor Link

Create the content collections, source and Fumadocs config:

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

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

From src/fumadocs.config.ts, the integration creates docs pages, search, LLM routes and the 404 page.

Layout OptionsCopy Anchor Link

Create a layout module for the navbar title and links, see Layout Options.

Home PageCopy Anchor Link

Only /docs is generated, create a home page for / with HomeLayout.astro.

DoneCopy Anchor Link

You can start writing documents at content/docs:

---
title: Hello World
---

I love Fumadocs

Start the dev server, and open /docs.