Tree

Hierarchical tree view for displaying nested data.

import { Tree } from "@ninna-ui/data-display"

pnpm add @ninna-ui/data-display

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Tree component in your application.

import { Tree } from "@ninna-ui/data-display";

const data = [
  { id: "1", label: "Folder", children: [
    { id: "1-1", label: "File.tsx" },
  ]},
];

export default function Example() {
  return <Tree data={data} />;
}

Basic

A basic file tree with folders and files.

src

components

Button.tsx

Input.tsx

App.tsx

index.ts

package.json

tsconfig.json

With Selection

Track and highlight selected nodes.

src

components

Button.tsx

Input.tsx

Modal.tsx

hooks

useState.ts

useEffect.ts

App.tsx

package.json

Selected: button

Collapsed by Default

Start with all nodes collapsed.

src

public

package.json

API Reference

Complete list of props for the Tree component.

Tree

Prop	Type	Default	Description
`aria-label`	`string`	-	Accessible label for the tree widget (use when no visible label exists)
`aria-labelledby`	`string`	-	ID of an element that labels the tree
`data*`	`TreeNode[]`	-	Tree data structure
`selectedId`	`string`	-	Currently selected node id
`onSelect`	`(id: string) => void`	-	Callback when a node is selected
`defaultExpandedIds`	`string[]`	-	Initially expanded node ids
`showLines`	`boolean`	`true`	Show connecting lines between nodes
`showIcons`	`boolean`	`true`	Show folder/file icons
`className`	`string`	-	Additional CSS classes

TreeNode

Prop	Type	Default	Description
`id*`	`string`	-	Unique node identifier
`label*`	`string`	-	Display label for the node
`children`	`TreeNode[]`	-	Child nodes (makes this a folder)
`icon`	`ReactNode`	-	Custom icon for the node

Accessibility

Uses role="tree" and role="treeitem" ARIA roles
Supports aria-label and aria-labelledby props for labeling
Arrow keys navigate between visible nodes
Right arrow expands a collapsed folder, Left arrow collapses
Enter/Space selects the focused node
Expanded state is announced via aria-expanded