File Tree
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.
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.
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
Syauqizaidan Khairan Khalaf
