User Guide

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.

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

Installation

Components

How the magic works?

Customise

Tree

Example Output

On this page