File Tree: Premium Sections Component by Syauqizaidan Khairan Khalaf

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

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.