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 the 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

Customise

A simple way to customise Fumadocs layouts.

npx @fumadocs/cli customise

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 file 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>
);

Initialize Features

Some features of Fumadocs require copying code to get started, it is similar to codemod but for configuring features automatically.

npx @fumadocs/cli init

Please note that some features may change your existing code, make sure to commit your changes to Git before running it.