Table of Contents

FeaturesCMSComponents

TOC components for structured long-form content navigation.

Table of Contents

'use client';

import { type TableOfContents, Toc, TocContent, TocNav, TocProgressIndicator, TocTitle } from '@kit/cms/ui/toc';

const sampleToc: TableOfContents = [
    {
        title: 'Getting Started',
        url: '#getting-started',
        depth: 2,
    },
    {
        title: 'Installation',
        url: '#installation',
        depth: 3,
    },
    {
        title: 'Configuration',
        url: '#configuration',
        depth: 3,
    },
    {
        title: 'Usage',
        url: '#usage',
        depth: 2,
    },
    {
        title: 'Basic Example',
        url: '#basic-example',
        depth: 3,
    },
    {
        title: 'Advanced Features',
        url: '#advanced-features',
        depth: 3,
    },
    {
        title: 'API Reference',
        url: '#api-reference',
        depth: 2,
    },
    {
        title: 'Components',
        url: '#components',
        depth: 3,
    },
    {
        title: 'Hooks',
        url: '#hooks',
        depth: 3,
    },
];

export function TocDemo() {
    return (
        <div className="w-full max-w-sm">
            <Toc toc={sampleToc} variant="indented" referenceTop={57} single={false}>
                <div className="flex flex-col gap-2 p-4 pt-0 text-sm">
                    <TocTitle title="Table of Contents" />
                    <TocContent>
                        <TocProgressIndicator />
                        <TocNav />
                    </TocContent>
                </div>
            </Toc>
        </div>
    );
}

What It Does

@kit/cms/ui/toc provides TOC primitives compatible with Fumadocs-style heading structures.

When To Use

Docs pages with many heading sections.

Prerequisites

A TableOfContents data object.

Important

This page describes the standard kit integration path; adapt app-specific paths and config names when your project differs.

How To Use

Component source

components/ui/toc.tsx

'use client';

import { Icon } from '@kit/ui/icon';
import { cn } from '@kit/utils';
import type { TableOfContents } from 'fumadocs-core/toc';
import * as React from 'react';
import { createContext, useContext } from 'react';

export type { TableOfContents };

Get the Kit

Kit required to see the full code

Video walkthrough

Example long-form page where TOC improves section navigation

Usage example

import { Toc, TocContent, TocNav, TocProgressIndicator, TocTitle } from '@kit/cms/ui/toc';
 
<Toc toc={toc} variant="indented" referenceTop={57} single={false}>
  <TocTitle title="Table of Contents" />
  <TocContent>
    <TocProgressIndicator />
    <TocNav />
  </TocContent>
</Toc>

MCP Context

capability: toc_ui
entrypoints:
  - @kit/cms/ui/toc
inputs:
  - table_of_contents_data
outputs:
  - heading_navigation_ui
constraints:
  - TOC item structure must match expected type
side_effects:
  - updates active heading state during scroll

Agent Recipe

Pass TOC data from your renderer/content pipeline.
Choose visual mode (indented or other variant).
Verify active section updates while scrolling.

Troubleshooting

Wrong highlight behavior usually means incorrect heading IDs or offset settings.

Documentation

API Reference

Root

TocProps

Prop	Type	Default
`className`	`string`
`title`	`string`	`'On This Page'`
`toc*`	`TableOfContents`
`variant`	`"straight" \| "indented"`
`referenceTop`	`number`
`single`	`boolean`

Title

TocTitleProps

Prop	Type	Default
`title`	`string`	`'On This Page'`
`className`	`string`

Content

TocContentProps

Prop	Type	Default
`children`	`React.ReactNode`
`className`	`string`

Progress Indicator

TocProgressIndicatorProps

Prop	Type	Default
`className`	`string`

Nav

TocNavProps

Prop	Type	Default
`className`	`string`

SimpleToc

Use this components to avoid the pain of handling all the previous components.

<SimpleToc toc={toc} variant="indented" referenceTop={100} single={false} />

Scroll to Top

Floating button to jump to top of long content pages.

Roadmap

Publish product roadmap items from Notion-backed content.

How is this guide?

Last updated on 3/23/2026