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