@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
Enable the flattenEmptyDirectories boolean option in FileTreeOptions to collapse single-child folder chains into one row for a more compact tree. More about FileTreeOptions…
Use the gitStatus prop to show indicators on files for added, modified, and deleted files. Folders that contain changed descendants automatically receive a change hint. Toggle between two datasets to simulate different Git statuses.
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.
Swap out our default icons by using a custom SVG sprite that remaps the built-in icon names to your custom symbols. See the FileTreeIconConfig docs for the full API.
The default icons used when no icons option is set.
Pass a spriteSheet and remap via the icons option.
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.