Fumadocs

User Guide

The CLI tool that automates setups and installs components.

GitHubView on GitHub

Installation

Initialize a config for CLI:

npx @fumadocs/cli
pnpm dlx @fumadocs/cli
yarn dlx @fumadocs/cli
bun x @fumadocs/cli

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

Components

Select and install components.

npx @fumadocs/cli add
pnpm dlx @fumadocs/cli add
yarn dlx @fumadocs/cli add
bun x @fumadocs/cli add

You can pass component names directly.

npx @fumadocs/cli add banner files
pnpm dlx @fumadocs/cli add banner files
yarn dlx @fumadocs/cli add banner files
bun x @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

This is highly inspired by Shadcn UI.

Customise

A simple way to customise Fumadocs layouts.

npx @fumadocs/cli customise
pnpm dlx @fumadocs/cli customise
yarn dlx @fumadocs/cli customise
bun x @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
pnpm dlx @fumadocs/cli tree ./my-dir ./output.tsx
yarn dlx @fumadocs/cli tree ./my-dir ./output.tsx
bun x @fumadocs/cli tree ./my-dir ./output.tsx

You can output MDX files too:

npx @fumadocs/cli tree ./my-dir ./output.mdx
pnpm dlx @fumadocs/cli tree ./my-dir ./output.mdx
yarn dlx @fumadocs/cli tree ./my-dir ./output.mdx
bun x @fumadocs/cli tree ./my-dir ./output.mdx

See help for further details:

npx @fumadocs/cli tree -h
pnpm dlx @fumadocs/cli tree -h
yarn dlx @fumadocs/cli tree -h
bun x @fumadocs/cli tree -h

Example Output

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

How is this guide?

Last updated on