Quick Start

Introduction

fumadocs-core is the core of Fumadocs. It makes developing a Next.js docs easier, built for App Router. It offers server-side functions and headless components.

• Search (built-in: Flexsearch, Algolia Search)
• Breadcrumb, Sidebar, TOC Components
• Additional utilities

npm install fumadocs-core

Setup

Choose a Source

It has native support for Fumadocs MDX and ContentLayer, but any kind of formats and sources are allowed.

You can refer to this guide to learn how to use Contentlayer with fumadocs-core.

Build Page Tree

A page tree refers to the structured data of all pages. It is essential for implementing a sidebar, or other navigation elements.

export const tree = [
  {
    type: 'page',
    name: 'Quick Start',
    url: '/docs',
  },
  {
    type: 'separator',
    name: 'Guides',
  },
  {
    type: 'page',
    name: 'Example',
    url: '/docs/example',
  },
];

You can generate the tree using our built-in Source API, the adapter for your content source, or end up with writing your own.

Create MDX file

Create /content/docs/index.mdx:

---
title: Quick Start
description: My cool docs
---

Hello World

Styling & Fun

Start styling your docs with headless components.

<article>
  <nav>
    <p>My App</p>
    <SearchToggle />
  </nav>
  <Sidebar />
  <MDXContent />
  <TOC />
</article>

Enjoy!

It offers simple document searching as well as components for building a good docs. It is made for flexibility and speed.