mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Kaishan (Sam) Ding
60 lines
1.6 KiB
Plaintext
60 lines
1.6 KiB
Plaintext
---
|
|
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>
|