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.

Glass Layout

nav

{ title }object

themeSwitch

{ enabled, mode }object

searchToggle

{ enabled }object

sidebar

{ collapsible }object

npx @fumadocs/cli@latest customize

UsageCopy Anchor Link

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

import { DocsLayout } 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 (
    <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/glass/page';

StylesCopy Anchor Link

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';

ConfigurationsCopy Anchor Link

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 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 in the sidebar.

import { DocsLayout } 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 (
    <DocsLayout
      {...baseOptions()}
      tabs={
        {
          // customize tabs
        }
      }
      tree={source.getPageTree()}
    >
      {children}
    </DocsLayout>
  );
}

AI ChatCopy Anchor Link

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, the layout places your chat panel beside the page on wide screens, and floats it over the page on smaller ones.

'use client';
import { DocsLayout } from 'fumadocs-ui/layouts/glass';
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

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 { DocsLayout } from 'fumadocs-ui/layouts/glass';

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