LogoDocumentación de PatentFig
LogoDocumentación de PatentFig
Página de inicio

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewSearch
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

Tabla de contenidos

Usage