Fumadocs

Fumadocs is a documentation framework that helps developers build professional documentation sites using React and Next.js. Unlike traditional documentation tools, it gives you complete control over your content and design while handling the complex parts automatically.

It supports writing content in Markdown and MDX, which means you can use simple text formatting or add interactive React components. The framework includes built-in search, syntax highlighting, and beautiful pre-designed themes. It also works with any content source, whether you store your docs in files, a database, or a content management system.

Fumadocs is built around three parts: a content layer for managing your docs, a core library for features like search, and a UI library for beautiful components. You can use just what you need.

Getting started with Fumadocs is straightforward. Here are the steps:

• Install the framework by running the command npm create fumadocs-app in your terminal. Choose your preferred React framework and content source when prompted.

• Write your content in MDX files inside the docs folder. Use simple Markdown syntax with the option to add React components for interactive elements.

• Customize the appearance using Tailwind CSS. You can change colors, layouts, and styles to match your brand without learning a new system.

• Add search functionality by connecting Orama or Algolia search with just a few lines of code. The framework handles the rest automatically.

• Use the CLI tool to add interactive components like tabs, callouts, and code blocks with the command npx @fumadocs/cli add.

• Deploy your site to Vercel, Netlify, or any hosting service that supports Next.js applications.

• Free and open-source framework

• Works with Next.js, React Router, and other React frameworks

• Write content in Markdown and MDX

• Built-in search with Orama and Algolia support

• OpenAPI documentation generator

• TypeScript Twoslash integration

• Beautiful pre-designed UI components

• Command-line tool for easy setup

• Syntax highlighting with Shiki

• Highly customizable with Tailwind CSS