File structure

Using Starlight’s FileTree

We can show a project’s file structure on the site using Starlight’s FileTree.

Importing FileTree

We add the following import after the frontmatter of the .mdx file:

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

FileTree example

• DirectoryProperties/

  • launchSettings.json
• Directoryobj/

  • …
• Program.cs
• MinimalProject.csproj
• appsettings.Development.json
• appsettings.json

<FileTree>

- Properties/
    - launchSettings.json
- obj/
- Program.cs
- MinimalProject.csproj
- appsettings.Development.json
- appsettings.json

</FileTree>