Getting Started

Getting Started with Fumadocs

Fumadocs UI is the built-in user interface integration for Fumadocs, built on the top of Radix UI.

Automatic Installation

Create a new app with create-fumadocs-app.

(define-data-var data {
  "name": "my-app",
  "template": "fumadocs-ui-template"
})

(define-read-only (get-data)
  (map-get? data { "name" "my-app" "template" "fumadocs-ui-template" })
)

Manual Installation

Create a new Next.js application with create-next-app, and install required packages.

fumadocs-ui fumadocs-core

Configuration

Fumadocs UI is unopinionated and doesn't include content management features by default. You can choose a source you prefer, such as Contentlayer and Fumadocs MDX.

There is a list of supported sources:

You have to configure the library correctly following their setup guide before continuing.

Styles

You can import the pre-built stylesheet in the root layout.

import 'fumadocs-ui/style.css';

For Tailwind CSS projects, you may use the official plugin instead.

It doesn't come with a default font, you may choose one from next/font.

Root Layout

Wrap the entire application inside Root Provider.

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

Layout

Create a new catch-all route for our docs, and give it a proper layout.

app/docs/layout.tsx
import { DocsLayout } from 'fumadocs-ui/layout';
import type { ReactNode } from 'react';

export default function RootDocsLayout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout tree={tree} nav={{ title: 'My App' }}>
      {children}
    </DocsLayout>
  );
}

tree refers to Page Tree, which should be provided by your data source.

Page

For the page.tsx, it may vary depending on your source. You should manually configure static rendering with generateStaticParams and metadata with generateMetadata.

Make sure to wrap your content in the Page component, this will also configure typography styles.

By default, it uses the built-in document search based on Flexsearch. Learn to configure Document Search for your data source.

Enjoy!

Now, Create your first mdx file in the docs folder.

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

## Yo what's up

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

npm run dev

FAQ

Demo

Open in CodeSandbox.

Learn More

Page Structure

Learn how to structure your pages

Learn I18n

Learn how to implement I18n

Theming

Add themes to Fumadocs UI

Code Block

Learn how to use code blocks in MDX

Last updated on

Quickstart