File Tree

File Tree converts a flat array (name, type, parentId) into a nested tree with keyboard-friendly buttons, smooth expand/collapse, row highlighting, and subtle vertical guide lines.

Show folder structures, documentation hierarchies, or component libraries in seconds. File Tree converts a flat array (name, type, parentId) into a nested tree with keyboard-friendly buttons, smooth expand/collapse, row highlighting, and subtle vertical guide lines. Style everything—background, text, hover, selected state, indicator color, and font—to match your brand or docs. No external libraries, no global CSS. The tree is memoized, click logic is encapsulated, and default data gets you started instantly. Key Features Flat → nested: Provide items with parentId; the component builds the hierarchy for you. Expand/Collapse: Chevron rotates and preserves state; choose initial expanded folders. Selection: Click files to select; selected rows get a custom background. Indicators (optional): Vertical connector lines for a clean tree feel. Polished UX: Indentation per depth, hover states, ellipsis overflow, and accessible buttons. Fully themable: Background, text, hover, selected, indicator colors, and font control. Safe by default: Inline styles only; nothing leaks to the rest of your page. Perfect For Project structures in docs or landing pages API/SDK file maps and starter kit overviews Design system navigation and component inventories Knowledge bases and content outlines

A minimal, performant file tree