UI examples

A reference for choosing official Fumadocs body components when writing concrete docs.

Use official components only

This page compares which Fumadocs presentation fits the same piece of copy. It does not add custom styles or introduce another UI library.

Official scope

Body structure

Callout, Cards, Accordions, Tabs, Steps, and Inline TOC are preferred for ordinary documentation pages.

Code and structure

Code Block, Dynamic Code Block, Files, Type Table, and Zoomable Image suit APIs, directories, fields, and screenshots.

Page shell and navigation

Docs, Notebook, Home, Flux, and other layouts are page-level capabilities and should not be mixed directly into MDX body content.

Additional integrations

Add Auto Type Table, Graph View, GitHub Info, and similar features only when needed; do not add dependencies or external requests just for this example page.

How to choose when writing tutorials

Prop

Type

Tutorial composition templates

Quick start

Use a Callout for prerequisites, Steps for the main flow, Tabs for different clients, and a success Callout to close.

API reference

Use a Callout for authentication boundaries, TypeTable for fields, CodeBlockTabs for request examples, and Cards for related endpoints.

Troubleshooting guide

Use a warn Callout for impact, Accordions for causes, Steps for the checking order, and error/success Callouts for status.

Tool integration

Use Files for configuration locations, Tabs for clients, ImageZoom for settings screenshots, and Cards for next steps.

Component index

Callout

Tips, warnings, errors, success states, suggestions, and manually composed CalloutContainer blocks.

Cards

Cards / Card: parallel entry points, further reading, and related content.

Accordions

Accordion / Accordions: FAQ, long answers, and optional details.

Tabs

Tabs / Tab, together with TabsList, TabsTrigger, and TabsContent for advanced layouts.

Steps

Steps / Step: ordered operations, workflows, and checking procedures.

Code Block

Fenced code, titles, line numbers, and code tabs.

Code Block (Dynamic)

DynamicCodeBlock / ServerCodeBlock: code blocks generated at runtime or on the server.

Files

Files / Folder / File: directory trees, project structures, and path descriptions.

Type Table

Fields, parameters, configuration options, and response structures.

Auto Type Table

Generate a field table from TypeScript types, suitable for formal type documentation.

Inline TOC

A local table of contents or quick navigation for a long section.

Zoomable Image

Images that can be clicked to enlarge.

Banner

A notification at the top of a page or the whole site.

Graph View

A graph of document relationships for a knowledge base or complex documentation network.

GitHub Info

Information about a GitHub repository.

Heading

Use when a heading needs to be rendered through an explicit component.

buttonVariants

When button visuals are needed, use only the official Fumadocs button variants.

Layouts

DocsPage, DocsLayout, RootProvider, and other page-shell capabilities.

Callout

info

A general note for the conclusion or other information users should read first.

warn

A risk reminder for a boundary that must not be misused.

warning

warning is another use of the same kind as warn, useful when retaining an English API name.

error

An error explanation for failure causes and states where the user cannot continue.

success

A success state that confirms an action has completed.

idea

A suggestion or candidate approach for information that is not mandatory.

CalloutContainer

When a title and body need to be composed manually, use CalloutContainer, CalloutTitle, and CalloutDescription.

Cards

Quick start

Put the shortest path in the first card.

API contract

Put the source of truth and boundaries at the reference entry point.

External link

A Card can also be an external entry point.

Tabs

Suitable for command-line instructions, smoke tests, and README-level examples.

Suitable for frontend, Node SDK, or Next.js code snippets.

Suitable for scripts, data processing, and server-side examples.

npm install fumadocs-ui

pnpm add fumadocs-ui

bun add fumadocs-ui

Steps

First determine what the user needs to do

For a workflow, write the action before explaining the concept.

Then add the necessary context

Add only the information required to complete the current action.

Finally give a verification method

Tell the user how to determine that the action succeeded.

Code Block

POST /v1/chat/completions

curl https://dingjiai.com/v1/chat/completions \
  -H "Authorization: Bearer YOUR_USER_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"model":"public-model","messages":[{"role":"user","content":"Hi"}]}'

line-numbers.ts

export function createPayload(model: string) {
  return {
    model,
    messages: [{ role: "user", content: "Hi" }],
  }
}

curl

curl https://dingjiai.com/v1/chat/completions

Code Block (Dynamic)

dynamic.ts

type Model = {id: stringowned_by: string}

ServerCodeBlock usage

import { ServerCodeBlock } from "fumadocs-ui/components/codeblock.rsc"

export default function Example() {
  return <ServerCodeBlock code="console.log('hi')" lang="ts" />
}

AutoTypeTable is suitable for generating field descriptions from TypeScript types. The current project does not install fumadocs-typescript, so this page keeps the official usage entry point without rendering it directly in ordinary body content.

Auto Type Table usage

import { AutoTypeTable } from "fumadocs-typescript/ui"

<AutoTypeTable path="./types.ts" name="CreateChatCompletionRequest" />

Inline TOC

Callout Cards Tabs Code Block Type Table Auto Type Table Graph View

Zoomable Image

A normal Banner is suitable for a page-top notice. Use it sparingly in ordinary body content.

A rainbow Banner is suitable for a more prominent temporary notice.

Graph View

GraphView is suitable for showing relationships between documents. The current project does not integrate fumadocs-ui/components/graph-view, so this page records the use case only; install or generate it later when a knowledge graph is actually needed instead of adding dependencies in advance.

Graph View usage

import { GraphView } from "fumadocs-ui/components/graph-view"

<GraphView items={[]} />

Heading

A level-three heading rendered by Heading

Ordinary Markdown headings are usually sufficient in body content. Use Heading only when an explicit component is needed.

buttonVariants

GitHub Info

GithubInfo reads GitHub repository information and is suitable when a page genuinely needs to show the status of an open-source repository. This documentation page does not render it by default, avoiding an external request in the example page.

GithubInfo usage

import { GithubInfo } from "fumadocs-ui/components/github-info"

<GithubInfo owner="fumadocs" repo="fumadocs" />

Layouts

Layout is the page shell for a documentation site, not an ordinary body component. This project currently uses the Docs layout; introduce another layout only when the page shape actually changes.

DocsLayout

The sidebar, search, navigation, and mobile layout used by the current documentation site.

DocsPage

The page shell for each document, responsible for the TOC, body width, title, description, and footer.

NotebookLayout

A notebook-like, multi-column reading layout that requires a separate page entry.

HomeLayout

Suitable for a homepage, marketing page, or non-document directory entry; it does not replace the current docs page.

FluxLayout

Another official documentation layout style; switch only after the overall visual direction is confirmed.

RootProvider

Root capabilities such as search, theme, and internationalization, mounted by the app layout.

PageLastUpdate

Displays the last update time when lastModified is available.

Underlying UI primitives

These components come from fumadocs-ui/components/ui/* and are normally used indirectly by the content and page-shell components above. Import them directly only when writing a custom React component.

Official UI primitives

import { buttonVariants } from "fumadocs-ui/components/ui/button"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "fumadocs-ui/components/ui/collapsible"
import { Popover, PopoverContent, PopoverTrigger } from "fumadocs-ui/components/ui/popover"
import { ScrollArea } from "fumadocs-ui/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "fumadocs-ui/components/ui/tabs"

Component registration

mdx-components.tsx

import defaultMdxComponents from "fumadocs-ui/mdx"
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 { File, Files, Folder } from "fumadocs-ui/components/files"
import { GithubInfo } from "fumadocs-ui/components/github-info"
import { Heading } from "fumadocs-ui/components/heading"
import { ImageZoom } from "fumadocs-ui/components/image-zoom"
import { InlineTOC } from "fumadocs-ui/components/inline-toc"
import { Step, Steps } from "fumadocs-ui/components/steps"
import { Tab, Tabs, TabsContent, TabsList, TabsTrigger } from "fumadocs-ui/components/tabs"
import { TypeTable } from "fumadocs-ui/components/type-table"
import { buttonVariants } from "fumadocs-ui/components/ui/button"

Use official components only

This page compares which Fumadocs presentation fits the same piece of copy. It does not add custom styles or introduce another UI library.

Official scope

Body structure

Callout, Cards, Accordions, Tabs, Steps, and Inline TOC are preferred for ordinary documentation pages.

Code and structure

Code Block, Dynamic Code Block, Files, Type Table, and Zoomable Image suit APIs, directories, fields, and screenshots.

Page shell and navigation

Docs, Notebook, Home, Flux, and other layouts are page-level capabilities and should not be mixed directly into MDX body content.

Additional integrations

Add Auto Type Table, Graph View, GitHub Info, and similar features only when needed; do not add dependencies or external requests just for this example page.

How to choose when writing tutorials

Prop

Type

Tutorial composition templates

Quick start

Use a Callout for prerequisites, Steps for the main flow, Tabs for different clients, and a success Callout to close.

API reference

Use a Callout for authentication boundaries, TypeTable for fields, CodeBlockTabs for request examples, and Cards for related endpoints.

Troubleshooting guide

Use a warn Callout for impact, Accordions for causes, Steps for the checking order, and error/success Callouts for status.

Tool integration

Use Files for configuration locations, Tabs for clients, ImageZoom for settings screenshots, and Cards for next steps.

Component index

Callout

Tips, warnings, errors, success states, suggestions, and manually composed CalloutContainer blocks.

Cards

Cards / Card: parallel entry points, further reading, and related content.

Accordions

Accordion / Accordions: FAQ, long answers, and optional details.

Tabs

Tabs / Tab, together with TabsList, TabsTrigger, and TabsContent for advanced layouts.

Steps

Steps / Step: ordered operations, workflows, and checking procedures.

Code Block

Fenced code, titles, line numbers, and code tabs.

Code Block (Dynamic)

DynamicCodeBlock / ServerCodeBlock: code blocks generated at runtime or on the server.

Files

Files / Folder / File: directory trees, project structures, and path descriptions.

Type Table

Fields, parameters, configuration options, and response structures.

Auto Type Table

Generate a field table from TypeScript types, suitable for formal type documentation.

Inline TOC

A local table of contents or quick navigation for a long section.

Zoomable Image

Images that can be clicked to enlarge.

Banner

A notification at the top of a page or the whole site.

Graph View

A graph of document relationships for a knowledge base or complex documentation network.

GitHub Info

Information about a GitHub repository.

Heading

Use when a heading needs to be rendered through an explicit component.

buttonVariants

When button visuals are needed, use only the official Fumadocs button variants.

Layouts

DocsPage, DocsLayout, RootProvider, and other page-shell capabilities.

Callout

info

A general note for the conclusion or other information users should read first.

warn

A risk reminder for a boundary that must not be misused.

warning

warning is another use of the same kind as warn, useful when retaining an English API name.

error

An error explanation for failure causes and states where the user cannot continue.

success

A success state that confirms an action has completed.

idea

A suggestion or candidate approach for information that is not mandatory.

CalloutContainer

When a title and body need to be composed manually, use CalloutContainer, CalloutTitle, and CalloutDescription.

Cards

Quick start

Put the shortest path in the first card.

API contract

Put the source of truth and boundaries at the reference entry point.

External link

A Card can also be an external entry point.

Accordions

Tabs

Suitable for command-line instructions, smoke tests, and README-level examples.

Suitable for frontend, Node SDK, or Next.js code snippets.

Suitable for scripts, data processing, and server-side examples.

npm install fumadocs-ui

pnpm add fumadocs-ui

bun add fumadocs-ui

Steps

First determine what the user needs to do

For a workflow, write the action before explaining the concept.

Then add the necessary context

Add only the information required to complete the current action.

Finally give a verification method

Tell the user how to determine that the action succeeded.

Code Block

POST /v1/chat/completions

curl https://dingjiai.com/v1/chat/completions \
  -H "Authorization: Bearer YOUR_USER_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"model":"public-model","messages":[{"role":"user","content":"Hi"}]}'

line-numbers.ts

export function createPayload(model: string) {
  return {
    model,
    messages: [{ role: "user", content: "Hi" }],
  }
}

curl

curl https://dingjiai.com/v1/chat/completions

Code Block (Dynamic)

dynamic.ts

type Model = {id: stringowned_by: string}

ServerCodeBlock usage

import { ServerCodeBlock } from "fumadocs-ui/components/codeblock.rsc"

export default function Example() {
  return <ServerCodeBlock code="console.log('hi')" lang="ts" />
}

Files

ui-examples.mdx

meta.json

package.json

Type Table

Prop

Type

Auto Type Table

Auto Type Table usage

import { AutoTypeTable } from "fumadocs-typescript/ui"

<AutoTypeTable path="./types.ts" name="CreateChatCompletionRequest" />

Inline TOC

Callout Cards Tabs Code Block Type Table Auto Type Table Graph View

Zoomable Image

A normal Banner is suitable for a page-top notice. Use it sparingly in ordinary body content.

A rainbow Banner is suitable for a more prominent temporary notice.

Graph View

Graph View usage

import { GraphView } from "fumadocs-ui/components/graph-view"

<GraphView items={[]} />

Heading

A level-three heading rendered by Heading

Ordinary Markdown headings are usually sufficient in body content. Use Heading only when an explicit component is needed.

buttonVariants

GitHub Info

GithubInfo usage

import { GithubInfo } from "fumadocs-ui/components/github-info"

<GithubInfo owner="fumadocs" repo="fumadocs" />

Layouts

Layout is the page shell for a documentation site, not an ordinary body component. This project currently uses the Docs layout; introduce another layout only when the page shape actually changes.

DocsLayout

The sidebar, search, navigation, and mobile layout used by the current documentation site.

DocsPage

The page shell for each document, responsible for the TOC, body width, title, description, and footer.

NotebookLayout

A notebook-like, multi-column reading layout that requires a separate page entry.

HomeLayout

Suitable for a homepage, marketing page, or non-document directory entry; it does not replace the current docs page.

FluxLayout

Another official documentation layout style; switch only after the overall visual direction is confirmed.

RootProvider

Root capabilities such as search, theme, and internationalization, mounted by the app layout.

PageLastUpdate

Displays the last update time when lastModified is available.

Underlying UI primitives

Official UI primitives

import { buttonVariants } from "fumadocs-ui/components/ui/button"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "fumadocs-ui/components/ui/collapsible"
import { Popover, PopoverContent, PopoverTrigger } from "fumadocs-ui/components/ui/popover"
import { ScrollArea } from "fumadocs-ui/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "fumadocs-ui/components/ui/tabs"

Component registration

mdx-components.tsx

import defaultMdxComponents from "fumadocs-ui/mdx"
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 { File, Files, Folder } from "fumadocs-ui/components/files"
import { GithubInfo } from "fumadocs-ui/components/github-info"
import { Heading } from "fumadocs-ui/components/heading"
import { ImageZoom } from "fumadocs-ui/components/image-zoom"
import { InlineTOC } from "fumadocs-ui/components/inline-toc"
import { Step, Steps } from "fumadocs-ui/components/steps"
import { Tab, Tabs, TabsContent, TabsList, TabsTrigger } from "fumadocs-ui/components/tabs"
import { TypeTable } from "fumadocs-ui/components/type-table"
import { buttonVariants } from "fumadocs-ui/components/ui/button"

UI examples

Body structure

Code and structure

Page shell and navigation

Additional integrations

Quick start

API reference

Troubleshooting guide

Tool integration

Callout

Cards

Accordions

Tabs

Steps

Code Block

Code Block (Dynamic)

Files

Type Table

Auto Type Table

Inline TOC

Zoomable Image

Banner

Graph View

GitHub Info

Heading

buttonVariants

Layouts

Quick start

API contract

External link

When should I use a disclosure?

When should I not use a disclosure?

The first multiple item

The second multiple item

First determine what the user needs to do

Then add the necessary context

Finally give a verification method

A level-three heading rendered by Heading

DocsLayout

DocsPage

NotebookLayout

HomeLayout

FluxLayout

RootProvider

PageLastUpdate

On this page

UI examples

Body structure

Code and structure

Page shell and navigation

Additional integrations

Quick start

API reference

Troubleshooting guide

Tool integration

Callout

Cards

Accordions

Tabs

Steps

Code Block

Code Block (Dynamic)

Files

Type Table

Auto Type Table

Inline TOC

Zoomable Image

Banner

Graph View

GitHub Info

Heading

buttonVariants

Layouts

Quick start

API contract

External link

When should I use a disclosure?

When should I not use a disclosure?

The first multiple item

The second multiple item