UI示例
当前文档站可直接使用的 Fumadocs 组件、尺寸和变体参考。
只使用现有 Fumadocs 能力
本页基于项目当前安装的 fumadocs-ui，用于写文档时快速选择合适的组件、尺寸和变体；不引入新的 UI 库。
组件索引
本页覆盖 Callout、Cards、Card、Accordion、Accordions、Tabs、Tab、TabsList、TabsTrigger、TabsContent、Steps、Step、TypeTable、Files、Folder、File、CodeBlock、CodeBlockTabs、DynamicCodeBlock、Banner、Heading、ImageZoom、InlineTOC、GithubInfo 和 buttonVariants。
Fumadocs UI
组件总览
标题 H1-H6、链接、图片、表格、代码块、Cards、Callout
type: info / warn / warning / error / success / idea
卡片网格、图标、描述、href 跳转
single / multiple，可用 id 支持 hash 定位
simple items、defaultIndex、groupId、persist、advanced TabsList
步骤流
字段、类型、默认值、必填、弃用、参数和返回值
Files / Folder / File，支持 defaultOpen
标题、复制按钮、行号、tabbed code blocks
运行时高亮，适合从变量渲染代码
variant: normal / rainbow；height 可自定义
as: h1 / h2 / h3 / h4 / h5 / h6
点击放大图片
页面内目录
服务端 GitHub 仓库信息组件，真实使用时会请求 GitHub API
variant/color: primary / secondary / outline / ghost；size: sm / icon / icon-sm / icon-xs
Default MDX
标题、链接、表格和按钮尺寸
H1 页面主标题
H2 页面章节
H3 小节标题
H4 细分主题
H5 紧凑标题
H6 辅助标题
| 组件 | 适合场景 | 尺寸/变体 |
|---|---|---|
| Callout | 提示、警告、错误、成功反馈 | 6 种 type |
| buttonVariants | 自定义轻按钮和图标按钮 | 4 种 variant，4 种显式 size |
Feedback
Callout 全部类型
信息提示：info
警告提示（别名）：warn
警告提示：warning
错误提示：error
成功提示：success
想法提示：idea
Navigation
Cards、Accordion、Tabs 和 InlineTOC
教程入口
带 icon、标题和描述，适合入口型文档。
API 契约
带 href 时会渲染为链接卡片。
Process
Steps、TypeTable 和 Files
选择组件
先按页面信息结构选择 Callout、Cards、Tabs 或 TypeTable。
复制最小写法
从这个页面挑一个最接近的示例，再替换成正式内容。
Prop
Type
Code
代码块全部常用形态
const response = await fetch('/v1/chat/completions', {
method: 'POST',
headers: {
Authorization: 'Bearer USER_API_KEY',
'Content-Type': 'application/json',
},
})这段内容不显示复制按钮。curl https://dingjiai.com/v1/models \
-H "Authorization: Bearer USER_API_KEY"Media and Site Notices
Banner、ImageZoom 和 GitHubInfo
点击图片可查看放大效果。
这是服务端组件，真实渲染会请求 GitHub API；页面正文里需要时再使用。
import { GithubInfo } from 'fumadocs-ui/components/github-info'
<GithubInfo owner="fuma-nama" repo="fumadocs" />Copy Reference
常用导入示例
import defaultMdxComponents from 'fumadocs-ui/mdx'
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'
import { Banner } from 'fumadocs-ui/components/banner'
import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock'
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock'
import { File, Files, Folder } from 'fumadocs-ui/components/files'
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 } from 'fumadocs-ui/components/tabs'
import { TypeTable } from 'fumadocs-ui/components/type-table'
import { buttonVariants } from 'fumadocs-ui/components/ui/button'当前边界