File tree

Use the <FileTree> component to display the structure of a directory with file icons and collapsible sub-directories.

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.

The following syntax can be used to customize the appearance of the file tree:

• Highlight a file or directory by making its name bold, e.g. **README.md**.
• Add a comment to a file or directory by adding more text after the name.
• Add placeholder files and directories by using either ... or … as the name.

Example

• index.astro
• keystatic.config.tsx
• Directorycomponents

  • file-tree.astro
  • …

src/content/docs/example.mdx

<FileTree>
  * index.astro
  * **keystatic.config.tsx**
  * components
    * file-tree.astro
    * ...
</FileTree>

Keystatic config

To add this Starlight component as a Keystatic content component, register it as a content component with the following schema:

keystatic.config.tsx

...
FileTree: wrapper({
  label: 'File tree',
  description:
    'Use the <FileTree> component to display the structure of a directory with file icons and collapsible sub-directories.',
  schema: {},
}),
...