MDX Components

Covers all Fumadocs UI content block types, including runnable examples and dependency notes.

Register Blocks in the Template

These examples render with the website’s MDX map. The actual template entry is src/components/mdx.tsx, not the old DocsContent/MDXContent pipeline. Import/register needed blocks in the map returned by getMDXComponents; routes render page.data.body. Do not recreate retired files to enable examples.

Standard Markdown Showcase

Heading Levels

H4 Heading

H5 Heading

H6 Heading

Unordered item A
Unordered item B
Unordered item C

Ordered item 1
Ordered item 2
Ordered item 3

This is a blockquote used to verify markdown quote styles.

Field	Type	Description
`title`	`string`	Display title
`icon`	`string`	Icon name

const section = {
  title: "CMS",
  icon: "Blocks",
  pages: ["cms-blog", "cms-docs"],
};

Open Docs Home

Sample image

Component Coverage (This Page)

Category	Components
Alerts	`Callout`, `CalloutContainer`, `CalloutTitle`, `CalloutDescription`
Cards	`Cards`, `Card`
Tabs	`Tabs`, `Tab`, `TabsList`, `TabsTrigger`, `TabsContent`
Code Blocks	`CodeBlock`, `Pre`, `CodeBlockTabs`, `CodeBlockTabsList`, `CodeBlockTabsTrigger`, `CodeBlockTab`, `DynamicCodeBlock`
Steps & File Tree	`Steps`, `Step`, `Files`, `Folder`, `File`
Structure & TOC	`InlineTOC`, `Accordions`, `Accordion`, `TypeTable`
Media & Banner	`ImageZoom` (with automatic `img` enhancement), `Banner`
Server-side Block	`GithubInfo` (code example only on this page)

Callout Family

Callout Example

This is the shorthand Callout form, useful for standard informational notes.

warn Type

Supported variants include warn, warning, error, success, and idea.

Composed Callout (CalloutContainer)

Use CalloutContainer + CalloutTitle + CalloutDescription when you need finer content control.

Cards / Card

Docs Configuration

Review docsSource, meta files, and docs tree organization.

Blog Configuration

Review blog switches, publish state, and Pro flags.

Tabs / Tab (Simple Mode)

pnpm install
# Use the development command from Quick Start

TabsList / TabsTrigger / TabsContent (Advanced Mode)

Best when data is fetched on the server and rendered directly.

Code Block Components

Markdown Code Block (defaults to `pre` -> `CodeBlock`)

export const project = {
  name: "MuseMVP",
  stack: ["Next.js", "Hono", "Drizzle"],
} as const;

`CodeBlockTabs` (Multi-block Switching)

RESEND_API_KEY="re_xxx"
DATABASE_URL="postgres://..."

`DynamicCodeBlock` (Runtime Highlighting)

export function sum(a: number, b: number) {return a + b;}

Steps / Step

Create new *.mdx files under content/docs.

Add title, description, and icon in frontmatter.

Files / Folder / File

cms-blog.en.mdx

cms-docs.en.mdx

paid-content-demo.en.mdx

meta.en.json

ImageZoom (Including Automatic `img` Enhancement)

Markdown images are automatically enhanced by ImageZoom (click to zoom):

ImageZoom auto-enhancement example

You can also explicitly use the component with width/height:

Accordions / Accordion

It helps collapse detailed sections in long docs so the main narrative stays clear.

This is the default Banner style. It can be dismissed and persisted in local storage.

This is the rainbow Banner style (variant="rainbow").

InlineTOC

Inline TOC - A

This is section A.

Inline TOC - B

This is section B.

Inline TOC - C

This is section C.

TypeTable

Prop

Type

GithubInfo (Server-side Block Example)

GithubInfo is an async component and is best used in server-rendered paths. Since this page uses client-side MDX rendering, we provide code usage only.

<GithubInfo owner="fuma-nama" repo="fumadocs" />

Optional props:

token: GitHub token (increases API rate limits)
baseUrl: custom GitHub API base URL (for enterprise setups)

Extra Dependencies and Constraints

Capability	Extra install needed	Notes
Most blocks under `fumadocs-ui/components/*`	No	Already available because this project installs `fumadocs-ui`.
`DynamicCodeBlock`	No	Uses `fumadocs-core` highlighting, which is already present here.
`ImageZoom`	No	Depends on `react-medium-image-zoom`, included by `fumadocs-ui`.
`GithubInfo`	No (component-level)	But it is recommended on server-rendered paths, and production should provide a token for rate limits.
TypeScript auto type tables (e.g., `AutoTypeTable`)	Yes	This is an extra extension capability, not part of core `fumadocs-ui` content blocks.

Component Quick Reference (Final)

Component	Use Case
`Callout` / `CalloutContainer`	Info notes, alerts, and success states
`Cards` / `Card`	Card grids and linked cards
`Tabs` / `Tab` / `TabsList` / `TabsTrigger` / `TabsContent`	Content switching (simple and advanced modes)
`CodeBlock` / `CodeBlockTabs` / `DynamicCodeBlock`	Code display, highlighting, and grouped code blocks
`Steps` / `Step`	Step-by-step lists
`Files` / `Folder` / `File`	File tree display
`ImageZoom`	Click-to-zoom images
`Accordions` / `Accordion`	Collapsible panels
`Banner`	Top announcement banner
`InlineTOC`	Inline table-of-contents navigation
`TypeTable`	API/type parameter table
`GithubInfo`	GitHub repository info card (server-side recommended)

For more details, see the Fumadocs docs.

Register Blocks in the Template

Standard Markdown Showcase

Heading Levels

H4 Heading

H5 Heading

H6 Heading

Unordered item A
Unordered item B
Unordered item C

Ordered item 1
Ordered item 2
Ordered item 3

This is a blockquote used to verify markdown quote styles.

Field	Type	Description
`title`	`string`	Display title
`icon`	`string`	Icon name

const section = {
  title: "CMS",
  icon: "Blocks",
  pages: ["cms-blog", "cms-docs"],
};

Open Docs Home

Sample image

Component Coverage (This Page)

Category	Components
Alerts	`Callout`, `CalloutContainer`, `CalloutTitle`, `CalloutDescription`
Cards	`Cards`, `Card`
Tabs	`Tabs`, `Tab`, `TabsList`, `TabsTrigger`, `TabsContent`
Code Blocks	`CodeBlock`, `Pre`, `CodeBlockTabs`, `CodeBlockTabsList`, `CodeBlockTabsTrigger`, `CodeBlockTab`, `DynamicCodeBlock`
Steps & File Tree	`Steps`, `Step`, `Files`, `Folder`, `File`
Structure & TOC	`InlineTOC`, `Accordions`, `Accordion`, `TypeTable`
Media & Banner	`ImageZoom` (with automatic `img` enhancement), `Banner`
Server-side Block	`GithubInfo` (code example only on this page)

Callout Family

Callout Example

This is the shorthand Callout form, useful for standard informational notes.

warn Type

Supported variants include warn, warning, error, success, and idea.

Composed Callout (CalloutContainer)

Use CalloutContainer + CalloutTitle + CalloutDescription when you need finer content control.

Cards / Card

Docs Configuration

Review docsSource, meta files, and docs tree organization.

Blog Configuration

Review blog switches, publish state, and Pro flags.

Tabs / Tab (Simple Mode)

pnpm install
# Use the development command from Quick Start

TabsList / TabsTrigger / TabsContent (Advanced Mode)

Best when data is fetched on the server and rendered directly.

Code Block Components

Markdown Code Block (defaults to `pre` -> `CodeBlock`)

export const project = {
  name: "MuseMVP",
  stack: ["Next.js", "Hono", "Drizzle"],
} as const;

`CodeBlockTabs` (Multi-block Switching)

RESEND_API_KEY="re_xxx"
DATABASE_URL="postgres://..."

`DynamicCodeBlock` (Runtime Highlighting)

export function sum(a: number, b: number) {return a + b;}

Steps / Step

Create new *.mdx files under content/docs.

Add title, description, and icon in frontmatter.

Files / Folder / File

cms-blog.en.mdx

cms-docs.en.mdx

paid-content-demo.en.mdx

meta.en.json

ImageZoom (Including Automatic `img` Enhancement)

Markdown images are automatically enhanced by ImageZoom (click to zoom):

ImageZoom auto-enhancement example

You can also explicitly use the component with width/height:

Accordions / Accordion

It helps collapse detailed sections in long docs so the main narrative stays clear.

This is the default Banner style. It can be dismissed and persisted in local storage.

This is the rainbow Banner style (variant="rainbow").

InlineTOC

Inline TOC - A

This is section A.

Inline TOC - B

This is section B.

Inline TOC - C

This is section C.

TypeTable

Prop

Type

GithubInfo (Server-side Block Example)

GithubInfo is an async component and is best used in server-rendered paths. Since this page uses client-side MDX rendering, we provide code usage only.

<GithubInfo owner="fuma-nama" repo="fumadocs" />

Optional props:

token: GitHub token (increases API rate limits)
baseUrl: custom GitHub API base URL (for enterprise setups)

Extra Dependencies and Constraints

Capability	Extra install needed	Notes
Most blocks under `fumadocs-ui/components/*`	No	Already available because this project installs `fumadocs-ui`.
`DynamicCodeBlock`	No	Uses `fumadocs-core` highlighting, which is already present here.
`ImageZoom`	No	Depends on `react-medium-image-zoom`, included by `fumadocs-ui`.
`GithubInfo`	No (component-level)	But it is recommended on server-rendered paths, and production should provide a token for rate limits.
TypeScript auto type tables (e.g., `AutoTypeTable`)	Yes	This is an extra extension capability, not part of core `fumadocs-ui` content blocks.

Component Quick Reference (Final)

Component	Use Case
`Callout` / `CalloutContainer`	Info notes, alerts, and success states
`Cards` / `Card`	Card grids and linked cards
`Tabs` / `Tab` / `TabsList` / `TabsTrigger` / `TabsContent`	Content switching (simple and advanced modes)
`CodeBlock` / `CodeBlockTabs` / `DynamicCodeBlock`	Code display, highlighting, and grouped code blocks
`Steps` / `Step`	Step-by-step lists
`Files` / `Folder` / `File`	File tree display
`ImageZoom`	Click-to-zoom images
`Accordions` / `Accordion`	Collapsible panels
`Banner`	Top announcement banner
`InlineTOC`	Inline table-of-contents navigation
`TypeTable`	API/type parameter table
`GithubInfo`	GitHub repository info card (server-side recommended)

For more details, see the Fumadocs docs.

Docs Configuration

Blog Configuration

Why use Accordion?

When should I use it?

Inline TOC - A

Inline TOC - B

Inline TOC - C

On this page

MDX Components

Docs Configuration

Blog Configuration

Why use Accordion?

When should I use it?

Inline TOC - A

Inline TOC - B

Inline TOC - C

On this page