Skip to main content

​
Accordion

Collapsible content sections with support for anchoring. 
import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';

​
Accordions Props

​
type
'single' | 'multiple'
Control whether one or multiple items can be open (default: 'single')
​
defaultValue
string | string[]
Default opened accordion value(s)

​
Accordion Props

​
title
string | ReactNode
required
Accordion title displayed in the header
​
value
string
Unique value for the accordion item (defaults to stringified title)
​
id
string
HTML id for deep linking

​
Usage

<Accordions type="single">
  <Accordion title="What is Fumadocs?" id="what-is-fumadocs">
    Fumadocs is a documentation framework for Next.js.
  </Accordion>
  <Accordion title="How do I get started?">
    Check out our getting started guide.
  </Accordion>
</Accordions>
Sticky banner for announcements with optional dismissal. 
import { Banner } from 'fumadocs-ui/components/banner';

​
Props

​
id
string
Unique identifier for localStorage persistence
​
variant
'rainbow' | 'normal'
Banner style variant (default: 'normal')
​
height
string
Banner height (default: '3rem')
​
rainbowColors
string[]
Custom colors for rainbow variant
​
changeLayout
boolean
Adjust layout spacing for banner (default: true)

​
Usage

<Banner id="announcement-2024" variant="rainbow">
  🎉 New feature released! <a href="/blog">Learn more</a>
</Banner>

​
Callout

Highlight important information with styled callouts. 
import { Callout } from 'fumadocs-ui/components/callout';

​
Props

​
type
'info' | 'warn' | 'error' | 'success' | 'warning' | 'idea'
Callout type determining icon and color (default: 'info')
​
title
ReactNode
Callout title
​
icon
ReactNode
Custom icon to override default

​
Usage

<Callout type="warn" title="Warning">
  This action cannot be undone.
</Callout>

<Callout type="info">
  This is an informational message.
</Callout>

​
Card & Cards

Grid layout for displaying cards with links. 
import { Cards, Card } from 'fumadocs-ui/components/card';

​
Card Props

​
title
ReactNode
required
Card title
​
description
ReactNode
Card description text
​
icon
ReactNode
Icon displayed at the top of the card
​
href
string
Link URL (makes card clickable)
​
external
boolean
Open link in new tab

​
Usage

<Cards>
  <Card 
    title="Getting Started" 
    description="Learn the basics"
    icon={<BookIcon />}
    href="/docs/getting-started"
  />
  <Card 
    title="API Reference" 
    description="Explore the API"
    href="/docs/api"
  />
</Cards>

​
CodeBlock

Syntax-highlighted code blocks with copy functionality. 
import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';

​
CodeBlock Props

​
title
string
Code block title/filename
​
icon
ReactNode
Icon or HTML string for title bar
​
allowCopy
boolean
Show copy button (default: true)
​
keepBackground
boolean
Preserve Shiki/Rehype Code background (default: false)
​
data-line-numbers
boolean
Show line numbers
​
data-line-numbers-start
number
Starting line number (default: 1)
​
Actions
Component
Custom actions component for toolbar

​
Usage

<CodeBlock title="example.ts" data-line-numbers>
  <Pre>
    <code>{`const hello = "world";`}</code>
  </Pre>
</CodeBlock>

​
CodeBlock Tabs

Tabbed interface for multiple code examples. 
import { 
  CodeBlockTabs, 
  CodeBlockTabsList,
  CodeBlockTabsTrigger,
  CodeBlockTab 
} from 'fumadocs-ui/components/codeblock';

​
Usage

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger>
    <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger>
  </CodeBlockTabsList>
  <CodeBlockTab value="npm">
    <CodeBlock>
      <Pre><code>npm install fumadocs</code></Pre>
    </CodeBlock>
  </CodeBlockTab>
  <CodeBlockTab value="pnpm">
    <CodeBlock>
      <Pre><code>pnpm add fumadocs</code></Pre>
    </CodeBlock>
  </CodeBlockTab>
</CodeBlockTabs>

​
Files & File/Folder

File tree visualization component. 
import { Files, File, Folder } from 'fumadocs-ui/components/files';

​
File Props

​
name
string
required
File name
​
icon
ReactNode
Custom file icon

​
Folder Props

​
name
string
required
Folder name
​
defaultOpen
boolean
Open folder by default (default: false)
​
disabled
boolean
Disable folder interaction

​
Usage

<Files>
  <Folder name="src" defaultOpen>
    <File name="index.ts" />
    <File name="app.ts" />
  </Folder>
  <File name="package.json" />
</Files>

​
ImageZoom

Zoomable images with react-medium-image-zoom. 
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';

​
Props

Extends Next.js ImageProps
​
zoomInProps
ComponentProps<'img'>
Image props when zoomed in
​
rmiz
UncontrolledProps
Props for react-medium-image-zoom

​
Usage

<ImageZoom 
  src="/screenshot.png" 
  alt="Screenshot" 
  width={800}
  height={600}
/>

​
Steps & Step

Sequential step-by-step instructions. 
import { Steps, Step } from 'fumadocs-ui/components/steps';

​
Usage

<Steps>
  <Step>
    ## Install the package
    
    Run the installation command.
  </Step>
  <Step>
    ## Configure your app
    
    Add the configuration file.
  </Step>
</Steps>

​
Tabs & Tab

Tabbed content interface. 
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';

​
Tabs Props

​
items
string[]
Array of tab labels (simple mode)
​
defaultIndex
number
Default selected tab index when using items (default: 0)
​
label
ReactNode
Additional label in tab list

​
Tab Props

​
value
string
Tab value (auto-detected from index if using items)

​
Usage

<Tabs items={['Preview', 'Code']}>
  <Tab>
    <ComponentPreview />
  </Tab>
  <Tab>
    <CodeExample />
  </Tab>
</Tabs>

​
TypeTable

Display TypeScript prop types with expandable details. 
import { TypeTable } from 'fumadocs-ui/components/type-table';

​
Props

​
type
Record<string, TypeNode>
required
Object mapping prop names to type definitions

​
TypeNode Interface

​
type
ReactNode
required
Short type signature
​
description
ReactNode
Field description
​
typeDescription
ReactNode
Full type signature
​
typeDescriptionLink
string
Link for the type
​
default
ReactNode
Default value
​
required
boolean
Mark field as required
​
deprecated
boolean
Mark field as deprecated
​
parameters
ParameterNode[]
Function parameters
​
returns
ReactNode
Function return type

​
Usage

<TypeTable
  type={{
    name: {
      type: 'string',
      description: 'Component name',
      required: true
    },
    size: {
      type: "'sm' | 'md' | 'lg'",
      description: 'Component size',
      default: "'md'"
    }
  }}
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us