File Tree
A minimal, performant file tree for Framer with expand/collapse, selection, and optional connector indicators. Feed it a flat list of items and it renders a tidy, navigable directo
Make it with Workshop
Build your own component with AI
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
