68 lines
3.1 KiB
Plaintext
68 lines
3.1 KiB
Plaintext
---
|
|
title: "Premium: What is Fumadocs"
|
|
description: "Introducing Fumadocs, a docs framework that you can break."
|
|
date: "2025-08-30"
|
|
published: true
|
|
premium: true
|
|
categories: ["development", "nextjs"]
|
|
author: "fox"
|
|
image: "/images/blog/post-1.png"
|
|
---
|
|
|
|
Fumadocs was created because I wanted a more customisable experience for building docs, to be a docs framework that is not opinionated, **a "framework" that you can break**.
|
|
|
|
## Philosophy
|
|
|
|
**Less Abstraction:** Fumadocs expects you to write code and cooperate with the rest of your software.
|
|
While most frameworks are configured with a configuration file, they usually lack flexibility when you hope to tune its details.
|
|
You can't control how they render the page nor the internal logic. Fumadocs shows you how the app works, instead of a single configuration file.
|
|
|
|
**Next.js Fundamentals:** It gives you the utilities and a good-looking UI.
|
|
You are still using features of Next.js App Router, like **Static Site Generation**. There is nothing new for Next.js developers, so you can use it with confidence.
|
|
|
|
<PremiumContent>
|
|
|
|
**Opinionated on UI:** The only thing Fumadocs UI (the default theme) offers is **User Interface**. The UI is opinionated for bringing better mobile responsiveness and user experience.
|
|
Instead, we use a much more flexible approach inspired by Shadcn UI — [Fumadocs CLI](/docs/cli), so we can iterate our design quick, and welcome for more feedback about the UI.
|
|
|
|
## Why Fumadocs
|
|
|
|
Fumadocs is designed with flexibility in mind.
|
|
|
|
You can use `fumadocs-core` as a headless UI library and bring your own styles.
|
|
Fumadocs MDX is also a useful library to handle MDX content in Next.js. It also includes:
|
|
|
|
- Many built-in components.
|
|
- Typescript Twoslash, OpenAPI, and Math (KaTeX) integrations.
|
|
- Fast and optimized by default, natively built on App Router.
|
|
- Tight integration with Next.js, you can add it to an existing Next.js project easily.
|
|
|
|
You can read [Comparisons](/docs/comparisons) if you're interested.
|
|
|
|
### Documentation
|
|
|
|
Fumadocs focuses on **authoring experience**, it provides a beautiful theme and many docs automation tools.
|
|
|
|
It helps you to iterate your codebase faster while never leaving your docs behind.
|
|
You can take this site as an example of docs site built with Fumadocs.
|
|
|
|
### Blog sites
|
|
|
|
Since Next.js is already a powerful framework, most features can be implemented with **just Next.js**.
|
|
|
|
Fumadocs provides additional tooling for Next.js, including syntax highlighting, document search, and a default theme (Fumadocs UI).
|
|
It helps you to avoid reinventing the wheels.
|
|
|
|
## When to use Fumadocs
|
|
|
|
For most of the web applications, vanilla React.js is no longer enough.
|
|
Nowadays, we also wish to have a blog, a showcase page, a FAQ page, etc. With a
|
|
fancy UI that's breathtaking, in these cases, Fumadocs can help you build the
|
|
docs easier, with less boilerplate.
|
|
|
|
Fumadocs is maintained by Fuma and many contributors, with care on the maintainability of codebase.
|
|
While we don't aim to offer every functionality people wanted, we're more focused on making basic features perfect and well-maintained.
|
|
You can also help Fumadocs to be more useful by contributing!
|
|
|
|
</PremiumContent>
|