Table of Contents | creatorem

FeaturesCMSComponents

Enable users to navigate through your content with an interactive table of contents and progress indicator.

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>
    );
}

The UI of this component is inspired from the Fumadocs TOC component.

An interactive table of contents with progress tracking and active section highlighting. Automatically detects headings and provides smooth navigation for long-form content.

Installation

Install the required dependencies:

The TOC component requires the Fumadocs core package for the TableOfContents type.


pnpm add '@kit/cms@workspace:*'

Make sure that the following kit packages are present in your project:

The TOC component uses internal kit packages that should already be available in your project:

@kit/ui/icon - Icon components
@kit/shared - Utility functions

Copy and paste the following code into your project.

components/ui/toc.tsx

'use client';

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

export { type TableOfContents };

Get the Kit

Kit required to see the full code

Update the import paths to match your project setup.

Usage

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

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

Features

Visual progress indicator with indented or straight variants
Active section tracking - single or multiple mode
Responsive design for all screen sizes
Smooth scroll updates with requestAnimationFrame optimization

Toc Data

To be able to use this component with your fumadocs and your notion content, you use the same type as the Fumadocs TOC component. The notion client take care to return a compatible toc object.

The fumadocs type is exported from the @kit/cms/ui/toc package.

import { type TableOfContents } from '@kit/cms/ui/toc';

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

Enable users to quickly navigate back to the top of long pages with a smooth scroll-to-top button.

Roadmap

Keep your users aware of your progress with a smooth roadmap process.

How is this guide?

Last updated on 10/17/2025