# FileTree component (https://docs-fpm2731fy-ton-core-docs.vercel.app/llms/contribute/snippets/filetree/content.md)
Currently a wrapper around Fumadocs ``,
``, and `` components.
To display the structure of a directory with files and collapsible subdirectories, use the `` component. Click on a subdirectory to open or close it.
Additionally, notes can be added to files and directories, which are displayed after their names.
The `` is a wrapper over the built-in [`` component](https://www.mintlify.com/docs/components/tree) provided by Mintlify, but with a data-driven interface: pass a list of objects and strings instead of [composing JSX children manually](#using-\-directly).
## Import [#import]
## Usage [#usage]
Specify the structure of files and directories inside the [`items` property](#items-required) as a JavaScript list of strings, objects, and nested lists.
```mdx
```
### Specify files and placeholders [#specify-files-and-placeholders]
```mdx
{/* Files and a placeholder by the end */}
```
### Add notes and comments [#add-notes-and-comments]
```mdx
{/* Using objects to add notes or nested folders */}
```
### Specify folders and their state [#specify-folders-and-their-state]
```mdx
{/* Make all sub-folders be closed by default */}
```
## `` props [#filetree-props]
**Implementation:** [`filetree.jsx`](https://github.com/ton-org/docs/blob/main/snippets/filetree.jsx)
The `` component accepts the following props:
### `items` (required) [#items-required]
**type:** `FileTreeItem[]`
Hierarchy of files and folders to display.
The `FileTreeItem` can be one of the following kinds:
* `...` or `…` — both display a placeholder entry `…` indicating additional items in a directory that are intentionally omitted
* any `string` — name of the file inside the currently described directory
* `{ kind: "file", ...fields... }` — an extended syntax for files, with the following fields:
* `name: string` — the filename;
* `note?: string` — optional comment, displayed next to the filename;
* `{ kind: "folder", ...fields... }` — syntax for folders and directories, with the following fields:
* `name: string` — the directory name;
* `note?: string` — optional comment, displayed next to the directory name;
* `open?: boolean` — whether to open the directory, defaults to `true`;
* `items: FileTreeItem[]` — nested files and folders;
Folders are open by default. That is, their `open` property is `true` unless specified otherwise.
### `defaultOpen` [#defaultopen]
**type:** `boolean`
**default:** `true`
Whether to open all folders on page load. Can be overridden by the `open` property of individual [`FileTreeItem` entries](#items-required).
## Using underlying components directly [#using-underlying-components-directly]
For cases where a data-driven approach is unnecessary, use the Fumadocs' ``, ``, and `` components directly. They requires no import and the `` component accepts `` and `` sub-components as children.
```mdx
```