File Tree

Collapsible tree for documenting project structure.

• 1.1 KB gzipped
• Zero dependencies
• Reduced-motion safe
• Base UI & Radix compatible

Installation

Props

interface FileNode {
  name: string;
  /** Presence of `children` makes the node a folder */
  children?: FileNode[];
  /** Folders start open unless this is false */
  defaultOpen?: boolean;
}

Accessibility

Reduced motion

The chevron snaps between closed and open instead of rotating. Child lists appear and disappear instantly for everyone.

Keyboard

Each folder is a native button: Tab reaches it and Enter or Space toggles it. Files are plain text and not focusable, and there is no arrow-key tree navigation.

Screen readers

Nested lists where folder buttons report aria-expanded (a disclosure pattern, not role=tree).