File Tree

Installation

npx shadcn@latest add @blank/file-tree

Usage

import { FileTree, FileTreeFile, FileTreeFolder } from "@/components/ui/file-tree"

<FileTree aria-label="Project files" defaultExpanded={["app"]}>
  <FileTreeFolder value="app" name="app">
    <FileTreeFile value="app/page.tsx" name="page.tsx" />
  </FileTreeFolder>
  <FileTreeFile value="package.json" name="package.json" />
</FileTree>

The tree follows the WAI-ARIA tree pattern rather than stacking accordions: it is a single tab stop, Up and Down move through visible items, Right opens a folder and then steps into it, Left closes it and then steps out, Home and End jump, and typing a letter finds the next match. Give it an aria-label.

Examples

From data

Pass elements instead of children. Selection can be controlled with value and onValueChange; open folders with expanded and onExpandedChange.

Props

elements takes an array of FileTreeElement — id, name, optional children and disabled. FileTreeFolder and FileTreeFile take value, name, an optional icon and disabled.