---
title: "GitHub info"
description: "A link to a GitHub repository with its star and fork counts."
url: https://docscn.dev/docs/components/github-info
lastModified: 2026-10-08T07:54:30.000Z
---

# GitHub info (/docs/components/github-info)

> A link to a GitHub repository with its star and fork counts.

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/github-info
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/github-info
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/github-info
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/github-info
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

`GithubInfo` is a React Server Component that fetches the counts from GitHub's API, cached for 60 seconds. It fits in the sidebar's footer or the layout's links:

```tsx title="lib/layout.shared.tsx"
import { GithubInfo } from "@/components/docs/components/github-info";

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        type: "custom",
        children: <GithubInfo owner="ruiyuwg" repo="docscn" />,
      },
    ],
  };
}
```

Unauthenticated requests to GitHub's API are rate limited. Pass a `token` (for example `process.env.GITHUB_TOKEN`) on busy sites.

`fetchRepositoryInfo()` returns the counts without the link.

## Props [#props]

<TypeTable
  type="{
  owner: {
    type: &#x22;string&#x22;,
    required: true,
  },
  repo: {
    type: &#x22;string&#x22;,
    required: true,
  },
  token: {
    description: <>A GitHub token for the API request.</>,
    type: &#x22;string&#x22;,
  },
  baseUrl: {
    description: <>The API's URL, for GitHub Enterprise.</>,
    type: &#x22;string&#x22;,
    default: '&#x22;https://api.github.com&#x22;',
  },
  fetchOptions: {
    description: (
      <>
        Options for <code>{&#x22;fetch&#x22;}</code>.
      </>
    ),
    type: &#x22;RequestInit&#x22;,
    default: &#x22;{ next: { revalidate: 60 } }&#x22;,
  },
  locale: {
    description: <>The locale for the compact counts, such as 1.2K.</>,
    type: &#x22;Intl.LocalesArgument&#x22;,
  },
}"
/>