Components

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>

Getting Started

Learn how to get started with Fumadocs

Explore available components

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>

First Step

Do this first.

Second Step

Then do this.

Third Step

Finally, do this.

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,
  }}
/>

Components

Getting Started

Components

On this page