Documentation
Learn about the documentation system built with Next.js and fumadocs.
Documentation System Overview
This project's documentation system is built on two powerful foundations: Next.js App Router and fumadocs. Together, they provide a modern, flexible, and highly extensible documentation experience.
fumadocs
fumadocs is a powerful documentation framework for Next.js that makes content creation effortless.
Key Features
- MDX-First: Write content in MDX with full React component support
- File-Based: Organize content as simple files in your project
- Type-Safe: Automatic TypeScript types generation from your content
- Search: Full-text search capabilities out of the box
- Code Highlighting: Built-in syntax highlighting for code blocks
Why fumadocs?
fumadocs eliminates the need for a separate CMS or database. Your documentation lives alongside your code, making it easy to version, review, and maintain. The file-based approach means you can use your favorite editor and Git workflow.
shadcn/ui Integration
The UI components are built on top of shadcn/ui, providing beautiful, accessible UI components.
Key Features
- Beautiful Design: Modern, clean interface inspired by shadcn-ui
- Accessible: Built with accessibility in mind, following WAI-ARIA guidelines
- Customizable: Fully customizable components that you own and control
- Dark Mode: Built-in dark mode support
- Responsive: Mobile-first design that works on all devices
Ease of Use
The combination of fumadocs and shadcn/ui makes documentation creation incredibly simple:
Simple Content Creation
---
title: My Article
description: A simple example
---
# My Article
Write your content in MDX, and it just works!Rich Components
Use React components directly in your MDX:
<Callout>
This is a custom callout component!
</Callout>Zero Configuration
Get started quickly with sensible defaults, then customize as needed.
Extensibility
The documentation system is designed to be highly extensible:
- Custom Components: Add your own React components to enhance content
- Flexible Structure: Organize content however you want
- Theming: Customize colors, fonts, and styles
Getting Started
Ready to start documenting? Check out the next sections to learn how to:
- Create your first documentation page
- Use components in your content
- Customize the documentation theme