FileTree Component

Example source

page.mdx

import FileTree from 'starlight-plugin-icons/components/FileTree.astro'

<FileTree>
  - src
    - pages
      - index.astro
    - empty/
  - **TODO.md** <span class="i-ph:warning-bold"></span> **important** file
  - package.json the <span class="i-material-icon-theme:nodejs"></span> package.json file
</FileTree>

Rendered

• Directorysrc

  • Directorypages

    • index.astro
  • Directoryempty/

    • …
• TODO.md important file
• package.json the package.json file

Rules

• Directories end with / or contain nested items.
• **README.md** highlights an entry.
• Text after the name becomes a comment: README.md important.

Customization

CSS variables

src/styles/custom.css

:root {
  --spi-filetree-icon-size: 1.1rem;
  --spi-filetree-icon-gap: 0.25rem;
}

Example

src/styles/custom.css

:root {
  --spi-filetree-icon-size: 1.2rem;
  --spi-filetree-icon-gap: 0.5rem;
}

Rendered

• Directorysrc

  • index.ts
• README.md