Docs

React components for rendering documentation content in Fumadocs.

Documentation Components

React components for rendering documentation content in Fumadocs.

Purpose

This directory contains specialized components for enhancing the documentation experience:

• MermaidRenderer: Client-side Mermaid diagram renderer with code splitting
• Future documentation-specific UI components

Key Concepts

• Code Splitting: Large libraries like Mermaid are dynamically imported to reduce initial bundle size
• Fumadocs Integration: Components designed to work with Fumadocs MDX content

Usage

Components are automatically available in MDX files through Fumadocs configuration:

// In MDX content
<MermaidRenderer chart={`graph TD; A-->B;`} />

Architecture

These components are part of the presentation layer and interact with:

• Fumadocs UI framework for consistent styling
• MDX content system for rich documentation
• Next.js App Router for code splitting and lazy loading