| title | description | icon |
|---|---|---|
Quick Start |
Getting Started with Fumadocs |
Album |
Fumadocs can be broken down into two parts: Core and UI.
Core handles most of the logic, from search functionality, to MDX plugins.
Fumadocs UI, the official user interface for Fumadocs.
For a better understanding of the docs, there are some common terminologies you should know:
Content Source: The source of your content, for example, Fumadocs MDX, MDXTS and ContentLayer are examples of content source.
Page Tree: A tree of all the pages, separators and folders. It is essential for navigation elements. See Page Tree.
You might need to be familiar with Next.js App Router to continue.
Create a new app with create-fumadocs-app.
<InstallTabs items={['npm', 'pnpm', 'yarn', 'bun']}>
npx create-fumadocs-app</Tab>
<Tab value="pnpm">
pnpm create fumadocs-app</Tab>
<Tab value='yarn'>
yarn create fumadocs-app</Tab>
<Tab value='bun'>
bun create fumadocs-app</Tab>
It will initialize a new fumadocs app, now you can start hacking!
Create your first mdx file in the docs folder.
---
title: Hello World
---
## Yo what's upRun the app in development mode and see http://localhost:3000/docs.
npm run dev
Some common questions you may encounter.
Feel free to open the demo in CodeSandbox and see if it suits you.
- Many built-in components
- Integrations with Typescript Twoslash, OpenAPI, Math
- Flexible and Fast by default
- Built on App Router
- Use it in an existing Next.js project, without refactoring anything.
</Accordion>
<Accordion id='customise' title='How to Customise UI?'>
Fumadocs UI offers Themes, Blocks and Components.
The design system is built with Tailwind CSS, see [Themes](/docs/ui/theme).
Components are pre-built elements to enhance your documentation.
There are many pre-built components, and they are both customisable with exposed props like `style` and `className`.
Blocks are essential elements of a docs, providing navigation and basic functionality.
We provided many options to customise them, see the **Blocks** section of the docs.
Although the docs didn't explicitly mention, you can always style the elements with CSS selectors.
</Accordion>
<Accordion id='fix-monorepo-styling' title="How to fix stylings not being applied in Monorepo?">
Sometimes, `fumadocs-ui` is not installed in the workspace of your Tailwind CSS configuration file. (e.g. a monorepo setup).
When using the official Tailwind CSS plugin, it will not be able to find the files from `fumadocs-ui`
package which contains all styling.
To fix this, edit the Tailwind CSS configuration and replace `./node_modules` with `../../node_modules` in the `content` section.
```diff
export default {
content: [
- './node_modules/fumadocs-ui/dist/**/*.js',
+ '../../node_modules/fumadocs-ui/dist/**/*.js',
'./components/**/*.{ts,tsx}',
...
],
}
```
</Accordion>
<Accordion id='fix-supports-color' title="How to fix 'supports-color' error?">
If you got this error:
```
Module not found: Can't resolve 'supports-color' in '.../node_modules/debug/src'
```
This error sometimes appear when you are using ContentLayer, usually installing `supports-color@8.1.1` can fix the problem.
</Accordion>
<Accordion id='fix-dot-map-error' title="How to fix '@/.map' error?">
If you are using Fumadocs MDX, the `.map.ts` file will be generated automatically once you start the dev server.
For more information, see [Setup Guide](/docs/mdx).
</Accordion>
<Accordion id='dynamic-route' title="It uses Dynamic Route, will it be poor in performance?">
Next.js turns dynamic route into static routes when `generateStaticParams` is configured.
Hence, it is as fast as static pages.
</Accordion>
<Accordion id='blog-usage' title="Can I use it for Blog?">
The answer is yes.
Fumadocs is built for documentation sites, yet, it is very flexible.
You can re-use the typography styles and leverage its built-in remark/rehype plugins.
Check our [blog](/blog), it is also built with Fumadocs.
</Accordion>
<Accordion id='pronunciation' title='How to say Fumadocs?'>
Fumadocs (Foo-ma docs).
</Accordion>
New to here? Don't worry, we are welcome for your questions.
If you find anything confusing, please give your feedback on Github Discussion!