Tree View
Pro

Display nested structures like file systems, categories, or organizational charts with checkboxes and connection lines.

TreeView Playground

Preview

Code

Installation

You can add the tree view component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react @react-aria/focus @react-aria/interactions @react-aria/utils

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

Define your hierarchical data and pass it to the TreeView component:

import { TreeView, type TreeNode } from '@versaui/ui/components/TreeView';

const data: TreeNode[] = [
  {
    id: 'documents',
    supportingText: '12 items',
    children: [
      { id: 'report', title: 'Report.pdf', supportingText: '2.3 MB' },
      { id: 'notes', title: 'Notes.txt', supportingText: '4 KB' },
    ]
  },
];

<TreeView data={data} />

Connection Lines

Connection lines help visualize parent-child relationships. They are enabled by default:

// With connection lines (default)
<TreeView data={data} showConnectionLines />

// Without connection lines
<TreeView data={data} showConnectionLines={false} />

Checkboxes

Enable checkboxes for multi-selection. Parent-child check propagation is handled automatically:

<TreeView
  data={data}
  showCheckboxes
  onCheckChange={(ids) => console.log('Checked:', ids)}
/>

Controlled State

For full control over expand, check, and selection states:

const [expandedIds, setExpandedIds] = useState(['documents']);
const [checkedIds, setCheckedIds] = useState([]);
const [selectedIds, setSelectedIds] = useState([]);

<TreeView
  data={data}
  expandedIds={expandedIds}
  checkedIds={checkedIds}
  selectedIds={selectedIds}
  onExpandChange={setExpandedIds}
  onCheckChange={setCheckedIds}
  onSelectionChange={setSelectedIds}
/>

Custom Icons

Provide custom icons via the icon property on each node:

import { FolderIcon, FileTextIcon, ImageIcon } from '@phosphor-icons/react';

const data: TreeNode[] = [
  {
    id: 'assets',
    icon: <FolderIcon size={16} weight="duotone" />,
    children: [
      { id: 'readme', title: 'README.md', icon: <FileTextIcon size={16} /> },
      { id: 'logo', title: 'logo.svg', icon: <ImageIcon size={16} /> },
    ]
  }
];

Disabled Items

Mark specific nodes as disabled to prevent interaction:

const data: TreeNode[] = [
  {
    id: 'downloads',
    disabled: true,
    children: [
      { id: 'file1', title: 'installer.exe' }
    ]
  }
];

Accessibility

Keyboard navigation: Use Enter or Space to toggle expand/collapse
Each item has role="treeitem", aria-expanded, aria-selected, and aria-disabled
Inset focus ring appears when navigating via keyboard
Tree structure is announced via role="group" containers

TreeNode Type

interface TreeNode {
  id: string;
  supportingText?: string;
  icon?: React.ReactNode;
  disabled?: boolean;
  children?: TreeNode[];
}

TreeView Props

Prop	Type	Default	Description
`data`	`TreeNode[]`	`[]`	Array of root-level tree nodes.
`showConnectionLines`	`boolean`	`true`	Show lines connecting parent to children.
`showCheckboxes`	`boolean`	`true`	Show checkboxes on each node.
`selectedIds`	`string[]`	`[]`	Controlled selected node IDs.
`expandedIds`	`string[]`	`[]`	Controlled expanded node IDs.
`checkedIds`	`string[]`	`[]`	Controlled checked node IDs.
`defaultExpandedIds`	`string[]`	`[]`	Initial expanded IDs (uncontrolled).
`defaultCheckedIds`	`string[]`	`[]`	Initial checked IDs (uncontrolled).
`onSelectionChange`	`(ids: string[]) => void`	`—`	Callback when selection changes.
`onExpandChange`	`(ids: string[]) => void`	`—`	Callback when expand state changes.
`onCheckChange`	`(ids: string[]) => void`	`—`	Callback when check state changes.
`className`	`string`	`''`	Additional CSS classes.

Top Navigation

Horizontal navigation header for applications

Tree ViewPro

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page

Tree View
Pro