How to write documents
Fumadocs provides many useful extensions to MDX, a markup language. Here is a brief introduction to the default MDX syntax of Fumadocs UI.
MDX is not the only supported format of Fumadocs. In fact, you can use any renderers such as next-mdx-remote or CMS.
We use GFM (GitHub Flavored Markdown), a superset of Markdown (CommonMark). See GFM Specification.
# Heading
## Heading
### Heading
#### Heading
Hello World, **Bold**, _Italic_, ~~Hidden~~
```js
console.log('Hello World');
```
1. First
2. Second
3. Third
- Item 1
- Item 2
> Quote here
Internal links use the next/link component to allow prefetching and avoid hard-reload.
External links will get the default rel="noreferrer noopener" target="_blank" attributes for security.
[My Link](https://github.github.com/gfm)
This also works: https://github.github.com/gfm.MDX is a superset of Markdown, with support of JSX syntax. It allows you to import components, and use them right in the document, or even export values.
import { Component } from './component';
<Component name="Hello" />see MDX Syntax to learn more.
Useful for adding links, it is included by default.
<Cards>
<Card
href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating"
title="Fetching, Caching, and Revalidating"
>
Learn more about caching in Next.js
</Card>
</Cards>You can specify an icon to cards.
import { HomeIcon } from 'lucide-react';
<Cards>
<Card icon={<HomeIcon />} href="/" title="Home">
Go back to home
</Card>
</Cards><Cards>
<Card title="Fetching, Caching, and Revalidating">
Learn more about `fetch` in Next.js.
</Card>
</Cards>Learn more about fetch in Next.js.
Useful for adding tips/warnings, it is included by default.
<Callout>Hello World</Callout>Specify a callout title.
<Callout title="Title">Hello World</Callout>Title
You can specify the type of callout.
info (default)warnerror<Callout title="Title" type="error">
Hello World
</Callout>Title
Hello World
An anchor is automatically applied to each heading, it sanitizes invalid characters like spaces. (e.g. Hello World to hello-world)
# Hello `World`The table of contents (TOC) will be generated based on headings, you can also customise the effects of headings:
# Heading [!toc]
This heading will be hidden from TOC.
# Another Heading [toc]
This heading will **only** be visible in TOC, you can use it to add additional TOC items.
Like headings rendered in a React component:
<MyComp />You can add [#slug] to customise heading anchors.
# heading [#my-heading-id]You can also chain it with TOC settings like:
# heading [toc] [#my-heading-id]To link people to a specific heading, add the heading id to hash fragment: /page#my-heading-id.
We support YAML frontmatter. It is a way to specify common information of the document (e.g. title). Place it at the top of document.
---
title: Hello World
---
## TitleSee Page Conventions for a list of properties available for frontmatter.
Syntax Highlighting is supported by default using Rehype Code.
```js
console.log('Hello World');
```You can add a title to the codeblock.
```js title="My Title"
console.log('Hello World');
```You can highlight specific lines by adding [!code highlight].
```tsx
<div>Hello World</div> // [\!code highlight]
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```You can highlight a specific word by adding [!code word:<match>].
```js
// [\!code word:config]
const config = {
reactStrictMode: true,
};
``````ts
console.log('hewwo'); // [\!code --]
console.log('hello'); // [\!code ++]
```console.log('hewwo');
console.log('hello'); You can use code blocks with the <Tab /> component.
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Tab 1', 'Tab 2']}>
<Tab value='Tab 1'>
```ts
console.log('A');
```
</Tab>
<Tab value=
Note that you can add MDX components instead of importing them in MDX files.
console.log('A');Write Typescript codeblocks with hover type information and detected types errors.
Not enabled by default. See Twoslash.
All built-in content sources handle images properly.
Images are automatically optimized for next/image.
Some optional plugins you can enable.
Write math equations with TeX.
```mdx
f(x) = x * e^{2 pi i \xi x}
```f(x) = x * e^{2 pi i \xi x}To enable, see Math Integration.
Generate code blocks for installing packages via package managers (JS/Node.js).
```mdx
npm i next -D
```npm i next -DTo enable, see Remark Install.
You can see a list of plugins supported by Fumadocs.
Join the community
Subscribe to our newsletter for the latest news and updates
console.log('B');
