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" },
    ]}
  />

Visual variants

Themes

primary

secondary

tertiary

quaternary

States

success

warning

error

info

Variants

solid

outline

glass

Rounding

none

medium

large

Shadows

none

light

strong

visual-variants.tsx

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

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

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

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

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

Interaction states

Disabled

interaction-states.tsx

// Disabled
<TreeView disabled
    label="Project files"
    defaultExpandedIds={["src"]}
    items={[
      {
        id: "src",
        label: "src",
        children: [
          { id: "components", label: "components" },
          { id: "docs", label: "docs" },
        ],
      },
      { id: "package", label: "package.json" },
    ]}
  />
// Loading
<TreeView loading
    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.