shadcn.io is not affiliated with official shadcn/ui
File Tree Sidebar Block for React
A code editor in a fixed-height window whose slim sidebar is a file tree with file-type icons, arrow-key, Home, End, asterisk and type-ahead navigation, a Collapse all button, and the chosen file's lines and path on the page.
Installation
Overview
Browse a project's files from the sidebar with this file tree sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar whose explorer is the catalog's Tree View: five folders and ten files, each file with an icon for its type. The tree is one tab stop: the arrow keys walk it, Home and End jump to its ends, the side arrows open and close a folder, an asterisk opens every folder at that level, and typing a few letters jumps to a name. Choosing a file shows its lines on the page, numbered, with its path above them and a Copy path button that really uses the clipboard; the explorer's Collapse all button closes every folder. Folded to icons the rail shows only the first level, as icons with tooltips, and pressing a folder unfolds the rail onto it; below the medium breakpoint it is a sheet. It's built from Sidebar, Tree View, Copy Button and Guides, with a CSS entrance only. For editors, repositories, asset libraries and any list of nested files.
FAQ
Which keys work in the tree?
The tree is one stop in the tab order, and inside it Up and Down move through the visible rows, Right opens a folder (and moves into it when it is open), Left closes it (and moves to its parent when it is closed), Home and End jump to the first and last row, an asterisk opens every folder at the current level, and typing letters jumps to the next name that starts with them. Enter or Space on a file opens it. The leaves are links to #, kept out of the tab order, so the arrow keys are the only way between rows, as in a file manager.
How do the file icons work?
The tree takes a fileIcons map from file extensions to icons, made with createFileIcons, and picks one from the end of each file's path: a component for .tsx, a code file for .ts, braces for .json, text for .md and a picture for .svg. Folders use the tree's own folder and open-folder icons. Because the match is on the id, each node's id is its full path.
What does Copy path copy?
The open file's path from the project's root, to the real clipboard, through the Copy Button. A polite status line says "Copied the path" or, when the browser refuses (no permission, or a page not served over HTTPS), "Couldn't copy the path". The path itself is set in a monospace line that is always left-to-right and cut with an ellipsis when it is long.
What happens when the sidebar folds to icons?
The menu button or the rail along the edge folds it to the first level only: the two folders and three files, as icons with tooltips. The tree and its Collapse all button are hidden there. A file opens when you press its icon, and a folder unfolds the rail and opens that folder. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The ten files are typed in FILES as lines of text, the tree is built from one typed collection, and nothing is read from disk, edited or saved. Replace them with your own file list and contents. Choosing a file swaps the page's lines in the block's own state. The Tree View is built on Ark UI and is the same part on every target, so the code for it does not change from one to the next.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The tree works the same inside it, and choosing a file closes the sheet and puts focus back on the button. The page shows the path, the Copy path button as an icon, and the lines, which scroll inside their box.
Related
- Pro
Documentation Tree Sidebar
Folds and treesA docs host in a fixed-height window whose sidebar is a numbered outline that opens the folds above the page you choose, an Auto-collapse switch that closes the rest, a breadcrumb over the page and Previous and Next buttons in the top bar.
- Pro
Tab Groups Sidebar
Headers and sectionsA markdown editor in a fixed-height window whose sidebar has a tab strip over its list, switching between Files, the open file's Outline and Bookmarks, each keeping its own selection and marking the chosen line in the document.
- Pro
Nested Collapsible Sidebar
Folds and treesA help centre in a fixed-height window whose wide sidebar folds three levels deep, categories that hold topics that hold articles, with a Reveal active button that opens only the folds above the open article.
- Pro
Multi-Level Menu Sidebar
Folds and treesA grocery app in a fixed-height window whose inset sidebar drills down one level at a time, panel by panel up to four levels deep, with a back button, Escape and a breadcrumb that all go up.
- Pro
Collapsible Groups Sidebar
Folds and treesA framework's docs in a fixed-height window whose slim sidebar has five groups that fold from their labels, with Expand all and Collapse all, a count of open groups and a dot on a folded group that holds the current page.
- Pro
A browser IDE in a fixed-height window whose sidebar lists open editors above Code, Source control and Deploy, with close buttons, unsaved-change dots, Close all and Reopen closed.