File Tree

File trees are useful when readers need a quick map of the repo before you explain where to edit, move, or add content.

Use in MDX

Pass an items array and indent child entries with two spaces:

<FileTree
  items={[
    'src/',
    '  content/',
    '    docs/',
    '      start-here/',
    '        set-up-compass/',
    '          set-up-compass.mdx',
    'README.md',
  ]}
/>

Implementation notes

The component lives in src/components/docs/FileTree.astro and renders a nested tree from a flat list of strings. Directory entries should end with a trailing / so the component can style them correctly.

Tips

• Use two spaces per nesting level.
• End directory names with /.
• Keep the tree focused on the files relevant to the article.

Preview