---
title: User Guide
description: The CLI tool that automates setups and installing components.
---

## Installation

Note that it needs Fumadocs Core for minimal setup.

```package-install
npm install @fumadocs/cli --save-dev
```

You can initialize a config for CLI.

```bash
pnpm fumadocs config
```

It defines the output paths of components.

### Components

Select and install components.

```bash
pnpm fumadocs add
```

You can pass component names.

```bash
pnpm fumadocs 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

> This is highly Inspired by Shadcn UI.

### Tree

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

```bash
pnpm fumadocs tree ./my-dir ./output.tsx
```

You can output MDX file too:

```bash
pnpm fumadocs tree ./my-dir ./output.mdx
```

See help for further details:

```bash
pnpm fumadocs tree -h
```

#### Example Output

```tsx title="output.tsx"
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.

```bash
pnpm fumadocs init
```

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