Spacious Layout

A less compact version of <DocsLayout />, the page sits in an inset panel beside the sidebar, with page-level actions at the top of the panel.

npx @fumadocs/cli@latest customize

UsageCopy Anchor Link

Enable the Spacious layout with fumadocs-ui/layouts/spacious.

import { DocsLayout } from 'fumadocs-ui/layouts/spacious';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions()} tree={source.getPageTree()}>
      {children}
    </DocsLayout>
  );
}

Make sure to update your page import too:

import { ... } from 'fumadocs-ui/layouts/docs/page';
import { ... } from 'fumadocs-ui/layouts/spacious/page';

StylesCopy Anchor Link

Like Glass layout, Spacious layout styles are not bundled into the CSS preset, so you don't pay for them unless you use the layout. Import them in your Tailwind CSS file:

@import 'tailwindcss';
@import 'fumadocs-ui/css/generated/spacious.css';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

ConfigurationsCopy Anchor Link

The options are inherited from Docs Layout, with minor differences:

• the sidebar option only accepts defaultOpenLevel and prefetch, the sidebar is always collapsible.
• additional options (see below).

Layout TabsCopy Anchor Link

Configure Layout Tabs with the tabs prop, see the linked docs for how to add them. Tabs are shown as a dropdown at the top of sidebar.

import { DocsLayout } from 'fumadocs-ui/layouts/spacious';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      {...baseOptions()}
      tabs={
        {
          // customize tabs
        }
      }
      tree={source.getPageTree()}
    >
      {children}
    </DocsLayout>
  );
}

AI ChatCopy Anchor Link

Pass an aiChat object with the open state and a change handler to show Ask AI in the layout.

With the panel option, the layout renders your chat panel for you: it's docked beside the page on wide screens (the table of contents moves into the page header), and floats over the page on smaller screens.

'use client';
import { DocsLayout } from 'fumadocs-ui/layouts/spacious';
import { useState } from 'react';

export function Layout({ children }) {
  const [open, setOpen] = useState(false);

  return (
    <DocsLayout
      aiChat={{
        open,
        onOpenChange: setOpen,
        panel: <MyChat />,
      }}
      // ...
    >
      {children}
    </DocsLayout>
  );
}

SlotsCopy Anchor Link

Spacious layout exposes a slots option to override its parts, in addition to the shared slots (navTitle, themeSwitch, searchTrigger, languageSelect).

import { DocsLayout } from 'fumadocs-ui/layouts/spacious';

<DocsLayout
  slots={{
    actions: MyActions,
  }}
  // ...
/>;

Docs PageCopy Anchor Link

The page component is similar to Docs Page, with a few differences:

• The table of contents uses the block style by default.
• tableOfContentPopover configures the table of contents dropdown in page header, and the table of contents bar on mobile.
• slots.toc accepts a dropdown component for the dropdown in page header.
• There is no container slot.