File Tree

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

Import

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

Usage

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.

Highlight entries

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

Add comments

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.

Add placeholders

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.

Escape special characters

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

<FileTree> Props

Implementation: FileTree.astro

The <FileTree> component does not accept any props.