LogoMkSaaS Docs
    LogoMkSaaS Docs
    Homepage

    Introduction

    Quick StartWhat is FumadocsComparisons

    Setup

    Manual InstallationStatic Export

    Writing

    MarkdownInternationalization

    UI

    OverviewThemesSearch
    Components
    MDX
    Docs LayoutHome LayoutNotebookDocs PageRoot Provider
    X (Twitter)
    Layouts

    Notebook

    A more compact version of Docs Layout

    Usage

    Enable the notebook layout with fumadocs-ui/layouts/notebook, it's a more compact layout than the default one.

    Notebook Layout Preview

    layout.tsx
    import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/app/layout.config';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      {...baseOptions}
      // the position of navbar
      nav={{ ...baseOptions.nav, mode: 'top' }}
      // the position of Sidebar Tabs
      tabMode="navbar"
      tree={source.pageTree}
    >
      {children}
    </DocsLayout>
  );
}

    Home Layout

    Shared layout for other pages

    Docs Page

    A page in your documentation

    Table of Contents

    Usage