Shadcn Tree Folder File Icons

Tree with custom indent. Built with the Tree component. Uses @headless-tree/core, @headless-tree/react alongside the shadcn primitives. A free, open source shadcn tree example you can install with npx shadcn@latest add @reui/c-tree-3 and edit as your own code.

Tree with custom indent.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: Guide lines with a folder glyph that turns into an open folder on expand and a file glyph on every leaf

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

Plus and minus marks on folders in place of turning chevrons: use the Tree Plus Minus Toggles example
A code project with a colored glyph for each kind of file: use the Tree File Explorer 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

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

Markdownhttps://reui.io/components/tree/c-tree-3.md

MCPget_example("c-tree-3")

Installnpx shadcn@latest add @reui/c-tree-3

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Tree Folder File Icons

Tree

Dependencies

@headless-tree/core
@headless-tree/react

About Shadcn Tree Folder File Icons

What You Can Build With Shadcn Tree Folder File Icons

Composes Tree, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-tree-3
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Tree Examples

Basic Basic tree.
Indent Lines Tree with indented lines.
Plus Minus Toggles Tree with custom indent.
File Explorer File explorer tree with type icons
Org Chart Organization chart tree with avatars
Permissions Permissions tree with checkboxes

Related Shadcn Component Categories

Accordion
Open-source shadcn accordion components for FAQ layouts, settings panels, and help sections.
Alert
Open-source shadcn alert components for status messages, warning banners, and destructive notices.
Alert Dialog
Open-source shadcn alert dialog components for delete confirmations, destructive actions, and critical decisions.
Aspect Ratio
Open-source shadcn aspect ratio components for responsive media, image galleries, and video previews.
Attachment
Open-source shadcn attachment components for chat composers, upload states, and file previews.
Autocomplete
Open-source shadcn autocomplete components for smart search, typeahead inputs, and suggestion lists.

Frequently Asked Questions

When should I use Shadcn Tree Folder File Icons?

Use it for guide lines with a folder glyph that turns into an open folder on expand and a file glyph on every leaf.

Shadcn Tree as a whole fits:

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

For plus and minus marks on folders in place of turning chevrons, use the Tree Plus Minus Toggles example. For a code project with a colored glyph for each kind of file, use the Tree File Explorer example. For a whole drive page with a folder rail beside a listing of the open folder, use the Files blocks. For folder rows with size and item count columns that move into other folders by pointer, use the Drag & Drop blocks. For a pick of one value from a nested list, made inside a popup, use the Cascader component.

How do I install Shadcn Tree Folder File Icons?

Run npx shadcn@latest add @reui/c-tree-3. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Tree Folder File Icons free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Tree Folder File Icons use?

It composes Tree. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.