File Tree

Files and directories as a tree. Uses the ARIA tree pattern with roving focus — arrow keys move between rows, so a repository with 200 files does not cost 200 tab stops.

src/components/ui/file-tree.tsx

About

From the component's own source, where it was written.

A file and directory tree.

Uses the ARIA tree pattern: one role="tree", nested role="group", and every row a role="treeitem" carrying aria-expanded and aria-level. Only the selected row is in the tab order, and arrow keys move between rows — the same roving pattern Tabs uses, because a tree with 200 files should not cost 200 tab stops.

Install

npx astralyx-ui add file-tree

Usage

import { FileTree } from '@/components/ui/file-tree'

<FileTree
  nodes={[
    { name: 'src', defaultOpen: true, children: [{ name: 'index.ts' }] },
    { name: 'README.md', meta: '4h ago' },
  ]}
  onSelect={setPath}
/>

Composer

Change the props and the source below follows.

Props

showMeta

tsx

<FileTree
  nodes={tree}
  onSelect={setPath}
/>

Examples

Repository tree

tsx

<FileTree nodes={tree} onSelect={setPath} />

Names only

tsx

<FileTree nodes={tree} showMeta={false} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`FileTree`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
nodes	FileNode[]	required	{ name, children?, meta?, badge?, defaultOpen? }. Children make a node a directory.
value	string	—	Selected path, joined with "/". Controlled or uncontrolled.
onSelect	(path: string) => void	—	Selected path, joined with "/". Controlled or uncontrolled.
showMeta	boolean	true	Right-hand column — a commit message, a size, a timestamp.
label	string	'Files'	Accessible name for the tree.

Types

`FileNode`

A file and directory tree.

Field	Type	Description
name	string	—
children?	FileNode[]	Children make it a directory; a leaf is a file.
meta?	ReactNode	Extra text on the right — a commit message, a size, a status.
badge?	ReactNode	Marks the row, e.g. a modified file.
defaultOpen?	boolean	—

Behaviour

Topic	Detail	Description
keyboard	arrows	Up and down move between rows, left and right collapse and expand, Home and End jump.
icons	automatic	Chosen from the file extension, so callers pass names rather than icons.