A file tree rendering library
@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 by The Pierre Computer Company.
Currently v1.0.0-beta.6
Flatten empty directories
Enable the flattenEmptyDirectories boolean option in the tree options. It collapses single-child folder chains into one row. The result is a more compact tree. Tree-shape options…
Flattened directories
Show Git status on files
Use the gitStatus option to show status badges for added, modified, deleted, renamed, untracked, and ignored files. Ignored items inherit their styling and show no indicator. Folders with changed descendants get a dot indicator automatically.
Render your own custom context menu with composition.contextMenu and the React renderContextMenu prop. This demo shows trigger modes for right-click, the trigger button, or both. It also shows menu actions for new files, new folders, rename, and delete. This demo uses Shadcn UI components for the context menu as an example. Your app can use the menus that you already have.
Editor canvas intentionally empty.
Drag and drop
Set dragAndDrop: true to move files and folders. Drag them onto other folders, flattened folders, or the root. Drop targets open automatically when you hover. The tree disables dragging while search is active. Pass a canDrag callback to lock specific paths. Learn more in the item actions guide.
Search and filter by name
Type in the search field to filter the tree. Search across file paths and names. Trees includes three fileTreeSearchMode options that control how the tree shows non-matching items. The three demos below start with search filled in. They show the different modes.
Always virtualized
Built-in, automatic virtualization renders trees with tens of thousands of items instantly. The tree mounts only the visible rows. The tree below contains 2,956 files with every folder expanded. This demo enables stickyFolders.
Accessible from the start
Trees is accessible to all users by default. It includes built-in keyboard navigation and focus management. It provides the ARIA roles tree and treeitem. It also sets the aria-level, aria-posinset, and aria-setsize attributes. We designed Trees to follow WCAG 2.1 guidance.
Built-in icon sets
Choose the shipped minimal, standard, or complete icon tier. Each tier is cumulative. Override the built-in palette with CSS variables like --trees-file-icon-color-javascript. Or use a fully custom sprite. See the FileTreeIconConfig reference for the full API.
Use Shiki themes
The same Shiki themes from @pierre/diffs can style the FileTree. The theme you choose sets the sidebar and Git decoration colors. Pick a theme. Switch between light and dark. The tree updates live. See the styling and theming reference for more.
Style with CSS variables
Modify the CSS custom properties through the style prop. This overrides the UI and theme colors. Below are three examples: custom light, dark, and Synthwave '84. Each example overrides our default values and the CSS that styles the tree. See the styling and theming reference for more info.
Light mode
We’re using OKLCH colors here—a modern color space that allows for more uniform colors and more consistent palettes.
Adjustable density
Pass density="compact", "default", or "relaxed" (or a custom numeric factor) to useFileTree to tune the tree proportions in one place. The keyword sets both the row height and the spacing factor. See the styling and theming reference for more info.
With love from The Pierre Computer Company
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.