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

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

Home Layout

Usage

目次

Home Layout

Usage

目次