Fountainhead

Fumadocs MDX extended syntax reference, including callouts, tabs, cards, and other built-in components with code block enhancements

This page summarizes the MDX extended syntax provided by Fumadocs (excluding standard Markdown), with source code and rendered output side by side.

Callout

Supports type attribute for type and title attribute for title.

<Callout>Default callout, no type specified.</Callout>

<Callout type="info" title="Info">
  This is an info callout.
</Callout>

<Callout type="warn" title="Warning">
  This is a warning callout.
</Callout>

<Callout type="error" title="Error">
  This is an error callout.
</Callout>

Default callout, no type specified.

Info

This is an info callout.

Warning

This is a warning callout.

Error

This is an error callout.

Attribute	Type	Description
`type`	`"info" \| "warn" \| "error"`	Callout type, default style if not specified
`title`	`string`	Title text (optional)

Code Block Enhancements

Fumadocs provides multiple code block enhancements based on Shiki.

Title

Add title="filename" after the code block language to display a title bar.

```ts title="config.ts"
export const config = {
  theme: "dark",
}
```

config.ts

export const config = {
  theme: "dark",
}

Line Highlighting

Add // [!code highlight] at the end of a line to highlight it.

```ts
const a = 1
const b = 2 // [!code highlight]
const c = 3
```

const a = 1
const b = 2
const c = 3

Word Highlighting

Add // [!code word:keyword] on the first line of a code block to highlight all matching words.

```ts
const config = {
  theme: "dark",
}
export default config
```

const config = {
  theme: "dark",
}
export default config

Code Diff

Use // [!code ++] and // [!code --] to mark added and removed lines.

```ts
export default {
  theme: "light", // [!code --]
  theme: "dark",  // [!code ++]
}
```

export default {
  theme: "light", 
  theme: "dark",  
}

Code Tabs

Add the tab attribute to consecutive code blocks to automatically merge them into a tab group.

```bash tab="pnpm"
pnpm install fumadocs-ui
```

```bash tab="npm"
npm install fumadocs-ui
```

```bash tab="yarn"
yarn add fumadocs-ui
```

pnpm install fumadocs-ui

Tabs

Tabs and Tab components create general-purpose tabs, not limited to code blocks — they can contain any content.

<Tabs items={["React", "Vue"]}>
<Tab value="React">

React uses JSX syntax to write components.

</Tab>
<Tab value="Vue">

Vue uses template syntax to write components.

</Tab>
</Tabs>

React uses JSX syntax to write components.

Vue uses template syntax to write components.

Tabs and Tab are registered in the default MDX components — no manual import needed.

Cards

Cards and Card create card link collections, supporting href, icon, and title attributes.

<Cards>
  <Card title="Quick Start" href="/docs">
    Get your project set up in 5 minutes
  </Card>
  <Card title="API Reference" href="/docs/api">
    View the complete API documentation
  </Card>
  <Card title="Title Only Card">
    href is optional — cards can also be without links.
  </Card>
</Cards>

Quick Start

Get your project set up in 5 minutes

API Reference

View the complete API documentation

Title Only Card

href is optional — cards can also be without links.

Steps

Use Steps and Step components to create ordered step guides.

import { Step, Steps } from 'fumadocs-ui/components/steps';

<Steps>
<Step>

### Install Dependencies

Run the package manager install command.

</Step>
<Step>

### Configure Project

Edit the configuration file and set the required options.

</Step>
<Step>

### Start Development

Run the dev server and start building.

</Step>
</Steps>

Install Dependencies

Run the package manager install command.

Configure Project

Edit the configuration file and set the required options.

Start Development

Run the dev server and start building.

Alternative Syntax

You can also use CSS class names without importing components:

<div className="fd-steps">
<div className="fd-step">

### Step Title

Step content...

</div>
</div>

Accordion

Use Accordions and Accordion components to create collapsible content panels.

import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

<Accordions type="single">
  <Accordion title="What is Fumadocs?">
    Fumadocs is a modern documentation framework based on Next.js,
    providing MDX support, full-text search, multi-language, and more.
  </Accordion>
  <Accordion title="How to install?">
    Install fumadocs-ui and fumadocs-core via your package manager
    to get started.
  </Accordion>
</Accordions>

Attribute	Description
`type="single"`	Only one panel can be expanded at a time
`type="multiple"`	Multiple panels can be expanded simultaneously

Files

Use Files, Folder, File components to display file directory structures.

import { File, Folder, Files } from 'fumadocs-ui/components/files';

<Files>
  <Folder name="src" defaultOpen>
    <Folder name="components" defaultOpen>
      <File name="button.tsx" />
      <File name="dialog.tsx" />
    </Folder>
    <File name="index.ts" />
  </Folder>
  <File name="package.json" />
  <File name="tsconfig.json" />
</Files>

button.tsx

dialog.tsx

index.ts

package.json

tsconfig.json

Attribute	Description
`name`	File or folder name
`defaultOpen`	Folder expanded by default (`Folder` only)

TypeTable

Use the TypeTable component to display API property documentation, ideal for documenting component Props.

import { TypeTable } from 'fumadocs-ui/components/type-table';

<TypeTable
  type={{
    name: {
      description: 'Component name',
      type: 'string',
      default: '"Button"',
    },
    disabled: {
      description: 'Whether disabled',
      type: 'boolean',
      default: 'false',
    },
    size: {
      description: 'Component size',
      type: '"sm" | "md" | "lg"',
      default: '"md"',
    },
  }}
/>

Prop

Type

Mermaid Diagrams

Use the <Mermaid> component to render Mermaid diagrams. Pass the diagram code as children wrapped in a template literal.

<Mermaid>{`flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]
  C --> D`}</Mermaid>

Feature	Description
Theme	Auto-switches between light/dark based on site theme
Expand	Hover to reveal expand button, click to view in full-screen dialog
Error	Displays error message and raw code on render failure

Mermaid is registered in the default MDX components — no manual import needed. It supports all standard Mermaid diagram types (flowchart, sequence, class, state, ER, etc.).

Image Zoom

The project has ImageZoom configured in MDX components, so all images inserted via Markdown syntax automatically support click-to-zoom:

![Image description](/path/to/image.png)

References

Fumadocs Markdown Docs — Official Markdown / MDX syntax reference
Fumadocs Component Docs — All built-in UI components
Shiki Docs — Code highlighting engine

MDX Syntax Reference