---
title: "GitHub"
description: "Use the GitHub component to embed a public repository card with a live description, star count, and fork count on any documentation page."
keywords: ["github", "repo", "repository", "stars", "forks"]
boost: 3
tag: "New"
---

Use the `<GitHub.Repo>` component to embed a card that links to a public GitHub repository. The card fetches the repository's description, star count, and fork count from the public GitHub API when the page loads.

## Basic repository card

Pass a repository as either an `owner/name` slug or a full GitHub URL.

<GitHub.Repo repo="mintlify/docs" />

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

## Variants

Choose between the `inset` and `flat` layouts to match the surrounding page.

### Inset

The default variant. Wraps the repository details in a rounded inner surface.

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

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

### Flat

A single-surface layout with tighter padding. Use `flat` when embedding the card next to other bordered elements.

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

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

## Properties

<ResponseField name="repo" type="string">
  The GitHub repository to display. Accepts an `owner/name` slug (for example, `mintlify/docs`) or a full GitHub URL (for example, `https://github.com/mintlify/docs`).
</ResponseField>

<ResponseField name="variant" type="string" default="inset">
  Card layout.

  Options: `inset`, `flat`.
</ResponseField>

<ResponseField name="className" type="string">
  Additional CSS classes to apply to the card.
</ResponseField>