FileTree

Collapsible directory tree authored as a nested markdown list — folders, files, highlights, and placeholder rows.

Installation

npx nimbus-docs add file-tree

yarn dlx nimbus-docs add file-tree

pnpm dlx nimbus-docs add file-tree

bunx nimbus-docs add file-tree

Preview

src/
- components/
  - ui/
    - Badge.astro
    - Card.astro
- content/
  - docs/
    - index.mdx
- styles/
  - globals.css
package.json
astro.config.mjs

<FileTree>
- src/
- components/
  - ui/
    - **Badge.astro**
    - Card.astro
- content/
  - docs/
    - index.mdx
- styles/
  - globals.css
- package.json
- astro.config.mjs
</FileTree>

Examples

Flat

A single-level list — top-level files only, no nested directories.

README.md
package.json
astro.config.mjs
tsconfig.json

<FileTree>
- README.md
- package.json
- astro.config.mjs
- tsconfig.json
</FileTree>

Nested

Trailing / marks a directory; nest a list inside the row to add children.

src/
- components/
  - Header.astro
  - Footer.astro
- pages/
  - index.astro

<FileTree>
- src/
- components/
  - Header.astro
  - Footer.astro
- pages/
  - index.astro
</FileTree>

Highlight and placeholder

Wrap an entry in **...** to highlight it. Use ... (on its own row) for an elided placeholder.

src/
- components/
  - Header.astro
  - Footer.astro
  - …
- pages/
  - …

<FileTree>
- src/
- components/
  - **Header.astro**
  - Footer.astro
  - ...
- pages/
  - ...
</FileTree>