N-Docs LogoN-Docs
Fumadocs

Fumadocs CLI

Using the Fumadocs CLI for enhanced documentation management and components

Fumadocs CLI

The Fumadocs CLI is a powerful tool for managing and enhancing your documentation site with components, customizations, and file tree generation.

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

Install Components Interactively

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

Install Specific Components

# Install banner and files components
npx @fumadocs/cli add banner files

# Install individual components
npx @fumadocs/cli add banner
npx @fumadocs/cli add files
npx @fumadocs/cli add tabs

Available Components

Common components you can add:

  • banner - Page banners and notifications
  • files - File tree visualization
  • tabs - Tabbed content sections
  • cards - Card layouts for content
  • callouts - Highlighted information boxes

How It Works

The CLI fetches the latest version of components directly from the Fumadocs GitHub repository, ensuring you always get up-to-date components. It also automatically transforms import paths to match your project structure.

Note: Make sure to use the latest version of the CLI for best compatibility.

Customization

Customize Layouts

# Interactive customization
npx @fumadocs/cli customise

This provides a simple way to customize Fumadocs layouts without manually editing configuration files.

File Tree Generation

Generate File Trees

The CLI can generate file tree components using your actual directory structure:

# Generate TypeScript component
npx @fumadocs/cli tree ./my-dir ./output.tsx

# Generate MDX file
npx @fumadocs/cli tree ./my-dir ./output.mdx

# Get help for tree command
npx @fumadocs/cli tree -h

Example Output

When you run the tree command on a directory, it generates a component like this:

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

Practical Examples

Adding a Banner Component

  1. Install the banner component:

    npx @fumadocs/cli add banner

  2. Use in your documentation:

    import { Banner } from '@/components/ui/banner';

<Banner type="warning">
  This feature is in beta. Use with caution in production.
</Banner>

Creating File Trees for Documentation

  1. Generate a file tree for your project structure:

    npx @fumadocs/cli tree ./src ./components/project-structure.tsx

  2. Include in your documentation:

    import ProjectStructure from '@/components/project-structure';

## Project Structure

<ProjectStructure />

Documenting Docker Project Structure

# Generate file tree for a Docker project
npx @fumadocs/cli tree ./docker-project ./components/docker-structure.mdx

This might generate:

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

<Files>
  <Folder name="docker-project">
    <File name="Dockerfile" />
    <File name="docker-compose.yml" />
    <File name="docker-compose.prod.yml" />
    <Folder name="nginx">
      <File name="nginx.conf" />
      <File name="Dockerfile" />
    </Folder>
    <Folder name="app">
      <File name="package.json" />
      <File name="server.js" />
    </Folder>
    <File name=".dockerignore" />
  </Folder>
</Files>

Integration with N-Docs

Enhancing Documentation Pages

You can use the CLI to add components that enhance your existing documentation:

  1. Add file trees to show project structures
  2. Add banners for important notices
  3. Add tabs for multi-language examples
  4. Add cards for feature showcases

Example: Enhanced Docker Documentation

---
title: Docker Project Structure
---

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

# Docker Project Structure

<Banner type="info">
  This guide shows recommended Docker project organization.
</Banner>

## Recommended Structure

<Files>
  <Folder name="my-docker-app">
    <File name="Dockerfile" />
    <File name="docker-compose.yml" />
    <File name="docker-compose.prod.yml" />
    <File name=".dockerignore" />
    <Folder name="src">
      <File name="app.js" />
      <File name="package.json" />
    </Folder>
    <Folder name="nginx">
      <File name="nginx.conf" />
      <File name="Dockerfile" />
    </Folder>
    <Folder name="scripts">
      <File name="deploy.sh" />
      <File name="backup.sh" />
    </Folder>
  </Folder>
</Files>

CLI Commands Reference

# Initialize configuration
npx @fumadocs/cli

# Add components interactively
npx @fumadocs/cli add

# Add specific components
npx @fumadocs/cli add [component-names...]

# Customize layouts
npx @fumadocs/cli customise

# Generate file tree
npx @fumadocs/cli tree [input-dir] [output-file]

# Get help
npx @fumadocs/cli --help
npx @fumadocs/cli tree --help

What's Next?

The Fumadocs CLI makes it easy to keep your documentation visually appealing and well-organized with minimal effort!

Fumadocs Setup Guide

Simple guide to setting up and deploying Fumadocs documentation sites

Nextcloud

Self-hosted cloud storage and collaboration platform