LogoMkSaaS Docs
    LogoMkSaaS 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