{} {level > 0 &&

}

{showIcons && } {item.name} {item.description && {item.description} } {item.badge && {item.badge.text} }

{} {item.children && item.children.map((child, i) => { const key = child.name ? `${child.name}-${i}` : `child-${i}`; return ; })}

; } return

{} {level > 0 &&

} {showIcons && } {item.name} {item.description && {item.description} } {item.badge && {item.badge.text} }

; }; The `FileTree` component provides a beautiful way to display project file structures, directory hierarchies, and file organization in your documentation. It renders a static tree view with Lucide icons, optional descriptions, and badges in a clean code-block styled interface. ## Basic Usage Import the component and pass it a hierarchical structure of files and directories. ```jsx FileTree usage theme={null} import { FileTree } from "/snippets/tsdocs/FileTree.jsx" const fileStructure = [ { name: "src/", description: "Source code directory", children: [ { name: "index.ts", description: "Main entry point" }, { name: "components/", children: [ { name: "Button.tsx", description: "Button component" }, { name: "Card.tsx", description: "Card component" } ] } ] }, { name: "package.json", description: "Package configuration", badge: { text: "Config", color: "blue" } } ]; ``` export const basicStructure = [{ name: "src/", description: "Source code directory", children: [{ name: "index.ts", description: "Main entry point" }, { name: "components/", children: [{ name: "Button.tsx", description: "Button component" }, { name: "Card.tsx", description: "Card component" }] }] }, { name: "package.json", description: "Package configuration", badge: { text: "Config", color: "blue" } }]; ## Features ### Visual Design * **Code block styling** with rounded corners and syntax highlighting appearance * **Dark mode support** with automatic theme switching * **Vertical guide lines** for nested directory structures * **Consistent spacing** and typography for optimal readability ### File Icons * **Folder icons** for directories (📁) * **File icons** for individual files (📄) * **Icon customization** via the `getFileIcon` function (extensible for different file types) ### Metadata Support * **Descriptions** provide context for files and directories * **Badges** highlight important files with customizable colors * **Hierarchical structure** supports unlimited nesting depth ## Advanced Example Here's a comprehensive example showing a typical project structure with various file types and metadata: `} > ## Properties Hierarchical array of files and directories to display. Each item should have a `name` property. Optional title displayed at the top of the file tree component Maximum nesting depth to prevent infinite recursion in deeply nested structures Whether to display file and folder icons next to items ## FileTreeItem Interface Each item in the `structure` array should follow this interface: ```typescript theme={null} interface FileTreeItem { name: string; // File or directory name description?: string; // Optional description shown next to the name badge?: FileTreeBadge; // Optional badge configuration children?: FileTreeItem[]; // Child items for directories } interface FileTreeBadge { text: string; // Badge text content color?: string; // Badge color (Mintlify Badge color prop) } ``` ## FileTreeGroup Use `FileTreeGroup` to organize multiple related file trees: `} > ## Best Practices Choose clear, descriptive names for files and directories that immediately convey their purpose. ```jsx theme={null} // ✅ Good { name: "user-authentication.ts", description: "Handles user login/logout logic" } // ❌ Avoid { name: "util.ts", description: "Utility functions" } ``` Use descriptions to provide additional context that helps users understand the purpose and contents of files/directories. ```jsx theme={null} ``` Apply badges to highlight important files, configuration files, or items that need special attention. ```jsx theme={null} ``` Organize file structures logically, grouping related functionality together and using FileTreeGroup for multiple related structures. ```jsx theme={null} ``` While FileTree supports unlimited nesting, limit depth to 4-5 levels for readability. Consider breaking very deep structures into separate documentation sections. ## Styling and Theming FileTree automatically adapts to Mintlify's light and dark themes: * **Light mode**: Light gray backgrounds with dark text * **Dark mode**: Dark backgrounds with light text * **Code block styling**: Consistent with other code elements in your documentation * **Vertical guide lines**: Subtle visual indicators for nested structures * **Hover states**: Clean interaction feedback * **Typography**: Monospace font for file names, proportional font for descriptions ## Troubleshooting If you see `Cannot find module "/snippets/FileTree.jsx"`: 1. Ensure FileTree.jsx exists in your `docs/snippets/` folder 2. Run `mint-tsdocs` to auto-install the component 3. Check that the import path is correct (should start with `/snippets/`) If file/folder icons are not showing: 1. Verify that Mintlify's Icon component is available 2. Check browser console for JavaScript errors 3. Ensure `showIcons` prop is not set to `false` If the file tree doesn't display correctly: 1. Verify that each item has a `name` property 2. Check that the `structure` prop is a valid array 3. Ensure proper JSON formatting in your MDX file If the component doesn't look right: 1. Ensure Tailwind CSS is properly loaded in your Mintlify site 2. Check that you're using an up-to-date version of the component 3. Try refreshing the page to reload styles ## Version History Initial release with hierarchical file structure visualization, Lucide icons, and code block styling * File type detection with specific icons for different extensions * Expandable/collapsible directories * File size and modification date display * Copy file paths functionality ## Related Components Display JSON data structures with beautiful formatting Display recursive type structures with expandable properties Styled wrapper for component examples