# GitHub (/components/github)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 339 · updated: 2026-09-23 -->
Related: [Accordions](/components/accordions.md), [Badge](/components/badge.md), [Banner](/components/banner.md), [Callouts](/components/callouts.md), [Cards](/components/cards.md), [Code groups](/components/code-groups.md)

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 [#basic-repository-card]

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

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

## Variants [#variants]

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

### Inset [#inset]

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

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

### Flat [#flat]

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

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

## Properties [#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>