Fumadocs UI

Fumadocs UI Usage Guide

Fumadocs UI provides beautiful documentation themes and interactive components.

Component Library

Accordion

import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

<Accordions type="single">
  <Accordion title="What is Fumadocs?">
    Fumadocs is a documentation framework...
  </Accordion>
  <Accordion title="How to use?">
    You can use it with Next.js, React Router, etc.
  </Accordion>
</Accordions>

Props:

• type: 'single' | 'multiple'
• disabled: boolean
• orientation: 'vertical' | 'horizontal'

Linking to Accordion

<Accordions>
  <Accordion title="My Title" id="my-title">
    Content
  </Accordion>
</Accordions>

Automatically opens when navigating to the page with the specified id:

<Link href="/docs?#my-title">Jump to my title</Link>

Tabs

import { Tabs, TabsContent, TabsList, TabsTrigger } from 'fumadocs-ui/components/tabs';

<Tabs defaultValue="docs">
  <TabsList>
    <TabsTrigger value="docs">Documentation</TabsTrigger>
    <TabsTrigger value="api">API Reference</TabsTrigger>
    <TabsTrigger value="examples">Examples</TabsTrigger>
  </TabsList>
  <TabsContent value="docs">
    Documentation content...
  </TabsContent>
  <TabsContent value="api">
    API documentation...
  </TabsContent>
</Tabs>

Props:

• value: Currently selected value
• defaultValue: Default value

Steps

import { Steps, Step, StepList } from 'fumadocs-ui/components/steps';

<Steps>
  <StepList>
    <Step title="Install">npm install fumadocs</Step>
    <Step title="Configure">Update config files</Step>
    <Step title="Run">npm run dev</Step>
  </StepList>
</Steps>

Code Block

import { CodeBlock, DynamicCodeBlock } from 'fumadocs-ui/components/codeblock';

<CodeBlock filename="example.ts">
  console.log('Hello, Fumadocs!');
</CodeBlock>

<CodeBlock
  filename="index.tsx"
  language="typescript"
  showLineNumbers
>
  export default function App() {
    return <div>Hello World</div>;
  }
</CodeBlock>

// Dynamic code block
<DynamicCodeBlock code={codeString} language="typescript" />

Props:

• filename: File name
• language: Language type
• showLineNumbers: Show line numbers
• copyButton: Show copy button

Banner

import { Banner } from 'fumadocs-ui/components/banner';

<Banner>
  ⚠️ New feature coming soon! Check out the beta version.
</Banner>

<Banner variant="info">
  ℹ️ Documentation is being updated.
</Banner>

Props:

• variant: 'default' | 'info' | 'warning' | 'success'

Files

import { Files } from 'fumadocs-ui/components/files';

<Files>
  <Files.Item name="src" type="folder">
    <Files.Item name="components" type="folder">
      <Files.Item name="Button.tsx" type="file" />
      <Files.Item name="Input.tsx" type="file" />
    </Files.Item>
    <Files.Item name="App.tsx" type="file" />
  </Files.Item>
</Files>

GitHub Info

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

<GitHubInfo
  repository="fuma-nama/fumadocs"
  branch="main"
/>

Inline TOC

import { InlineTOC } from 'fumadocs-ui/components/inline-toc';

<InlineTOC />

Layout System

Docs Layout

Standard documentation layout (sidebar + header + TOC):

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { source } from '@/lib/source';

export default function DocsLayout({ children }: { children: React.ReactNode }) {
  return (
    <DocsLayout
      tree={source.getPageTree()}
      sidebar={{ enabled: true }}
      header={{ title: 'My Documentation' }}
    >
      {children}
    </DocsLayout>
  );
}

Sidebar Configuration

<DocsLayout
  tree={source.getPageTree()}
  sidebar={{
    enabled: true,
    tabs: true, // Enable tabs
    collapsible: true, // Collapsible
    defaultOpenLevel: 2, // Default open level
    prefetch: true, // Prefetch
  }}
>
  {children}
</DocsLayout>

Sidebar Breadcrumb

<DocsLayout
  tree={source.getPageTree()}
  sidebar={{
    enabled: true,
    banner: <div>Welcome to our docs!</div>,
  }}
>
  {children}
</DocsLayout>

Flux Layout

Minimalist layout, suitable for technical blogs:

import { FluxLayout } from 'fumadocs-ui/layouts/flux';
import { source } from '@/lib/source';

export default function FluxLayout({ children }: { children: React.ReactNode }) {
  return (
    <FluxLayout tree={source.getPageTree()}>
      {children}
    </FluxLayout>
  );
}

Home Layout

Homepage layout, ideal as a website entry point:

import { HomeLayout } from 'fumadocs-ui/layouts/home-layout';

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

Notebook Layout

Notebook-style layout, compact for technical documentation:

import { NotebookLayout } from 'fumadocs-ui/layouts/notebook';
import { source } from '@/lib/source';

export default function NotebookLayout({ children }: { children: React.ReactNode }) {
  return (
    <NotebookLayout tree={source.getPageTree()}>
      {children}
    </NotebookLayout>
  );
}

Search UI

Basic Search Dialog

'use client';
import { SearchDialog, SearchDialogList } from 'fumadocs-ui/components/dialog/search';

export default function SearchDialog() {
  const { search, setSearch, query } = useDocsSearch();

  return (
    <SearchDialog search={search}
      <SearchDialogList items={query.data} />
    </SearchDialog>
  );
}

Complete Search Dialog

'use client';
import {
  SearchDialog,
  SearchDialogClose,
  SearchDialogContent,
  SearchDialogHeader,
  SearchDialogList,
  SearchDialogOverlay,
} from 'fumadocs-ui/components/dialog/search';

export default function CustomSearchDialog() {
  const { search, setSearch, query } = useDocsSearch();
  const [isFocused, setIsFocused] = useState(false);

  return (
    <SearchDialog search={search}
      <SearchDialogOverlay className={isFocused ? 'opacity-100' : 'opacity-0'} />
      <SearchDialogContent className={isFocused ? 'scale-100' : 'scale-95'}>
        <SearchDialogHeader>
          <SearchDialogIcon />
          <SearchDialogInput />
          <SearchDialogClose />
        </SearchDialogHeader>
        <SearchDialogList items={query.data !== 'empty' ? query.data : null} />
      </SearchDialogContent>
    </SearchDialog>
  );
}

Tag Filtering

'use client';
import {
  SearchDialog,
  SearchDialogContent,
  SearchDialogFooter,
  SearchDialogOverlay,
  TagsList,
  TagsListItem,
} from 'fumadocs-ui/components/dialog/search';
import { useState } from 'react';

export default function TagFilterSearchDialog() {
  const [tag, setTag] = useState<string | undefined>();

  const { search, setSearch, query } = useDocsSearch({
    tag,
  });

  return (
    <SearchDialog search={search}
      <SearchDialogOverlay />
      <SearchDialogContent>
        <SearchDialogHeader>
          <SearchDialogIcon />
          <SearchDialogInput />
          <SearchDialogClose />
        </SearchDialogHeader>
        <SearchDialogList items={query.data !== 'empty' ? query.data : null} />
        <SearchDialogFooter className="flex flex-row">
          <TagsList tag={tag}
            <TagsListItem value="getting-started">Getting Started</TagsListItem>
            <TagsListItem value="api">API Reference</TagsListItem>
            <TagsListItem value="guides">Guides</TagsListItem>
          </TagsList>
        </SearchDialogFooter>
      </SearchDialogContent>
    </SearchDialog>
  );
}

Custom Result List

'use client';
import {
  SearchDialog,
  SearchDialogContent,
  SearchDialogList,
  SearchDialogOverlay,
} from 'fumadocs-ui/components/dialog/search';

export default function CustomSearchDialog() {
  const { search, setSearch, query } = useDocsSearch();

  return (
    <SearchDialog search={search}
      <SearchDialogOverlay />
      <SearchDialogContent>
        <SearchDialogHeader>
          <SearchDialogIcon />
          <SearchDialogInput />
        </SearchDialogHeader>
        <SearchDialogList
          items={query.data !== 'empty' ? query.data : null}
          renderItem={(item) => (
            <div className="p-4 border-b">
              <h3 className="font-semibold">{item.title}</h3>
              <p className="text-sm text-muted-foreground">{item.description}</p>
              <Link href={item.url} className="text-blue-500">
                Read more →
              </Link>
            </div>
          )}
        />
      </SearchDialogContent>
    </SearchDialog>
  );
}

Theme Configuration

Basic Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        fd: {
          primary: '#3b82f6',
          secondary: '#64748b',
          accent: '#f59e0b',
          background: '#ffffff',
          foreground: '#0f172a',
          muted: '#f1f5f9',
          'muted-foreground': '#64748b',
          border: '#e2e8f0',
        },
      },
    },
  },
};

Base UI vs Radix UI

Default uses Radix UI:

import { RootProvider } from 'fumadocs-ui/provider/nextjs';

<RootProvider>
  {children}
</RootProvider>

Switch to Base UI:

// cli.json
{
  "uiLibrary": "base-ui"
}

CSS Variable Customization

Fumadocs uses CSS variables for color customization:

:root {
  --fd-primary: #3b82f6;
  --fd-secondary: #64748b;
  --fd-accent: #f59e0b;
  --fd-background: #ffffff;
  --fd-foreground: #0f172a;
  --fd-muted: #f1f5f9;
  --fd-muted-foreground: #64748b;
  --fd-border: #e2e8f0;
  --fd-sidebar-width: 280px;
  --fd-header-height: 60px;
}

Reference Documentation:

• UI Documentation
• Component Library
• Layouts
• Search UI