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 with love by The Pierre Computer Company.
Currently v1.0.0-beta.3
Flatten empty directories
Enable the flattenEmptyDirectories boolean option in tree options to collapse single-child folder chains into one row for 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 without rendering an indicator while 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 exposes trigger modes for right-click, trigger button, or both, and 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
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, and dragging is disabled while search is active. Pass a canDrag callback to prevent specific paths from being dragged. Learn more in the item actions guide.
Search and filter by name
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.
Always virtualized
Trees with tens of thousands of items render instantly with built-in and automatic virtualization. Only visible rows are mounted. The tree below contains 2,956 files with every folder expanded. Shown with stickyFolders enabled.
Accessible from the jump
With built-in keyboard navigation, focus management, and ARIA roles (tree, treeitem) plus aria-level, aria-posinset, and aria-setsize attributes, Trees are immediately accessible to all users. We've designed Trees to align with WCAG 2.1 guidance.
Built-in icon sets
Choose between the shipped minimal, standard, and complete icon tiers. Each tier is cumulative. 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 reference for the full API.
Use Shiki themes
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. See the styling and theming reference for more.
Style with CSS variables
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 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's proportions in one place — the keyword resolves 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.