LogoMkSaaS Docs
    LogoMkSaaS Docs
    Homepage

    Introduction

    Quick StartWhat is FumadocsComparisons

    Setup

    Manual InstallationStatic Export

    Writing

    MarkdownInternationalization

    UI

    OverviewThemesSearch
    Components
    AccordionBannerCode Block (Dynamic)FilesGitHub InfoZoomable ImageInline TOCRoot ToggleStepsTabsType Table
    MDX
    X (Twitter)
    Components

    GitHub Info

    Display your GitHub repository information

    Usage

    import { GithubInfo } from 'fumadocs-ui/components/github-info';
    
    <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 type { ReactNode } from 'react';
    import { baseOptions } from '@/app/layout.config';
    import { source } from '@/lib/source';
    import { GithubInfo } from 'fumadocs-ui/components/github-info';
    
    const docsOptions: DocsLayoutProps = {
      ...baseOptions,
      tree: source.pageTree,
      links: [
        {
          type: 'custom',
          children: (
            <GithubInfo owner="fuma-nama" repo="fumadocs" className="lg:-mx-2" />
          ),
        },
      ],
    };
    
    export default function Layout({ children }: { children: ReactNode }) {
      return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
    }

    Files

    Display file structure in your documentation

    Zoomable Image

    Allow zoom-in images in your documentation

    Table of Contents

    Usage