File Tree

Use FileTree to show project structure, package exports, documentation folders, or any directory layout where hierarchy matters more than long prose.

Import

import { FileTree } from '@prosefly/astro-components';

Basic Usage

The syntax follows Starlight: wrap a single unordered Markdown list inside FileTree.

• astro.config.mjs
• package.json
• Directory src

  • Directory content

    • Directory docs

      • index.mdx
      • Directory components/

        • …
  • theme.config.ts
• Directory public/

  • …

<FileTree>

- astro.config.mjs
- package.json
- src
  - content
    - docs
      - index.mdx
      - components/
  - theme.config.ts
- public/

</FileTree>

Directories

An item becomes a directory when it has nested children. You can also add a trailing / to mark an empty directory.

• Directory src

  • Directory components

    • Callout.astro
    • Tabs.astro
  • Directory content/

    • …
• Directory public/

  • …

Directories render as native disclosure controls, so readers can collapse and expand sections of the tree.

Comments

Add a comment by writing text after the file or directory name. Comments can use inline Markdown.

• astro.config.mjsregisters the Lotus integration
• Directory src

  • theme.config.tsthe main theme configuration file
  • Directory contentcontains the docs collection

    • docsgenerated from themeConfig.sidebars
• Directory packages

  • astro-componentsshared MDX components
  • astro-theme-lotustheme integration and layouts

<FileTree>

- astro.config.mjs registers the Lotus integration
- src
  - theme.config.ts the **main** theme configuration file
  - content contains the docs collection

</FileTree>

Highlight Entries

Make a file or directory name bold to highlight the important entry. The highlight covers the file or directory icon and name; comments stay outside the highlighted area.

• Directory packages

  • Directory astro-components

    • Directory src

      • Directory mdx

        • FileTree.astro
        • rehype-file-tree.ts
        • Tabs.astro
  • astro-theme-lotus

Placeholders

Use ... or … when a tree intentionally omits files.

• Directory src

  • Directory components

    • Callout.astro
    • Steps.astro
    • …
  • Directory content

    • Directory docs

      • overview.mdx
      • …

Special Names

Wrap file names in backticks when they contain spaces, leading underscores, or characters that Markdown may treat as formatting.

• __init__.py
• README copy.md
• theme.config.ts highlighted with code formatting
• Directory docs

  • getting started.mdx
  • faq?.mdx

File Icons

File icons are selected from the file name or extension. By default, FileTree uses simple Lucide file and folder icons.

• component.astrocode file
• config.yamlconfig file
• tokens.cssstylesheet
• logo.svgimage asset
• notes.mdtext content
• archive.zipgeneric file

Use iconSet="vscode-icons" for richer file-type icons.

• astro.config.mjs
• package.json
• tsconfig.json
• Directory src

  • Directory components

    • Header.astro
    • SearchDialog.ts
  • Directory content

    • Directory docs

      • overview.mdx
      • images.md
  • Directory styles

    • app.css
• Directory public

  • logo.svg

<FileTree iconSet="vscode-icons">

- astro.config.mjs
- package.json
- tsconfig.json
- src
  - components
    - Header.astro
    - SearchDialog.ts

</FileTree>

Props

Syntax Rules

• The direct content of FileTree must be exactly one unordered Markdown list.
• Keep a blank line after <FileTree> and before </FileTree> so MDX parses the list as Markdown.
• Use nested list items for directory contents.
• Use bold text to highlight an entry name.
• Put comments after the name on the same list item.
• Use ... or … for omitted files.