Quick Start

Introduction

Fumadocs can be broken down into two parts: Core and UI.

Core handles most of the logic, from search functionality, to MDX plugins.

Fumadocs UI is the official user interface for Fumadocs.

Terminology

For a better understanding of the docs, there are some common terminologies you should know:

Content Source: The source of your content. Fumadocs MDX, CMS and Contentlayer are examples of content source.

Page Tree: A tree of all the pages, separators and folders. It is essential for navigation elements. See Page Tree.

MDX File & Page: A MDX file could be located in a folder, or available remotely. Instead, MDX Page is only referring to page.mdx, which is already a page on its own.

You might need to be familiar with Next.js App Router to continue.

Automatic Installation

Create a new app with create-fumadocs-app, it requires Node.js 18+.

npx create-fumadocs-app

It will ask you the following questions:

• Which content source to use? (Recommended: Fumadocs MDX)
• Configure Tailwind CSS?
• Install dependencies?

After that, it will initialize a new fumadocs app. Now you can start hacking!

Enjoy!

Create your first mdx file in the docs folder.

---
title: Hello World
---
 
## Yo what's up

Run the app in development mode and see http://localhost:3000/docs.

npm run dev

FAQ

Some common questions you may encounter.

Learn More

New to here? Don't worry, we are welcome for your questions.

If you find anything confusing, please give your feedback on Github Discussion!

From Existing Codebase?

You can follow the Manual Installation guide to get started.