LogoMusic FX Docs
LogoMusic FX Docs
Homepage

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewThemesSearch
Components
MDX
X (Twitter)

Overview

An overview of Fumadocs UI

Architecture

Page Tree

Navigation elements like sidebar take a Page Tree to render navigation links, it's a tree that describes all available pages and folders.

Normally, it is generated from your file structure using loader(), you can learn how to organize pages.

Customisation

Layouts

You can use the exposed options of different layouts:

Docs Layout

Layout for docs

Docs Page

Layout for docs content

Notebook Layout

A more compact version of Docs Layout

Home Layout

Layout for other pages

Components

Fumadocs UI also offers styled components for interactive examples to enhance your docs, you can customise them with exposed props like style and className.

See Components.

Design System

Since the design system is built on Tailwind CSS, you can customise it with CSS Variables.

CLI

If none of them suits you, Fumadocs CLI is a tool to install Fumadocs UI components and layouts to your codebase, similar to Shadcn UI. Allowing you to fully customise Fumadocs UI:

npx fumadocs add

Internationalization

Support multiple languages in your documentation

Themes

Add Theme to Fumadocs UI

Table of Contents

Architecture
Page Tree
Customisation
Layouts
Components
Design System
CLI