Components

File Tree

Display hierarchical file and folder structures

File trees visualize project structures, helping users understand directory layouts.

Basic Usage

- Button.tsx
- Card.tsx
- index.ts
styles.css

package.json

tsconfig.json

<FileTree client:load>
  <TreeFolder name="src" defaultOpen>
    <TreeFolder name="components" defaultOpen>
      <TreeFile name="Button.tsx" />
      <TreeFile name="Card.tsx" />
      <TreeFile name="index.ts" />
    </TreeFolder>
    <TreeFolder name="pages">
      <TreeFile name="index.astro" />
      <TreeFile name="about.astro" />
    </TreeFolder>
    <TreeFile name="styles.css" />
  </TreeFolder>
  <TreeFile name="package.json" />
  <TreeFile name="tsconfig.json" />
</FileTree>

Barodoc Project Structure

astro.config.mjs
barodoc.config.json
package.json

Props

FileTree

classNamestring

Additional CSS classes

TreeFolder

namestringrequired

Folder name to display

defaultOpenbooleandefault: false

Whether folder is expanded by default

childrenReactNode

Nested TreeFile and TreeFolder components

TreeFile

namestringrequired

File name to display

iconReactNode

Custom icon component (defaults to file icon)