---
title: FileTree
description: A file tree component for displaying directory structures.
---

---

File Trees are a great way to display directory structures on your site. It renders a collapsible tree view of files and folders, and automatically shows icons for different file types.

## Usage

Add the `FileTree()` component to the `components` list of `ContentApp`:

```dart
import 'package:jaspr_content/components/file_tree.dart';

// ...

ContentApp(
  components: [
    FileTree(),
  ],
)
```

Then use the `<FileTree>` component in your content files to display the file trees. Specify the structure of your files and directories with an unordered Markdown list. Create a subdirectory using a nested list or add a `/` to the end of a list item to render it as a directory without specific content.

```markdown
<FileTree>

- lib/
  - components/
    - clicker.dart
  - **main.dart** Highlighted file with comment
- tool/
- .gitignore
- analysis_options.yaml
- CHANGELOG.md
- LICENSE
- package.yaml
- README.md This is a comment

</FileTree>
```

- You can highlight specific files or folders by making the text bold using `**` or `__`.

- You can add comments to files or folders by adding text after the name of the file or folder.

- You can also specify folders to be closed by default by prefixing the folder name with a `^` character.

  ```markdown
  <FileTree>

  - lib/ // This folder will be open by default
    - ^src/ // This folder will be closed by default
      - utils.dart
    - main.dart
  - README.md

  </FileTree>
  ```

---

### Theming

You can customize the appearance of the `FileTree` component using the `FileTreeTheme` extension.
You can customize the background, text, icons, and highlight color as well as the border radius of the tree container.

```dart
ContentTheme(
  extensions: [
    FileTreeTheme(
      highlightColor: ThemeColors.teal,
      radius: 2.rem,
    ),
  ],
)
```