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

    Home Layout

    Shared layout for other pages

    Usage

    Add a navbar and search dialog across other pages.

    /app/(home)/layout.tsx
    import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { baseOptions } from '@/app/layout.config';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
}

    Create a Route Group to share the same layout across multiple pages.

    page.tsx
    layout.tsx

    Docs Layout

    The layout of documentation

    Notebook

    A more compact version of Docs Layout

    Table of Contents

    Usage