Documentation

Overview

We use Fumadocs to implement comprehensive documentation websites across our applications. The marketing application includes a fully functional Fumadocs implementation that serves as a reference for building your own documentation sites.

Fumadocs Implementation

In the Marketing Application

The marketing app demonstrates a complete Fumadocs setup with the following structure:

Configuration

• source.config.ts - Defines the documentation source with MDX options using @kit/fumadocs/mdx-options
• Content stored in content/docs/ directory with structured folders and MDX files
• Metadata configuration through meta.json files for navigation structure

Layout & Navigation

• app/docs/layout.tsx - Main layout with DocsProvider and DocsSidebar components
• app/docs/[[...slug]]/page.tsx - Dynamic page rendering with breadcrumbs, navigation, and table of contents
• Responsive sidebar navigation with collapsible tree structure

Features

• Static generation for optimal performance (generateStaticParams)
• SEO-friendly metadata generation (generateMetadata)
• Table of contents with scroll-to-top functionality
• Previous/next page navigation
• Copy page content and AI-powered search features

Key Components Used

The implementation leverages the @kit/fumadocs package which provides:

• Pre-configured MDX options with syntax highlighting
• Custom MDX components for rich documentation content
• UI components like DocsSidebar, DocsBottomNavigation, and DocsBreadcrumb
• LLM processing utilities for AI-powered features

Getting Started

To implement Fumadocs in your own application:

1. Install Dependencies: Follow the Fumadocs quick start guide
2. Configure Source: Set up your source.config.ts similar to the marketing app
3. Create Layout: Implement the docs layout with sidebar and navigation
4. Add Content: Structure your documentation in MDX files
5. Customize Styling: Apply your theme and branding

Learn More

For detailed information about the Fumadocs API, components, and advanced features, see the Fumadocs documentation.