## 结构化内容

[**Tabs**  \  \ 将相关内容组织成可切换的标签视图。](/content/docs/zh/components/tabs/index.html)

[**代码组**  \  \ 以多种语言显示代码示例。](/content/docs/zh/components/code-groups/index.html)

[**步骤**  \  \ 以编号格式显示分步说明。](/content/docs/zh/components/steps/index.html)

[**列**  \  \ 在响应式布局中将内容并排排布。](/content/docs/zh/components/columns/index.html)

[**面板**  \  \ 创建用于呈现补充内容的侧边栏面板。](/content/docs/zh/components/panel/index.html)

## 吸引注意力

[**标注**  \  \ 使用带样式的警示提示突出重要信息。](/content/docs/zh/components/callouts/index.html)

[**横幅**  \  \ 在页面顶部显示醒目的公告。](/content/docs/zh/components/banner/index.html)

[**徽章**  \  \ 添加行内标签和状态指示器。](/content/docs/zh/components/badge/index.html)

[**更新**  \  \ 突出显示新的或已更新的内容。](/content/docs/zh/components/update/index.html)

[**框架**  \  \ 为图片和内容添加边框和样式效果。](/content/docs/zh/components/frames/index.html)

[**工具提示**  \  \ 鼠标悬停时显示更多信息。](/content/docs/zh/components/tooltips/index.html)

## 展示 AI 提示

[**Prompt**  \  \ 展示可复制的 AI 提示，并支持与 Cursor 集成。](/content/docs/zh/components/prompt/index.html)

## 显示和隐藏内容

[**折叠面板**  \  \ 可展开的部分，用于分步展示内容。](/content/docs/zh/components/accordions/index.html)

[**可展开区域**  \  \ 按需显示和隐藏详细内容。](/content/docs/zh/components/expandables/index.html)

[**视图**  \  \ 根据上下文有条件地显示内容。](/content/docs/zh/components/view/index.html)

[**MDX**  \  \ 在 JSX 表达式和条件语句中渲染 Markdown。](/content/docs/zh/components/mdx/index.html)

[**Visibility**  \  \ 控制向人类和 AI 代理显示的内容。](/content/docs/zh/components/visibility/index.html)

## 为 API 编写文档

[**字段**  \  \ 展示参数和属性的定义。](/content/docs/zh/components/fields/index.html)

[**响应**  \  \ 记录 API 响应的结构和字段。](/content/docs/zh/components/responses/index.html)

[**示例**  \  \ 将请求和响应示例并排展示。](/content/docs/zh/components/examples/index.html)

## 链接到其他页面

[**卡片**  \  \ 使用可自定义的容器和图标突出展示内容。](/content/docs/zh/components/cards/index.html)

[**磁贴**  \  \ 以可点击的磁贴网格形式展示内容。](/content/docs/zh/components/tiles/index.html)

## 添加视觉上下文

[**图标**  \  \ 使用 Lucide 图标库添加视觉提示。](/content/docs/zh/components/icons/index.html)

[**Mermaid 图表**  \  \ 创建流程图、时序图等。](/content/docs/zh/components/mermaid-diagrams/index.html)

[**颜色**  \  \ 展示带十六进制值的颜色样本。](/content/docs/zh/components/color/index.html)

[**Tree**  \  \ 展示文件和文件夹的层级结构。](/content/docs/zh/components/tree/index.html)

[**GitHub**  \  \ 嵌入 GitHub 仓库卡片，实时显示 star 和 fork 数量。](/content/docs/zh/components/github/index.html)

## 设置组件样式

所有内置组件都接受 `className` prop。Mintlify 会将你的类与组件自身的样式合并，因此你无需额外包裹标记或编写 CSS 覆盖，即可重新设置单个实例的样式。

className example

```jsx
<Note className="mt-0">This callout has no top margin.</Note>
```

可以使用 [Tailwind CSS](/content/docs/zh/customize/custom-scripts#style-with-tailwind-css/index.html) 类，包括诸如 `w-[350px]` 之类的 [任意值](/content/docs/zh/customize/custom-scripts#arbitrary-values-and-variants/index.html)，或你在 [自定义 CSS 文件](/content/docs/zh/customize/custom-scripts#add-custom-css/index.html) 中定义的类名。[Banner](/content/docs/zh/components/banner/index.html)、 [MDX](/content/docs/zh/components/mdx/index.html) 和 [Visibility](/content/docs/zh/components/visibility/index.html) 不接受 `className`。横幅在 `docs.json` 中配置，另外两个组件则直接渲染其子元素，没有包裹元素。