Skip to content
Content

FileTree

Presentational file/folder tree with FileTree.Folder and FileTree.File.

React source Core source

FileTree

Presentational file/folder tree for docs and static previews. Nest FileTree.Folder and FileTree.File — not interactive (use Tree for expand/selection).

Examples

Default

A single folder with a couple of files.

  • src
    • index.ts
    • App.tsx
  • package.json
Demo.tsxtsx
import { FileTree } from '@var-ui/react';

<FileTree>
  <FileTree.Folder name="src">
    <FileTree.File name="index.ts" />
  </FileTree.Folder>
</FileTree>

Nested folders

Nest folders for multi-package or monorepo layouts.

  • packages
    • react
      • package.json
      • src/index.ts
    • core
      • package.json
  • docs
    • README.md
  • pnpm-workspace.yaml
Demo.tsxtsx
import { FileTree } from '@var-ui/react';

<FileTree>
  <FileTree.Folder name="packages">
    <FileTree.Folder name="react">
      <FileTree.File name="package.json" />
      <FileTree.File name="src/index.ts" />
    </FileTree.Folder>
    <FileTree.Folder name="core">
      <FileTree.File name="package.json" />
    </FileTree.Folder>
  </FileTree.Folder>
  <FileTree.File name="pnpm-workspace.yaml" />
</FileTree>

Props

Accessibility

Renders nested lists of folder/file names for visual structure. It is not a keyboard tree widget — use Tree when users need expand/collapse or selection. Prefer clear name strings; do not rely on color alone to distinguish folders from files.