> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.manicule.dev/zh/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://mintlify.manicule.dev/zh/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://mintlify.manicule.dev/api/mcp.
> Every agent surface: https://mintlify.manicule.dev/.well-known/llms-manifest.json

# 概览 (/zh/components)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 683 · updated: 2026-07-31 -->

> 浏览 Mintlify 完整组件库，包含适用于 MDX 页面的布局、强调、API 文档和导航元素组件。

Mintlify 为你的文档页面提供了内置的 MDX 组件。使用这些组件来组织内容、突出重要信息、编写 API 文档，并引导读者在文档中导航。

<div id="structure-your-content">
  ## 结构化内容
</div>

<Card title="Tabs" icon="folder" href="/zh/components/tabs">将相关内容组织成可切换的标签视图。</Card>

<Card title="代码组" icon="code" href="/zh/components/code-groups">以多种语言显示代码示例。</Card>

<Card title="步骤" icon="list-ordered" href="/zh/components/steps">以编号格式显示分步说明。</Card>

<Card title="列" icon="columns-3" href="/zh/components/columns">在响应式布局中将内容并排排布。</Card>

<Card title="面板" icon="panel-right" href="/zh/components/panel">创建用于呈现补充内容的侧边栏面板。</Card>

<div id="draw-attention">
  ## 吸引注意力
</div>

<Card title="标注" icon="message-square-warning" href="/zh/components/callouts">使用带样式的警示提示突出重要信息。</Card>

<Card title="横幅" icon="flag" href="/zh/components/banner">在页面顶部显示醒目的公告。</Card>

<Card title="徽章" icon="award" href="/zh/components/badge">添加行内标签和状态指示器。</Card>

<Card title="更新" icon="bell" href="/zh/components/update">突出显示新的或已更新的内容。</Card>

<Card title="框架" icon="frame" href="/zh/components/frames">为图片和内容添加边框和样式效果。</Card>

<Card title="工具提示" icon="message-circle" href="/zh/components/tooltips">鼠标悬停时显示更多信息。</Card>

<div id="showcase-ai-prompts">
  ## 展示 AI 提示
</div>

<Card title="Prompt" icon="sparkles" href="/zh/components/prompt">展示可复制的 AI 提示，并支持与 Cursor 集成。</Card>

<div id="show-and-hide-content">
  ## 显示和隐藏内容
</div>

<Card title="折叠面板" icon="chevron-down" href="/zh/components/accordions">可展开的部分，用于分步展示内容。</Card>

<Card title="可展开区域" icon="chevrons-down" href="/zh/components/expandables">按需显示和隐藏详细内容。</Card>

<Card title="视图" icon="eye" href="/zh/components/view">根据上下文有条件地显示内容。</Card>

<Card title="Visibility" icon="eye-off" href="/zh/components/visibility">控制向人类和 AI 代理显示的内容。</Card>

<div id="document-your-api">
  ## 为 API 编写文档
</div>

<Card title="字段" icon="text-cursor-input" href="/zh/components/fields">展示参数和属性的定义。</Card>

<Card title="响应" icon="arrow-left-right" href="/zh/components/responses">记录 API 响应的结构和字段。</Card>

<Card title="示例" icon="file-code" href="/zh/components/examples">将请求和响应示例并排展示。</Card>

<div id="link-to-other-pages">
  ## 链接到其他页面
</div>

<Card title="卡片" icon="square" href="/zh/components/cards">使用可自定义的容器和图标突出展示内容。</Card>

<Card title="磁贴" icon="layout-grid" href="/zh/components/tiles">以可点击的磁贴网格形式展示内容。</Card>

<div id="add-visual-context">
  ## 添加视觉上下文
</div>

<Card title="图标" icon="smile" href="/zh/components/icons">使用 Lucide 图标库添加视觉提示。</Card>

<Card title="Mermaid 图表" icon="git-branch" href="/zh/components/mermaid-diagrams">创建流程图、时序图等。</Card>

<Card title="颜色" icon="palette" href="/zh/components/color">展示带十六进制值的颜色样本。</Card>

<Card title="Tree" icon="folder-tree" href="/zh/components/tree">展示文件和文件夹的层级结构。</Card>
