Shadcn Tree File Explorer

When to use

• Folder and file explorers for a code project, a workspace or a document store
• Record hierarchies such as CRM accounts and contacts, or an org chart of who reports to whom
• Role permission editors grouped by area, where each action is ticked on or off

When not to use

• Folder and file glyphs in one muted color, with guide lines between levels: use the Tree Folder File Icons example
• A whole drive page with a folder rail beside a listing of the open folder: use the Files blocks
• Folder rows with size and item count columns that move into other folders by pointer: use the Drag & Drop blocks
• A pick of one value from a nested list, made inside a popup: use the Cascader component

Agent notes

• getFileIcon maps each type to a glyph and color; a type it does not list, such as config, falls back to a plain file glyph
• Folder rows come from isItemFolder counting children, not from type, so an empty folder record renders as a leaf
• syncDataLoaderFeature throws when getItem returns nothing or a promise, so children fetched from a server need the async data loader feature
• The rootItemId record is never drawn, so its children form the top level and its own name stays hidden
• After adding, moving or removing records behind dataLoader, call rebuildTree on tree, or the rows keep the old structure

Third-party API docs

• Headless Tree v1: API reference, docs