Spacious Layout

See Fumadocs Spacious Layout for the available props.

Requires Fumadocs UI v16.16.0 or above (@fumadocs/base-ui). Its styles are not in the Fumadocs UI preset, import them:

src/app.css

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

press.config.tsx

import { defineConfig } from "fumapress";
import { createSpaciousLayoutPage } from "fumapress/layouts/spacious";

const SpaciousLayout = createSpaciousLayoutPage<typeof config.$context>();

const config = defineConfig({
  // ...
  renderPage: (props) => <SpaciousLayout {...props} />,
});

export default config;

It accepts the same options as the docs layout, and the AI plugin docks its chat beside the page on wide screens.

Important to know

The spacious layout is a client component, layoutProps cannot contain unserializable values (e.g. functions) unless they are supported slots.
On desktop, the page scrolls inside the panel instead of the window.

Spacious Layout

On this page