@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, flattened folders, or the root with dragAndDrop: true. Drop targets open automatically when you hover. Keyboard drag and drop is supported; dragging is disabled while search is active. Use lockedPaths to prevent specific paths from being dragged. Learn more in the FileTreeOptions docs.
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.
hide-non-matchesHides files and folders without any matches
collapse-non-matchesCollapses folders without any matches
expand-matchesKeeps all items visible and expand folders with 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. Compare against our default themes in light and dark mode, too. See the Theming docs for more.
Loading theme…
Love the Pierre themes? Install our Pierre Theme pack with light and dark flavors, or learn how to build your own Shiki themes.
Modify CSS custom properties via the style prop to override UI and theme colors. For example, below are three examples—custom light, dark, and Synthwave '84— that override our default values and the CSS we use to style the tree. See the Styling docs for more info.
We’re using OKLCH colors here—a modern color space that allows for more uniform colors and more consistent palettes.
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.