Tree View

Name: Boreal UI
Author: Davin Chiupka

The TreeView component renders hierarchical navigation or selection trees with expandable nodes.

Usage & Examples

Project Files

project-files.tsx

<TreeView
    label="Project files"
    defaultExpandedIds={["src"]}
    items={[
      {
        id: "src",
        label: "src",
        children: [
          { id: "components", label: "components" },
          { id: "docs", label: "docs" },
        ],
      },
      { id: "package", label: "package.json" },
    ]}
  />

Props API

Tree View props API
				Default	Description
`children`	`ReactNode`	No	props	`—`	Fallback content rendered when items are not provided.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`contentClassName`	`string`	No	props	`—`	Additional class name for fallback child content.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`defaultExpandedIds`	`string[]`	No	props	`[]`	Initial expanded node ids for uncontrolled usage.
`defaultSelectedId`	`string`	No	props	`—`	Initial selected node id for uncontrolled usage.
`disabled`	`boolean`	No	props	`false`	Whether the tree is disabled.
`expandedIds`	`string[]`	No	props	`—`	Controlled expanded node ids.
`items`	`TreeViewNode[]`	No	props	`[]`	Tree nodes to render.
`label`	`string`	No	props	`"Tree"`	Accessible label for the tree.
`loading`	`boolean`	No	props	`false`	Whether the tree should display a loading state.
`onExpandedChange`	`((ids: string[]) => void)`	No	events	`—`	Callback fired when expanded nodes change.