On this page

Tree

Hierarchical tree view for displaying nested data.

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

pnpm add @ninna-ui/data-display@latest

Includes @ninna-ui/core. CSS setup required.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.

Live preview/ Default

src

components

Button.tsx

Input.tsx

App.tsx

index.ts

package.json

tsconfig.json

With Selection

Track and highlight selected nodes.

Live preview/ Default

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.

Live preview/ Default

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
`disabled`	`boolean`	`—`	Whether the node is interaction-disabled

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