FileTree

File directory tree view with language-aware icons

Default

Usage

import { FileTree } from '@tryvienna/ui'

<div className="w-72 p-2 border border-border rounded-lg bg-background">
  <FileTree items={PROJECT_FILES} defaultExpanded={new Set(['src', 'src/components'])} />
</div>

Examples

Default

Default

<div className="w-72 p-2 border border-border rounded-lg bg-background">
  <FileTree items={PROJECT_FILES} defaultExpanded={new Set(['src', 'src/components'])} />
</div>

Interactive

Interactive

<div className="flex gap-4">
  <div className="w-72 p-2 border border-border rounded-lg bg-background">
    <FileTree
      items={PROJECT_FILES}
      defaultExpanded={new Set(['src', 'src/components'])}
      onFileClick={setSelected}
      selectedPath={selected}
    />
  </div>
  <div className="w-48 p-4 border border-border rounded-lg bg-background">
    <p className="text-sm text-muted-foreground">
      {selected ? `Selected: ${selected}` : 'Click a file to select'}
    </p>
  </div>
</div>

Multi Language

Multi Language

<div className="w-72 p-2 border border-border rounded-lg bg-background">
  <FileTree items={MULTI_LANG} defaultExpanded={new Set(['src'])} />
</div>

API Reference

FileTree

Prop	Type	Default	Description
items	FileTreeItem[]	-
onFileClick	(path: string) => void	-	Called when a file is clicked
selectedPath	string	-	Currently selected file path
defaultExpanded	Set<string>	-	Set of initially expanded directory paths

Data Attributes

Component	data-slot
FileTree	"file-tree"