FeaturesCMS

Fumadocs

Repository-native documentation and MDX rendering with @kit/fumadocs.

Fumadocs

What It Does

@kit/fumadocs provides shared MDX options, MDX components, and docs UI primitives used by this docs site.

When To Use

You want docs/blog content versioned in Git.

Prerequisites

Fumadocs configured in your app (source.config.ts, docs routes, page loader).

Important

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

How To Use

Key exports:

@kit/fumadocs/mdx-options
@kit/fumadocs/mdx-components
@kit/fumadocs/ui/*
@kit/fumadocs/llm

Example source config:

import { transformers } from '@kit/cms/lib/highlight-code';
import { defaultMdxOptions } from '@kit/fumadocs/mdx-options';
import { defineConfig } from 'fumadocs-mdx/config';
 
export default defineConfig({
  mdxOptions: defaultMdxOptions(transformers),
});

Components

DocsSidebar

The docs sidebar renders hierarchical navigation for your documentation tree.

'use client';

import { DocsProvider } from '@kit/fumadocs/ui/docs-provider';
import { DocsSidebar } from '@kit/fumadocs/ui/docs-sidebar';
import { SidebarProvider } from '@kit/ui/sidebar';
import type * as PageTree from 'fumadocs-core/page-tree';

// Mock page tree data for demonstration
const mockPageTree: PageTree.Root = {
    name: 'Documentation',
    children: [
        {
            type: 'folder',
            name: 'Getting Started',
            children: [
                {
                    type: 'page',
                    name: 'Introduction',
                    url: '/docs/web',
                },
                {
                    type: 'page',
                    name: 'Quick Start',
                    url: '/docs/web/configuration',
                },
            ],
        },
        {
            type: 'folder',
            name: 'Features',
            children: [
                {
                    type: 'page',
                    name: 'Authentication',
                    url: '/docs/web/features/authentication',
                },
                {
                    type: 'folder',
                    name: 'CMS',
                    children: [
                        {
                            type: 'page',
                            name: 'Notion',
                            url: '/docs/web/features/cms/notion',
                        },
                        {
                            type: 'page',
                            name: 'Fumadocs',
                            url: '/docs/web/features/cms/fumadocs',
                        },
                    ],
                },
                {
                    type: 'page',
                    name: 'Billing',
                    url: '/docs/web/features/billing',
                },
            ],
        },
        {
            type: 'page',
            name: 'Roadmap',
            url: '/docs/web/features/roadmap',
        },
    ],
};

export function DocsSidebarDemo() {
    return (
        <DocsProvider>
            <SidebarProvider className="no-scrollbar h-full max-h-[500px] min-h-0 w-full max-w-xs overflow-auto">
                <DocsSidebar tree={mockPageTree} />
            </SidebarProvider>
        </DocsProvider>
    );
}

DocsLayoutProps

Prop	Type	Default
`tree*`	`PageTree.Root`
`sidebar`	`SidebarOptions`
`containerProps`	`HTMLAttributes<HTMLDivElement>`
`themeSwitch`	`{ enabled?: boolean;...`
`searchToggle`	`Partial<{ enabled: boolean; components: Partial<{ sm: ReactNode; lg: ReactNode; }>...`
`i18n`	`boolean \| I18nConfig<string>`	`false`
`githubUrl`	`string`
`links`	`LinkItemType[]`
`nav`	`Partial<NavOptions>`
`children`	`ReactNode`

DocsBottomNavigation

Bottom navigation renders previous/next links between documentation pages.

Authentication

Learn how to implement user authentication

Billing

Explore available billing features

'use client';

import { DocsBottomNavigation } from '@kit/fumadocs/ui/docs-bottom-navigation';
import { findNeighbour } from 'fumadocs-core/page-tree';

// Mock neighbours data for demonstration
const mockNeighbours: Awaited<ReturnType<typeof findNeighbour>> = {
    previous: {
        type: 'page',
        url: '/docs/web/features/authentication',
        name: 'Authentication',
        description: 'Learn how to implement user authentication',
    },
    next: {
        type: 'page',
        url: '/docs/web/features/billing',
        name: 'Billing',
        description: 'Explore available billing features',
    },
};

export function DocsBottomNavigationDemo() {
    return (
        <div className="w-full max-w-4xl">
            <DocsBottomNavigation neighbours={mockNeighbours} />
        </div>
    );
}

DocsBottomNavigationProps

Prop	Type	Default
`neighbours*`	`{ previous?: Item; next?:...`

MCP Context

capability: fumadocs_integration
entrypoints:
  - @kit/fumadocs/mdx-options
  - @kit/fumadocs/mdx-components
  - @kit/fumadocs/ui/*
inputs:
  - mdx_content_tree
outputs:
  - rendered_docs_pages
constraints:
  - docs source metadata must be valid
side_effects:
  - static page generation

Agent Recipe

Configure source and MDX options.
Reuse shared mdx component map.
Build docs routes and static params from source loader.

Troubleshooting

Rendering issues often come from invalid MDX frontmatter or component imports.
Missing navigation usually means broken meta.json chains.

CMS

Content workflows powered by Fumadocs and Notion integrations.

Notion

Configure Notion as a typed content backend.

How is this guide?

Last updated on 3/23/2026

Fumadocs

What It Does

When To Use

Prerequisites

How To Use

Components

DocsSidebar

DocsBottomNavigation

MCP Context

Agent Recipe

Troubleshooting

Related