benflux/ui
Data Display

Tree

Recursive tree view with expand/collapse, checkboxes, icons (Folder/File), and connecting lines.

With icons

src
components
button.tsx
input.tsx
app.tsx
index.ts
public
package.json

Checkable + lines

src
components
app.tsx
index.ts
public
package.json

Installation

npx benflux-ui add tree

Usage

import { Tree, type TreeDataNode } from "@benflux-ui/react"

const data: TreeDataNode[] = [
  {
    key: "src",
    title: "src",
    children: [
      { key: "app", title: "app.tsx" },
      { key: "index", title: "index.ts" },
    ],
  },
]

<Tree
  treeData={data}
  showIcon
  showLine
  checkable
  defaultExpandedKeys={["src"]}
  onSelect={(keys) => console.log(keys)}
  onCheck={(keys) => console.log(keys)}
/>

Props

PropTypeDefaultDescription
treeData*TreeDataNode[]—Hierarchical data for the tree
showIconbooleanfalseShow Folder/File icons automatically
showLinebooleanfalseDraw connecting lines between nodes
checkablebooleanfalseAdd checkboxes to each node
defaultExpandedKeysstring[][]Keys expanded on initial render
checkedKeysstring[]—Controlled checked key set
onSelect(keys: string[]) => void—Called when a node is selected
onCheck(keys: string[]) => void—Called when a checkbox is toggled