Overview
Fumadocs UI provides a rich set of components for creating beautiful documentation content. All components are designed for MDX and support TypeScript.
Content Components
Card
Display highlighted content in a card layout.
import { Card, Cards } from 'fumadocs-ui/components/card';
Example
<Cards>
<Card
title="Getting Started"
description="Learn the basics of Fumadocs"
href="/docs/getting-started"
/>
<Card
title="API Reference"
description="Complete API documentation"
href="/docs/api"
/>
</Cards>
Props
Callout
Highlight important information with different severity levels.
import { Callout } from 'fumadocs-ui/components/callout';
Example
This is an informational callout with useful details.
Be careful when using this feature in production.
This operation cannot be undone.
<Callout type="info" title="Information">
This is an informational callout.
</Callout>
<Callout type="warning" title="Warning">
Be careful when using this feature.
</Callout>
Props
Accordion
Collapsible sections for organizing content.
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
Example
<Accordions type="single">
<Accordion title="What is Fumadocs?" id="what-is-fumadocs">
Fumadocs is a documentation framework built for Next.js.
</Accordion>
<Accordion title="How do I get started?" id="getting-started">
Install fumadocs-ui and follow the quick start guide.
</Accordion>
</Accordions>
Props
Accordions Container:
Accordion Item:
Tabs
Tabbed content sections.
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
Example
Tab Title
Tab Title
Tab Title
Props
Tabs Container:
Tab:
CodeBlock
Syntax-highlighted code blocks with copy functionality.
import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
Example
<CodeBlock title="example.tsx">
<Pre>
<code>
{`export default function Component() {
return <div>Hello World</div>;
}`}
</code>
</Pre>
</CodeBlock>
Props
Steps
Numbered steps for tutorials and guides.
import { Steps, Step } from 'fumadocs-ui/components/steps';
Example
<Steps>
<Step>
### Install Dependencies
Run `npm install fumadocs-ui`
</Step>
<Step>
### Configure Layout
Create your docs layout file
</Step>
<Step>
### Start Building
Add your first documentation page
</Step>
</Steps>
Files
Display file tree structures.
import { Files, File, Folder } from 'fumadocs-ui/components/files';
Example
<Files>
<Folder name="app" defaultOpen>
<Folder name="docs">
<File name="layout.tsx" />
<File name="page.tsx" />
</Folder>
<File name="layout.tsx" />
</Folder>
<File name="package.json" />
</Files>
Props
File:
Folder:
Banner
Display announcements at the top of pages.
import { Banner } from 'fumadocs-ui/components/banner';
Example
<Banner id="new-release" variant="rainbow">
🎉 Version 2.0 is now available!
</Banner>
Props
TypeTable
Document component props and API interfaces.
import { TypeTable } from 'fumadocs-ui/components/type-table';
Example
<TypeTable
type={{
name: {
type: 'string',
required: true,
description: 'Component name',
},
enabled: {
type: 'boolean',
default: 'true',
description: 'Enable the feature',
},
}}
/>
Type Definition
ImageZoom
Zoomable images with medium-zoom integration.
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
import 'fumadocs-ui/image-zoom.css';
Example
<ImageZoom
src="/screenshot.png"
alt="Application screenshot"
width={800}
height={600}
/>
Props
Page Components
DocsPage
Main page wrapper with TOC and navigation.
import { DocsPage, DocsBody, DocsTitle, DocsDescription } from 'fumadocs-ui/layouts/docs/page';
Example
<DocsPage toc={page.toc}>
<DocsTitle>{page.title}</DocsTitle>
<DocsDescription>{page.description}</DocsDescription>
<DocsBody>{page.body}</DocsBody>
</DocsPage>
Props
Component Composition
Nested Code Blocks
Combine tabs with code blocks for framework-specific examples:
export default function App() {
return <div>React App</div>
}
<template>
<div>Vue App</div>
</template>
Cards with Icons
import { BookOpen, Code, Palette } from 'lucide-react';
<Cards>
<Card
title="Documentation"
icon={<BookOpen />}
href="/docs"
/>
<Card
title="API Reference"
icon={<Code />}
href="/api"
/>
<Card
title="Theming"
icon={<Palette />}
href="/theming"
/>
</Cards>