Fumadocs Documentation Patterns

# Fumadocs Documentation Patterns for Google Antigravity IDE

Build beautiful documentation sites with Fumadocs using Google Antigravity IDE. This guide covers content organization, MDX components, search integration, and theming patterns.

## Project Setup

```typescript
// app/layout.config.tsx
import { type DocsLayoutProps } from "fumadocs-ui/layout";
import { pageTree } from "@/app/source";

export const layoutConfig: DocsLayoutProps = {
  tree: pageTree,
  nav: {
    title: "My Docs",
    githubUrl: "https://github.com/myorg/myrepo",
  },
  sidebar: {
    defaultOpenLevel: 1,
    collapsible: true,
  },
  links: [
    { text: "Guide", url: "/docs/guide" },
    { text: "API", url: "/docs/api" },
    { text: "Blog", url: "/blog" },
  ],
};
```

## Content Source Configuration

```typescript
// app/source.ts
import { createMDXSource } from "fumadocs-mdx";
import { loader } from "fumadocs-core/source";
import { docs, meta } from "@/.source";

export const { getPage, getPages, pageTree } = loader({
  baseUrl: "/docs",
  source: createMDXSource(docs, meta),
  icon: (icon) => {
    if (!icon) return undefined;
    return <span className="icon">{icon}</span>;
  },
});
```

## Page Component

```typescript
// app/docs/[[...slug]]/page.tsx
import { getPage, getPages } from "@/app/source";
import { notFound } from "next/navigation";
import { DocsPage, DocsBody, DocsTitle, DocsDescription } from "fumadocs-ui/page";
import { MDXContent } from "@content";

interface PageProps {
  params: { slug?: string[] };
}

export default async function Page({ params }: PageProps) {
  const page = getPage(params.slug);

  if (!page) notFound();

  const MDX = page.data.body;

  return (
    <DocsPage toc={page.data.toc}>
      <DocsTitle>{page.data.title}</DocsTitle>
      {page.data.description && <DocsDescription>{page.data.description}</DocsDescription>}
      <DocsBody>
        <MDX components={{ ...MDXContent }} />
      </DocsBody>
    </DocsPage>
  );
}

export function generateStaticParams() {
  return getPages().map((page) => ({
    slug: page.slugs,
  }));
}

export function generateMetadata({ params }: PageProps) {
  const page = getPage(params.slug);
  if (!page) return {};

  return {
    title: page.data.title,
    description: page.data.description,
  };
}
```

## Custom MDX Components

```typescript
// components/mdx/index.tsx
import { Callout, Card, Cards, Steps, Step, Tabs, Tab } from "fumadocs-ui/components";
import { CodeBlock } from "./code-block";
import { TypeTable } from "fumadocs-ui/components/type-table";

export const MDXContent = {
  Callout,
  Card,
  Cards,
  Steps,
  Step,
  Tabs,
  Tab,
  TypeTable,
  pre: CodeBlock,
  
  // Custom components
  ApiEndpoint: ({ method, path, children }: { method: string; path: string; children: React.ReactNode }) => (
    <div className="api-endpoint">
      <span className={`method method-${method.toLowerCase()}`}>{method}</span>
      <code className="path">{path}</code>
      {children}
    </div>
  ),
  
  PropTable: ({ props }: { props: Array<{ name: string; type: string; default?: string; description: string }> }) => (
    <table className="prop-table">
      <thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
      <tbody>
        {props.map((prop) => (
          <tr key={prop.name}>
            <td><code>{prop.name}</code></td>
            <td><code>{prop.type}</code></td>
            <td>{prop.default ? <code>{prop.default}</code> : "-"}</td>
            <td>{prop.description}</td>
          </tr>
        ))}
      </tbody>
    </table>
  ),
};
```

## Search Integration

```typescript
// app/api/search/route.ts
import { createSearchAPI } from "fumadocs-core/search/server";
import { getPages } from "@/app/source";

export const { GET } = createSearchAPI("advanced", {
  indexes: getPages().map((page) => ({
    id: page.url,
    title: page.data.title,
    description: page.data.description,
    url: page.url,
    structuredData: page.data.structuredData,
  })),
});

// components/search.tsx
"use client";

import { useSearchDialog } from "fumadocs-ui/search";
import { useHotkeys } from "@/hooks/use-hotkeys";

export function SearchButton() {
  const { open, setOpen } = useSearchDialog();

  useHotkeys("mod+k", () => setOpen(true));

  return (
    <button onClick={() => setOpen(true)} className="search-button">
      <span>Search docs...</span>
      <kbd>Cmd+K</kbd>
    </button>
  );
}
```

## Best Practices for Google Antigravity IDE

When using Fumadocs with Google Antigravity, organize content with clear folder structure. Create reusable MDX components. Implement full-text search. Add proper metadata for SEO. Let Gemini 3 generate documentation structure from code.

Google Antigravity excels at generating documentation pages from TypeScript types and comments.