FeaturesCMS

Fumadocs

Implement your own documentation website with Fumadocs.

Fumadocs

We offer you the ability to implement your own documentation website with Fumadocs.

The marketing applicatin comes with a working implementation of Fumadocs.

How to integrate in another application

Follow the Fumadocs documentation to integrate it in your application.
Check of the fumadocs is integrated in the application if you want to reuse it in another application.

The @kit/fumadocs package provides you :

a defaultMdxOptions function that handle the shiki, rehype-pretty-code and remark-mdx-files plugins for you (from @kit/fumadocs/mdx-options).
all the mdx components that you need to use with the @kit/fumadocs/mdx-components endpoint.
an llm function to simplify llm processing (from @kit/fumadocs/llm).
a bunch of components to use with the @kit/fumadocs/ui endpoint.

Components

DocsSidebar

The DocsSidebar component provides a collapsible navigation sidebar for documentation websites built with Fumadocs. It displays a hierarchical tree of pages and folders, allowing users to navigate through your documentation structure.

'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 { PageTree } from 'fumadocs-core/server';

// 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 overflow-auto max-w-xs">
                <DocsSidebar tree={mockPageTree} />
            </SidebarProvider>
        </DocsProvider>
    );
}

DocsLayoutProps

Prop	Type	Default
`tree*`	`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

The DocsBottomNavigation component displays previous and next navigation links at the bottom of documentation pages. It helps users navigate sequentially through your documentation content.

Authentication

Learn how to implement user authentication

Billing

Explore available billing features

'use client';

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

// 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?:...`

CMS

Integrate your content management system with your application.

Notion

Learn how to use Notion as Content Management System in your application.

How is this guide?

Last updated on 10/17/2025