Fumadocs Blocks
Covers all Fumadocs UI content block types, including runnable examples and dependency notes.
Enable More Blocks On Demand (Bundle Size Control)
To keep the docs page client bundle smaller, the template maps only common components by default.
If you want to use more block types (such as Accordions, Banner, InlineTOC, TypeTable, or DynamicCodeBlock), import and register them in DocsContent.tsx:
import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
import { Banner } from "fumadocs-ui/components/banner";
import {
CodeBlock,
CodeBlockTab,
CodeBlockTabs,
CodeBlockTabsList,
CodeBlockTabsTrigger,
Pre,
} from "fumadocs-ui/components/codeblock";
import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
import { InlineTOC } from "fumadocs-ui/components/inline-toc";
import {
TabsContent,
TabsList,
TabsTrigger,
} from "fumadocs-ui/components/tabs";
import { TypeTable } from "fumadocs-ui/components/type-table";
// ...
<MDXContent
code={code}
components={{
...defaultMdxComponents,
Accordions,
Accordion,
Banner,
CodeBlock,
Pre,
CodeBlockTabs,
CodeBlockTabsList,
CodeBlockTabsTrigger,
CodeBlockTab,
DynamicCodeBlock,
TabsList,
TabsTrigger,
TabsContent,
InlineTOC,
TypeTable,
}}
/>
// ...
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"],
};
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
pnpm devnpm install
npm run devTabsList / TabsTrigger / TabsContent (Advanced Mode)
Best when data is fetched on the server and rendered directly.
Best for frequent interaction, browser APIs, or local state-heavy behavior.
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.
Register page order in meta.{locale}.json.
Add title, description, and icon in frontmatter.
Files / Folder / File
ImageZoom (Including Automatic img Enhancement)
Markdown images are automatically enhanced by ImageZoom (click to zoom):
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.
Banner
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)
GithubInfois 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.