> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. # Files > Display interactive file tree structures with expandable folders The `` component creates visual file tree structures with expandable folders and nested files. Use it to show project structures, directory layouts, or any hierarchical file organization in your documentation. The component consists of three parts: `` as the container, `` for directories, and `` for individual files. ## Usage **`Markdown`** ```jsx Markdown maxLines=10 ``` ## Variants ### Nested folders You can nest folders within folders to create deep directory structures. The component automatically adds visual nesting lines to show the hierarchy. **`Markdown`** ```jsx Markdown maxLines=10 ``` ### Linked files and folders Add the `href` property to make files or folders clickable. This is useful for linking to documentation pages, GitHub repositories, or other resources. Files and folders with the `href` property are underlined. **`Markdown`** ```jsx Markdown maxLines=10 ``` ### Default open folders Use the `defaultOpen` property to have specific folders expanded when the page loads. This is useful for highlighting important directories or showing the most relevant parts of a file structure. **`Markdown`** ```jsx Markdown maxLines=10 ``` ### Line highlighting and comments Use the `highlighted` property to highlight specific files or folders with an accent background color. Use the `comment` property to add explanatory text that appears next to an item. These properties are useful for drawing attention to important files or providing additional context, similar to how code blocks support [line highlighting](/learn/docs/writing-content/components/code-blocks#line-highlighting) and inline comments. **`Markdown`** ```jsx Markdown maxLines=10 ``` ## Properties ### `` properties **`children`** `JSX` — required The file tree content. Should contain `` and `` components. --- **`className`** `string` Optional CSS class name for custom styling. --- ### `` properties **`name`** `string` — required The folder name to display. --- **`defaultOpen`** `boolean` Whether the folder should be expanded when the page loads. If not specified, the folder will be collapsed by default. --- **`children`** `JSX` The nested content within the folder. Can include `` and other `` components. --- **`href`** `string` Optional URL to make the folder name clickable. The name will show an underline when a link is provided. --- **`highlighted`** `boolean` Whether the line containing the folder should be visually highlighted with an accent background color. Use this to draw attention to important directories. --- **`comment`** `string` Optional comment text that appears next to the folder name. Comments are automatically prefixed with `#` if not already present and styled in a monospace font with muted color. --- **`className`** `string` Optional CSS class name for custom styling. --- ### `` properties **`name`** `string` — required The file name to display. --- **`href`** `string` Optional URL to make the file name clickable. The name will show an underline when a link is provided. --- **`highlighted`** `boolean` Whether the line containing the file should be visually highlighted with an accent background color. Use this to draw attention to important files. --- **`comment`** `string` Optional comment text that appears next to the file name. Comments are automatically prefixed with `#` if not already present and styled in a monospace font with muted color. --- **`className`** `string` Optional CSS class name for custom styling. --- > Display interactive file tree structures with expandable folders