Invalid type passed!
Received:
{type}
Expected one of:
{asideVariants.join(", ")}
: <>
{title &&
{title}
}
{children}
}
;
};
To display the structure of a directory with file icons and collapsible sub-directories, use the `` component. You can open or close a sub-directory by clicking on it.
## Import
```tsx theme={null}
import { FileTree } from '/snippets/filetree.jsx';
```
## Usage
To display the file tree with file icons and collapsible sub-directories using the `` component, specify the structure of your files and directories inside the [`items` property](#items) as a JavaScript list of objects and strings.
```mdx theme={null}
import { FileTree } from '/snippets/filetree.jsx';
```
### Specify files and placeholders
```mdx theme={null}
import { FileTree } from '/snippets/filetree.jsx';
{/* Files and a placeholder by the end */}
```
### Add notes and comments
```mdx theme={null}
import { FileTree } from '/snippets/filetree.jsx';
{/* Using objects to add notes or nested folders */}
```
### Specify folders and their state
```mdx theme={null}
import { FileTree } from '/snippets/filetree.jsx';
{/* Make all sub-folders be closed by default */}
```
## `` props
**Implementation:** [`filetree.jsx`](https://github.com/ton-org/docs/blob/main/snippets/filetree.jsx)
The `` component accepts the following props:
### `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 icon `…` indicating that a directory is expected to contain more items without specifying them all explicitly
* 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, which is 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, which is displayed next to the directory name
* `open?: boolean` — whether to open the directory, defaults to `true`
* `items: FileTreeItem[]` — nested files and folders
Notice that folders are open by default, i.e., their `open` property is `true` unless specified otherwise.
### `defaultOpen`
**type:** `boolean`
**default:** `true`
Whether to open all folders upon the page load. Can be overridden by the `open` property of the `FileTreeItem` entry.