Tree view

• Type: Component (data)
• Access: Free, open source
• Page: https://ui.xzero.co.uk/components/tree-view
• Markdown: https://ui.xzero.co.uk/components/tree-view/markdown
• Registry item: https://mcp.xzero.co.uk/r/tree-view.json
• Source file: registry/components/tree-view/tree-view.tsx
• Dependencies: motion, lucide-react
• Keywords: data, navigation, react tree view, file tree, file explorer component, nested tree, folder tree, treeview keyboard navigation

When to use

• Files, folders, and nested categories people expand and select.
• Side panels next to code-block or a detail view where selection drives content.
• Hierarchies that need full keyboard navigation with arrow keys.

When not to use

• Use accordion for a few collapsible sections of content.
• Use breadcrumb to show the path to the current page.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/tree-view

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { TreeView, type TreeNode } from "@/components/xzero/tree-view/tree-view";

const files: TreeNode[] = [
  { id: "app", label: "app", children: [
    { id: "page", label: "page.tsx" },
    { id: "layout", label: "layout.tsx" },
  ] },
  { id: "readme", label: "README.md" },
];

export function Files() {
  return <TreeView nodes={files} defaultExpandedIds={["app"]} onSelect={node => open(node.id)} />;
}

API reference

TreeView

A keyboard navigable file tree with animated expand and a gliding selection.

Prop	Type	Default	Description
nodes (required)	{ id: string; label: string; children?: TreeNode[]; icon?: ReactNode }[]	–	Root nodes. Nodes with children are folders.
defaultExpandedIds	string[]	[]	Folders open on first render when uncontrolled.
expandedIds	string[]	–	Controlled open folders.
onExpandedChange	(expandedIds: string[]) => void	–	Called with the new open set.
onSelect	(node: TreeNode) => void	–	Called when a row is clicked or activated.
aria-label	string	"File tree"	Accessible name for the tree.

Keyboard interactions

Keys	Action
ArrowDown / ArrowUp	Moves to the next or previous visible row.
ArrowRight	Opens a folder, or moves to its first child if open.
ArrowLeft	Closes an open folder, or moves to the parent.
Home / End	Moves to the first or last visible row.
Enter / Space	Selects the row and toggles a folder.

Accessibility

• Uses role="tree" and role="treeitem" with aria-level, aria-posinset, aria-setsize, aria-expanded, and aria-selected.
• Roving tabindex keeps one row in the tab order.
• Icons, chevrons, and branch lines are aria-hidden.

Motion

• Opening a folder grows the space and staggers its children in; closing collapses rows smoothly.
• The selection highlight glides between rows and the chevron rotates on a snappy spring.
• Reduced motion shows and hides rows instantly.

Responsive behavior

• Rows are a fixed 36px and labels ellipsize, so deep paths clip rather than overflow on narrow panels.
• Each level indents 18px, so very deep trees lose label space on mobile.
• Hover highlights apply only on hover-capable fine pointers.

Performance

• Every visible row renders with position layout animation; nodes are not virtualized, so keep open folders reasonable.
• Closed folders do not render their children.

Notes for AI

• Use for hierarchical data such as files or nested categories. Use accordion for a few collapsible sections of content.
• IDs must be unique across the whole tree. Control expandedIds when the open set must persist or sync with routing.

Related

• Accordion: Progressively reveal supporting information in place.
• Code block: Present code with legible hierarchy and copy access.
• Breadcrumb: Show where a page sits in a hierarchy.

Also in tables

• Sortable data table: Compare structured records with sortable columns.
• Tree table: A table with nested rows, tri-state selection, hierarchy-preserving sort, and lazy-loaded children.
• Reorderable list: Organize items with direct drag and drop.
• Filter toolbar: Keep collection filters close and easy to reset.
• JSON viewer: A collapsible JSON tree with search, paging for long arrays, and copy value or path.

Guidance for AI tools

Tree view: Navigate nested folders and structured content. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt