Fumadocs

GitHub Info

Display your GitHub repository information

Install to your codebase

Easier customisation & control.

Usage

import { GithubInfo } from 'fumadocs-ui/components/github-info';

export function MyComp() {
  return (
    <GithubInfo
      owner="fuma-nama"
      repo="fumadocs"
      // your own GitHub access token (optional)
      token={process.env.GITHUB_TOKEN}
    />
  );
}

It's recommended to add it to your docs layout with links option:

app/docs/layout.tsx
import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import { GithubInfo } from 'fumadocs-ui/components/github-info';

function docsOptions(): DocsLayoutProps {
  return {
    ...baseOptions(),
    tree: source.pageTree,
    links: [
      {
        type: 'custom',
        children: (
          <GithubInfo owner="fuma-nama" repo="fumadocs" className="lg:-mx-2" />
        ),
      },
    ],
  };
}

export default function Layout({ children }: { children: React.ReactNode }) {
  return <DocsLayout {...docsOptions()}>{children}</DocsLayout>;
}

How is this guide?

Last updated on

On this page