What is react-arborist?

React Arborist is a library for building tree-view panels inside React applications. Think of the folder sidebar in VS Code, the file browser in Mac Finder, or the layers panel in a design tool like Figma. If you need that kind of collapsible, nested list in your app, this library gives you a ready-made component to drop in. The component covers the features you would expect from a professional file tree: opening and closing folders, dragging items to reorder or nest them, renaming items by clicking inline, selecting one or multiple items, and scrolling to a specific item from elsewhere in the app. It also supports keyboard navigation and accessibility attributes, so users who do not use a mouse can still work through the tree. One practical detail is that the list is virtualized. That means even if your tree has thousands of items, only the rows currently visible on screen are actually rendered in the browser. This keeps the interface fast without you having to write any special code for it. You can use the component in two ways. The simpler way is to hand it your data once and let the library manage all edits internally. The more controlled way is to supply your own functions for create, rename, move, and delete, so your app stays in charge of the data. You can also pass a search term and the tree will automatically filter down to matching items, keeping parent folders visible when a child matches. Customization is straightforward. You can swap in your own components for how each row, drag preview, and drop cursor look, or you can set dimensions and spacing through props. The library also accepts custom accessor functions if your data uses different property names for IDs or child arrays, so you are not forced to reshape your existing data to fit a fixed schema.