#Tree

Draws structure: a vertical rail and depth indentation around nested content, with optional per-item collapse. It shows a hierarchy rather than letting you work in one — reach for TreeView when rows need selecting, keyboard navigation or disabled states, and for Accordion when the levels are sections rather than a tree.

Source · Storybook

#Usage

import { Tree, TreeItem, TreeItemHeader } from '@wallarm-org/design-system/Tree';

#Examples

#Nested

Nesting a Tree inside an item adds a depth, and each depth draws its own rail so the ancestry stays readable.

#With icons

TreeItemHeader’s icon prop sits before the label at every depth, which is how a status or a type reads down a branch.

#With icons nested

The same icons four levels deep — the case that shows whether the indentation is still legible at depth.

#Collapsible

collapsible on an item turns its header into a toggle, open by default. It is per item, not a tree-wide setting.

#Collapsible with actions

TreeItemHeader’s action slot holds a control on the right of the row, which is where a per-branch action belongs.

#Props

#TreeItem

#TreeItemContent

#TreeItemHeader