Glass Layout

A docs layout built around floating, translucent (glass-like) panels: the sidebar and header sit on top of the content as rounded, blurred surfaces rather than fixed columns.

npx @fumadocs/cli@latest customize

Usage

Enable the Glass layout with fumadocs-ui/layouts/glass.

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

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

Make sure to update your page import too:

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

Styles

Unlike other layouts, Glass 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/glass.css';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

Configurations

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

• there is no sidebar option, Glass layout is more opinionated than the default one.
• additional options (see below).

Layout Tabs

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

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

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

AI Chat

The floating header can render an Ask AI button. Pass an aiChat object with the open state and a change handler to control your AI search dialog.

'use client';
import { GlassLayout } from 'fumadocs-ui/layouts/glass';
import { useState } from 'react';

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

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

Slots

Like other layouts, Glass layout exposes a slots option to override the built-in header, sidebar, and sidebarDrawer (mobile) components, in addition to the shared slots (navTitle, themeSwitch, searchTrigger, languageSelect).

import { GlassLayout } from 'fumadocs-ui/layouts/glass';

<GlassLayout
  slots={{
    header: MyHeader,
  }}
  // ...
/>;