# GitHub (/zh/components/github)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 261 · updated: 2026-09-23 -->
Related: [折叠面板](/zh/components/accordions.md), [徽章](/zh/components/badge.md), [横幅](/zh/components/banner.md), [标注框](/zh/components/callouts.md), [卡片](/zh/components/cards.md), [代码分组](/zh/components/code-groups.md)

使用 `<GitHub.Repo>` 组件嵌入一张链接到公开 GitHub 仓库的卡片。页面加载时，卡片会从 GitHub 公共 API 获取仓库的描述、star 数量和 fork 数量。

<div id="basic-repository-card">
  ## 基础仓库卡片 [#基础仓库卡片]
</div>

以 `owner/name` slug 或完整的 GitHub URL 形式传入仓库。

```mdx title="react"
<GitHub.Repo repo="mintlify/docs" />
```

<div id="variants">
  ## 变体 [#变体]
</div>

在 `inset` 和 `flat` 两种布局之间选择，以匹配周围页面的样式。

<div id="inset">
  ### Inset [#inset]
</div>

默认变体。将仓库信息包裹在圆角的内嵌面板中。

```mdx
<GitHub.Repo repo="mintlify/docs" variant="inset" />
```

<div id="flat">
  ### Flat [#flat]
</div>

单层布局，间距更紧凑。当你需要在其他带边框元素旁嵌入卡片时，使用 `flat`。

```mdx
<GitHub.Repo repo="mintlify/docs" variant="flat" />
```

<div id="properties">
  ## 属性 [#属性]
</div>

<ResponseField name="repo" type="string">
  要显示的 GitHub 仓库。接受 `owner/name` slug（例如 `mintlify/docs`）或完整的 GitHub URL（例如 `https://github.com/mintlify/docs`）。
</ResponseField>

<ResponseField name="variant" type="string" default="inset">
  卡片布局。

  可选值：`inset`、`flat`。
</ResponseField>

<ResponseField name="className" type="string">
  应用于卡片的额外 CSS 类。
</ResponseField>