Custom TOC

Components

FillTOC

The main fill-style TOC. Three animation variants available:

• JavaScript - Uses requestAnimationFrame for synchronized animations
• CSS - Uses CSS transitions for a lighter approach
• Motion - Uses Motion for declarative animations

To switch variants, change the import in toc-fill-server.tsx:

import { FillTOC } from "./toc-fill-javascript";
// import { FillTOC } from "./toc-fill-css";
// import { FillTOC } from "./toc-fill-motion";

DefaultTOC

A simpler variant that highlights all visible sections simultaneously.

Server Wrappers

FillTOCServer and DefaultTOCServer pre-compute the SVG path on the server so the track is visible immediately on load. Optional—use FillTOC or DefaultTOC directly if you don't need this.

Usage

With server wrapper (used in page.tsx):

import { FillTOCServer } from "./components/docs/toc-fill-server";

<DocsPage
  tableOfContent={{
    component: <FillTOCServer toc={page.data.toc} stepped />,
  }}
>

Without server wrapper:

import { FillTOC } from "./components/docs/toc-fill-javascript";

<FillTOC toc={toc} stepped />

Props

• toc - Array of TOC items from fumadocs
• stepped - Enable indentation for nested headings