Components
Additional components to improve your docs
Fumadocs UI provides a set of components to enhance your documentation. These components are designed to work seamlessly with the Fumadocs ecosystem.
Available Components
Cards
Display content in a card format with optional links.
<Cards>
<Card title="Getting Started" href="/docs">
Learn how to get started with Fumadocs
</Card>
<Card title="Components" href="/docs/components">
Explore available components
</Card>
</Cards>Callout
Display important information with different severity levels.
<Callout>This is an info callout</Callout>
<Callout type="warn">This is a warning callout</Callout>
<Callout type="error">This is an error callout</Callout>This is an info callout
This is a warning callout
This is an error callout
Tabs
Organize content in tabbed sections.
<Tabs items={["Tab 1", "Tab 2", "Tab 3"]}>
<Tab value="Tab 1">Content for Tab 1</Tab>
<Tab value="Tab 2">Content for Tab 2</Tab>
<Tab value="Tab 3">Content for Tab 3</Tab>
</Tabs>Content for Tab 1
Content for Tab 2
Content for Tab 3
Steps
Display a series of steps.
<Steps>
<Step>
### First Step
Do this first.
</Step>
<Step>
### Second Step
Then do this.
</Step>
<Step>
### Third Step
Finally, do this.
</Step>
</Steps>Files
Display file tree structure.
<Files>
<Folder name="app" defaultOpen>
<File name="layout.tsx" />
<File name="page.tsx" />
<Folder name="docs">
<File name="layout.tsx" />
<File name="page.tsx" />
</Folder>
</Folder>
<File name="package.json" />
</Files>layout.tsx
page.tsx
package.json
Image Zoom
Make images zoomable on click.
import { ImageZoom } from "fumadocs-ui/components/image-zoom";
<ImageZoom src="/image.png" alt="Description" />Customizing Components
All components accept standard HTML attributes like className and style, allowing you to customize their appearance:
<Callout className="bg-blue-100">Custom styled callout</Callout>Adding Components to MDX
Components are automatically available in your MDX files when configured in your page component:
import defaultMdxComponents from "fumadocs-ui/mdx";
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import { Callout } from "fumadocs-ui/components/callout";
<MDX
components={{
...defaultMdxComponents,
Tabs,
Tab,
Callout,
}}
/>;