Tree View

An expandable tree structure with checkable nodes, custom icons, keyboard navigation, and smooth animations.

Overview

The TreeView component renders a recursive tree structure with expand/collapse animations, optional checkboxes, file/folder icons, and full keyboard navigation. Built on Framer Motion for smooth transitions.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add tree-view

pnpm dlx @work-rjkashyap/unified-ui add tree-view

npx @work-rjkashyap/unified-ui add tree-view

bunx @work-rjkashyap/unified-ui add tree-view

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { TreeView } from "@work-rjkashyap/unified-ui";

Examples

Basic File Tree

src
- components
  - button.tsx
  - input.tsx
  - dialog.tsx
- app.tsx
- index.ts
package.json
README.md

const items = [
{
  id: "src",
  label: "src",
  children: [
    {
      id: "components",
      label: "components",
      children: [
        { id: "button", label: "button.tsx" },
        { id: "input", label: "input.tsx" },
        { id: "dialog", label: "dialog.tsx" },
      ],
    },
    { id: "app", label: "app.tsx" },
    { id: "index", label: "index.ts" },
  ],
},
{ id: "package", label: "package.json" },
{ id: "readme", label: "README.md" },
];

<TreeView items={items} defaultExpanded={["src", "components"]} />

const items = [{  id: "src",  label: "src",  children: [    {      id: "components",      label: "components",      children: [        { id: "button", label: "button.tsx" },        { id: "input", label: "input.tsx" },        { id: "dialog", label: "dialog.tsx" },      ],    },    { id: "app", label: "app.tsx" },    { id: "index", label: "index.ts" },  ],},{ id: "package", label: "package.json" },{ id: "readme", label: "README.md" },];<TreeView items={items} defaultExpanded={["src", "components"]} />

With Checkboxes

Permissions
- Read
- Write
- Delete
Settings
- Profile
- Notifications

Without Icons

Section A
- Item A.1
- Item A.2
Section B

Props

Prop	Type	Default	Description
`items`	`TreeNode[]`	—	The tree data structure.
`defaultExpanded`	`string[]`	`[]`	Default expanded node IDs (uncontrolled).
`expanded`	`string[]`	—	Controlled expanded node IDs.
`onExpandedChange`	`(expanded: string[]) => void`	—	Callback when expanded state changes.
`checkable`	`boolean`	`false`	Enable checkboxes on nodes.
`defaultChecked`	`string[]`	`[]`	Default checked node IDs (uncontrolled).
`checked`	`string[]`	—	Controlled checked node IDs.
`onCheckedChange`	`(checked: string[]) => void`	—	Callback when checked state changes.
`onNodeSelect`	`(nodeId: string) => void`	—	Callback when a node is clicked.
`selectedId`	`string`	—	Currently selected node ID (visual highlight).
`showLines`	`boolean`	`true`	Show connector lines for hierarchy.
`showIcons`	`boolean`	`true`	Show default file/folder icons.
`className`	`string`	—	Additional CSS classes.

TreeNode

Property	Type	Description
`id`	`string`	Unique identifier.
`label`	`string`	Display label.
`icon`	`ReactNode`	Custom icon (overrides default).
`children`	`TreeNode[]`	Child nodes (makes it a branch/folder).
`disabled`	`boolean`	Whether the node is disabled.

Accessibility

Uses role="tree" on the root and role="treeitem" on each node.
aria-expanded on branch nodes.
aria-selected on the active node.
Keyboard: Arrow keys to navigate, Enter/Space to expand/collapse, ArrowRight to expand, ArrowLeft to collapse.
Respects prefers-reduced-motion.

On this page