Shadcn Tree

Q: Can I control which nodes are expanded or collapsed?

Yes. Use a controlled expandedIds state: ` `. This lets you expand/collapse nodes programmatically or sync expansion state across sessions.

Browse 7 production-ready shadcn tree components using @headless-tree/core and @headless-tree/react. Covers basic tree, indented guide lines, custom indentation, file explorer with type icons, organization chart with avatars, and permissions tree with checkboxes: all keyboard accessible with expand and collapse animations.

For AI Agents

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

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

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
Base UI v1: API reference, docs, llms.txt, through the Base UI twin
Radix UI v1: docs, through the Radix UI twin

Markdownhttps://web.dev.reui.io/components/tree.md

MCPget_component("tree")

Installnpx shadcn@latest add @reui/tree

Full index for agents:llms.txtReUI MCP setup

Shadcn Tree: File Explorer and Hierarchical Navigation

ReUI Tree is a custom shadcn component built on @headless-tree/core and @headless-tree/react: a fully accessible, headless tree view library that handles expand/collapse state, keyboard navigation, selection model, async child loading, and WAI-ARIA tree roles without dictating markup.

7 components cover a basic tree, indented guide lines, custom indent sizes, file explorer with file type icons, organization chart with avatar-based nodes, and a permissions tree with per-node checkbox selection.

The sections below explain the Headless Tree foundation, use cases across file systems, org charts, and permission editors, feature details, and composition guidance.

What is Shadcn Tree?

ReUI Tree is a custom shadcn component: not part of the base shadcn/ui library. It is built on @headless-tree/core for framework-agnostic tree state management and @headless-tree/react for React bindings. The library handles expand/collapse state, keyboard navigation (arrow keys, Home/End, typeahead character search), multi-selection, async child loading, drag-and-drop reordering, and WAI-ARIA tree and treeitem roles.

ReUI wraps the Headless Tree API in shadcn-compatible markup, using Tailwind for indentation guides, expand icons, hover and selection states. Components show trees inside realistic containers: a file explorer with file type icons and folder collapse, an organization chart with Avatar nodes, and a permissions editor with Checkbox nodes.

Why Use Shadcn Tree?

Hierarchical data appears in file systems, folder browsers, org charts, permission editors, navigation menus, category taxonomies, and code editors. Implementing a keyboard-accessible, WAI-ARIA-compliant tree from scratch is error-prone: Headless Tree handles all state and ARIA management. ReUI components give you production-ready markup and Tailwind styling you can adapt.

The file explorer component is directly applicable to document management, CMS folder browsers, and code editors. The permissions tree with checkboxes handles role-based access control UIs where permissions nest by resource and action. Pair with Shadcn Avatar for org charts and Shadcn Checkbox for permission nodes.

Libraries and ReUI Tree Primitives

ReUI Tree imports @headless-tree/core for the framework-agnostic tree state engine and @headless-tree/react for the React integration layer. It composes shadcn Avatar for org chart nodes and Checkbox for permission tree nodes.

The library supports sync and async child loading, virtual scroll integration, and drag-and-drop: features ReUI exposes as needed across the 7 tree components.

Shadcn Tree Features

Headless Tree Core and React. Powered by @headless-tree/core and @headless-tree/react. Full WAI-ARIA tree and treeitem roles, expand/collapse state, keyboard navigation (ArrowUp, ArrowDown, ArrowLeft to collapse, ArrowRight to expand, Home, End, typeahead), and multi-selection.
File Explorer with Type Icons. File explorer component shows folder and file nodes with type-specific icons: distinguishing TypeScript, JSON, image, and folder nodes. Folders collapse and expand; files are leaf nodes with click actions.
Organization Chart with Avatars. Org chart component renders each node with shadcn Avatar, name, and role. The tree structure represents reporting relationships and is collapsible at each manager level.
Permissions Tree with Checkboxes. Permissions component adds shadcn Checkbox to each tree node for role-based access control UIs. Parent checkboxes reflect indeterminate state when only some children are checked.
Indented Guide Lines. Optional vertical indentation guide lines clarify nesting depth for deep trees. Line style, color, and indent width are Tailwind utilities: customize per tree instance.
Keyboard Navigation. Arrow keys navigate and expand/collapse nodes. Home and End jump to first and last visible node. Typeahead search jumps to nodes starting with the typed character. All navigation follows WAI-ARIA tree keyboard interaction models.
Custom Indent and Node Rendering. Indent width is configurable per tree and per level. Each node renders any React content: icon, avatar, badge, action button: without breaking keyboard focus management.

ReUI Tree: In-House Custom Shadcn Component

ReUI Tree is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project: following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Tree is a custom hierarchical navigation component not available in base shadcn/ui. Built on @headless-tree/core for framework-agnostic state management and @base-ui/react for React bindings, it handles expand/collapse, keyboard navigation (full WAI-ARIA tree semantics), multi-selection, and async child loading. 7 components cover basic tree, indented guide lines, file explorer with type icons, org chart with Avatar nodes, and a permissions tree with Checkbox selection.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling: only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.

Use Shadcn Avatar for org chart tree nodes, Shadcn Checkbox for permissions tree nodes, and Shadcn Badge for status or count indicators on folder nodes.

Pair Tree with Shadcn Scroll Area for constrained-height containers that scroll the tree list without growing the layout, and Shadcn Skeleton for async child loading states.

Combine with Shadcn Button for node actions (add child, rename, delete) and Shadcn Context Menu for right-click node action menus: a common component in file explorers and CMS folder trees.

Frequently Asked Questions

How do I lazy-load child nodes on expand?

Set a loading state when the user expands a node. Fetch children via API. Once loaded, update the node's children and transition from loading to expanded. Use an onExpandChange callback to trigger loads.

Can I control which nodes are expanded or collapsed?

Yes. Use a controlled expandedIds state: <Tree expandedIds={expandedIds} onExpandedIdsChange={setExpandedIds}>. This lets you expand/collapse nodes programmatically or sync expansion state across sessions.

How do I add checkboxes to tree nodes for multi-select?

Render a Checkbox inside each node's content. Track selected node IDs in state. On checkbox change, update state with the node ID. Include children in selection if needed (cascade).

Can I drag-and-drop nodes to reorder or move them to other branches?

Yes. Use DnD Kit's tree adapter or wrap the tree in a SortableContext. On drop, update the parent-child relationships in state. The tree component demonstrates drag-reordering within a hierarchy.

How do I handle keyboard navigation in a deep tree?

Arrow keys navigate up/down/left/right (expand/collapse on right, move to parent on left). Home and End jump to first/last visible nodes. Enter expands/collapses. The tree library handles focus and announcements automatically.

What makes ReUI Tree different from standard shadcn/ui?

ReUI Tree is a custom in-house component with 7 components for nested, collapsible, and draggable trees. It uses @headless-tree/react for keyboard navigation and ARIA roles. Both Radix and Base UI versions are available.

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.