Glass Layout

Overview

Use the glass layout for docs pages that should keep docs features, but use the glass appearance from Fumadocs UI: the sidebar and header sit on top of the content as floating, translucent panels.

It requires Fumadocs UI v16.12.0 or above.

Setup

Unlike other layouts, glass layout styles are not bundled into the Fumadocs UI CSS preset. Import them in src/app.css:

src/app.css

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

Config

Define the layout and pass it through renderPage.

press.config.tsx

import { defineConfig } from "fumapress";
import { createGlassLayoutPage } from "fumapress/layouts/glass";

const GlassLayout = createGlassLayoutPage<typeof config.$context>();

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

export default config;

The glass layout accepts the same kind of render option as the docs layout:

press.config.tsx

import { defineConfig } from "fumapress";
import { createGlassLayoutPage } from "fumapress/layouts/glass";

const GlassLayout = createGlassLayoutPage<typeof config.$context>({
  async render(page) {
    let pageTree = (await this.getLoader()).getPageTree(page.locale);

    return {
      layoutProps: {
        tree: pageTree,
      },
      pageProps: {
        full: true,
      },
    };
  },
});

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

export default config;

The render function can return page props, layout props, markdown URL, last modified date, or a custom body.

Important to know

The glass layout is a client component, you cannot pass unserializable values (e.g. functions) in layoutProps unless they are supported slots.

AI Chat

The AI plugin integrates with the glass layout natively: the Ask AI trigger is shown in the layout header & sidebar, using its aiChat option.

Glass Layout

Overview

Setup

Config

AI Chat

On this page