User Guide

Installation

Initialize a config for CLI:

npx @fumadocs/cli

You can change the output paths of components in the config.

Components

Select and install components.

npx @fumadocs/cli add

You can pass component names directly.

npx @fumadocs/cli add banner files

How the magic works?

The CLI fetches the latest version of component from the GitHub repository of Fumadocs. When you install a component, it is guaranteed to be up-to-date.

In addition, it also transforms import paths. Make sure to use the latest version of CLI

Customize

A simple way to customize Fumadocs layouts.

npx @fumadocs/cli customize

Tree

Generate files tree for Fumadocs UI Files component, using the tree command from your terminal.

npx @fumadocs/cli tree ./my-dir ./output.tsx

You can output MDX files too:

npx @fumadocs/cli tree ./my-dir ./output.mdx

See help for further details:

npx @fumadocs/cli tree -h

Example Output

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

export default (
  <Files>
    <Folder name="app">
      <File name="layout.tsx" />
      <File name="page.tsx" />
      <File name="global.css" />
    </Folder>
    <Folder name="components">
      <File name="button.tsx" />
      <File name="tabs.tsx" />
      <File name="dialog.tsx" />
    </Folder>
    <File name="package.json" />
  </Files>
);