@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.4Preview
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. Search across file paths and names. 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
Trees with thousands of items render instantly with opt-in virtualization. Only visible rows are in the DOM. Pass virtualize in FileTreeOptions to enable it. As a demo, the tree below contains 2,956 files with every folder expanded.
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.
| Key | Action |
|---|---|
| ↑ ↓ | Move focus between items |
| → | Expand folder or move to first child |
| ← | Collapse folder or move to parent |
| Enter | Open file or toggle folder |
| Space | Select the focused item |
| a–z | Type-ahead to jump by name |
| Tab | Focus in/out of tree, between search and tree |
Choose between the shipped simple, file-type, and duo-tone icon sets. You can also enable colored: true, override the built-in palette with CSS variables like --trees-file-icon-color-javascript, or fall back to a fully custom sprite. See the FileTreeIconConfig docs for the full API.
Generic built-ins with a single file glyph and no file-type map.
Semantic file-type icons without any extra configuration.
With built-in semantic colors enabled via colored: true.
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.
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.