LogoMkSaaS 文件
LogoMkSaaS 文件
首頁

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewThemesSearch
Components
AccordionBannerCode Block (Dynamic)FilesGitHub InfoZoomable ImageInline TOCRoot ToggleStepsTabsType Table
MDX
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

目錄

Usage