FileTree

Installation#

npx @ravikumarsurya/mdx-ui add file-tree

Why FileTree?#

The FileTree component provides a much simpler syntax compared to the verbose Tree component. Instead of nesting multiple <TreeItem> components, you write a simple text structure.

Simple Syntax#

Basic Example#

<FileTree>
  {`
src*/
  components*/
    Button.tsx
    Input.tsx
  App.tsx
package.json
`}
</FileTree>

Syntax Rules#

Examples#

Deep Nesting#

<FileTree>
  {`
src*/
  app*/
    features*/
      auth*/
        components/
          LoginForm.tsx
          SignupForm.tsx
        hooks/
          useAuth.ts
        auth.service.ts
      dashboard*/
        Dashboard.tsx
    App.tsx
  main.tsx
package.json
`}
</FileTree>

Next.js Project#

Monorepo Structure#

Comparison: FileTree vs Tree#

❌ Old Way (Tree component)#

<Tree>
  <TreeItem name="src" isFolder defaultOpen>
    <TreeItem name="app" isFolder defaultOpen>
      <TreeItem name="features" isFolder defaultOpen>
        <TreeItem name="auth" isFolder defaultOpen>
          <TreeItem name="components" isFolder>
            <TreeItem name="LoginForm.tsx" />
            <TreeItem name="SignupForm.tsx" />
          </TreeItem>
        </TreeItem>
      </TreeItem>
    </TreeItem>
  </TreeItem>
</Tree>

✅ New Way (FileTree component)#

<FileTree>
  {`
src*/
  app*/
    features*/
      auth*/
        components/
          LoginForm.tsx
          SignupForm.tsx
`}
</FileTree>

90% less code! 🎉

Features#

• Ultra-simple syntax: Just text with indentation
• Automatic nesting: 2 spaces = 1 level
• Folder markers: Use / for folders, */ for open folders
• Interactive: Click folders to expand/collapse
• Visual hierarchy: Tree lines and icons
• Zero props: Everything is in the string

When to Use#

Use FileTree when:#

• ✅ You have simple, static file structures
• ✅ You want minimal typing
• ✅ The structure won't change dynamically
• ✅ You're documenting project layouts

Use Tree when:#

• �� You need programmatic control over each item
• 🔧 Items have custom props or event handlers
• 🔧 Structure is generated dynamically
• 🔧 You need custom styling per item

Tips#

1. Indentation matters: Use exactly 2 spaces per level
2. Trailing slash: Always end folders with /
3. Open by default: Add * before / for folders (folder*/)
4. Empty lines: Will be ignored automatically
5. Curly braces: Use { + backticks + } to preserve whitespace

Common Patterns#

Config Files Location#

Component Library#

MDX Component Mapping#

Add to your mdx-components.tsx:

import { FileTree } from "@/components/mdx-ui/file-tree";
 
export const mdxComponents = {
  // ... other components
  FileTree,
};

Accessibility#

• Folders are keyboard accessible (click to toggle)
• Screen readers will read folder/file names
• Semantic HTML structure
• Works in both light and dark modes