Component

File Tree

A hierarchical view of files and folders with expand/collapse, selection, and keyboard navigation (WAI-ARIA treeview).

Overview

A typical file tree nests folders and files with indentation per depth level. Arrow keys move between rows; ArrowRight/ArrowLeft expand and collapse folders; Enter selects.

src
- index.ts
- components
package.json
README.md

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { FileTree, type FileTreeNode } from '@refraction-ui/react'

const nodes: FileTreeNode[] = [
  {
    id: 'src',
    label: 'src',
    children: [{ id: 'src/index.ts', label: 'index.ts' }],
  },
  { id: 'package.json', label: 'package.json' },
]

export function MyComponent() {
  return <FileTree nodes={nodes} defaultExpandedIds={['src']} />
}

Props

Prop	Type	Default	Description
`nodes`	`FileTreeNode[]`	--	Root-level nodes. Each node is `{ id, label, children?, disabled? }`; nodes with `children` render as expandable folders.
`expandedIds`	`string[]`	--	Controlled expanded node ids. Pair with `onExpandedChange`.
`defaultExpandedIds`	`string[]`	--	Uncontrolled initial expanded node ids.
`selectedId`	`string \| null`	--	Controlled selected node id. Pair with `onSelectionChange`.
`defaultSelectedId`	`string \| null`	--	Uncontrolled initial selected node id.
`onExpandedChange`	`(ids: string[]) => void`	--	Called whenever the expanded set changes (click, ArrowRight/ArrowLeft).
`onSelectionChange`	`(id: string \| null) => void`	--	Called whenever the selection changes (click, Enter, Space).