@pierre/trees is an open source file tree rendering library. It's built for performance and flexibility, is super customizable, and comes packed with features. Made with love by The Pierre Computer Company.
Currently v0.0.1-beta.2
Collapse single-child folder chains into a single item to save clicks and improve user experience. Compare the two views below: hierarchical (nested folders) vs flattened (single-child chains collapsed into one row).
Use the gitStatus prop to show indicators on files for added, modified, and deleted files. Folders that contain changes get their own styling as a hint of nested changes. Toggle between two datasets to simulate status updates from your VCS.
Move files and folders by dragging them onto other folders or the root. Drop targets open automatically when you hover. Keyboard drag and drop is supported; dragging is disabled while search is active.
Enable with dragAndDrop: true.
Use lockedPaths to prevent specific paths from being dragged.
Filter the tree by typing in the search field. Trees includes three fileTreeSearchMode options to control how non-matching items are shown. All three demos below start with search prepopulated to show the different modes.
expand-matchesKeeps all items visible and expand folders with matches
collapse-non-matchesCollapses folders without any matches
hide-non-matchesHides files and folders without any matches
With built-in keyboard navigation, focus management, and ARIA roles (tree, treeitem, group), Trees are immediately accessible to all users. We've designed Trees to meet WCAG 2.1 expectations.
Try it: Tab to focus the tree → Arrow keys to move → Enter to expand/collapse or open a file → Space to select. Focus ring and aria-expanded / aria-selected are wired.
The same Shiki themes used by @pierre/diffs can style the FileTree. Sidebar and Git decoration colors come from your choice of themes. Pick a theme and switch light/dark to see the tree update live.
Loading theme…
Modify CSS custom properties on FileTree via the style prop to override our colors and even theme colors. For example, below are three examples that override our default values and the CSS we used to style the tree. Custom light, dark, and Synthwave '84.
Collectively, our team brings over 150 years of expertise designing, building, and scaling the world's largest distributed systems at Cloudflare, Coinbase, Discord, GitHub, Reddit, Stripe, X, and others.