File Tree

To display the structure of a directory with file icons and collapsible sub-directories, use the <FileTree> component.

import { FileTree } from '@astrojs/starlight/components';

Display a file tree with file icons and collapsible sub-directories using the <FileTree> component.

Specify the structure of your files and directories with an unordered Markdown list inside <FileTree>. Create a sub-directory using a nested list or add a / to the end of a list item to render it as a directory without specific content.

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- astro.config.mjs
- package.json
- src
  - components
    - Header.astro
    - Title.astro
  - pages/

</FileTree>

{% filetree %}
- astro.config.mjs
- package.json
- src
  - components
    - Header.astro
    - Title.astro
  - pages/
{% /filetree %}

Make a file or directory stand out by making its name bold, e.g. **README.md**.

import { FileTree } from '@astrojs/starlight/components';<FileTree>- src  - components    - **Header.astro**    - Title.astro</FileTree>

{% filetree %}- src  - components    - **Header.astro**    - Title.astro{% /filetree %}

Add a comment to a file or directory by adding more text after the name. Inline Markdown formatting such as bold and italics is supported in comments.

import { FileTree } from '@astrojs/starlight/components';<FileTree>- src  - components    - Header.astro an **important** file    - Title.astro</FileTree>

{% filetree %}- src  - components    - Header.astro an **important** file    - Title.astro{% /filetree %}

Add placeholder files and directories by using either ... or … as the name. This can be useful to indicate to a reader that a folder is expected to contain more items without specifying them all explicitly.

import { FileTree } from '@astrojs/starlight/components';<FileTree>- src  - components    - Header.astro    - …</FileTree>

{% filetree %}- src  - components    - Header.astro    - …{% /filetree %}

Escape special characters such as underscores or spaces in filenames by wrapping the filename in code backticks.

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- `__init__.py`
- `Hello world.txt`
- **`READ ME FIRST.md`**

</FileTree>

{% filetree %}
- `__init__.py`
- `Hello world.txt`
- **`READ ME FIRST.md`**
{% /filetree %}

Implementation: FileTree.astro

The <FileTree> component does not accept any props.