Tree View

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.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Whether to render glass styling.
`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.