Skip to content

File Tree

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

Preview
  • astro.config.mjs an important file
  • package.json
  • README.md
  • Directorysrc
    • Directorycomponents
      • Header.astro
  • Directorypages/

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.

import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- astro.config.mjs
- package.json
- src
- components
- Header.astro
- Title.astro
- pages/
</FileTree>
Preview
  • astro.config.mjs
  • package.json
  • Directorysrc
    • Directorycomponents
      • Header.astro
      • Title.astro
    • Directorypages/

Highlight entries

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>
Preview
  • Directorysrc
    • Directorycomponents
      • Header.astro
      • Title.astro

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.

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

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.

import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- src
- components
- Header.astro
-
</FileTree>
Preview
  • Directorysrc
    • Directorycomponents
      • Header.astro

<FileTree> Props

Implementation: FileTree.astro

The <FileTree> component does not accept any props.