Content & Data
Tree Item
Tree Item describes the individual hierarchical row in a Tree View — file explorers, nested category browsers, org charts. It is the Figma row pattern; public React composition and interaction live on Tree View.
State (Default/Hover/Selected) — 3 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Known limitation: There is no public standalone React TreeItem export. Rows are an internal implementation detail of Tree View (components/ui/internal/TreeItem.tsx). Use Tree View for the canonical, publicly documented React pattern. This page remains Figma-facing prose about the Content/Tree Item component set.
Purpose
Tree Item describes the individual hierarchical row in a Tree View — file explorers, nested category browsers, org charts. It is the Figma row pattern; public React composition and interaction live on Tree View.
When to use
Content with genuine hierarchical depth where indentation communicates structure. For React, compose Tree View — expanded and selected state are owned there, not by a standalone Tree Item export.
When not to use
Flat, non-nested lists — use List Item instead of a hierarchical Tree Item row.
Accessibility
role="treeitem" within a parent role="tree", with aria-expanded, aria-level, aria-setsize, aria-posinset. Full keyboard navigation is provided by Tree View’s composition.
Common mistakes
Building indentation as a fixed per-component property instead of a real per-instance spacer value. Treating this docs page as a public standalone React TreeItem API.
Properties
State as variants. Label (text). Show chevron (boolean).
Tokens used
semantic/surface/elevatedsemantic/action/primarysemantic/icon/mutedcomponent/radius/control
Known limitation
There is no public standalone React TreeItem export. Rows are an internal implementation detail of Tree View (components/ui/internal/TreeItem.tsx). Use Tree View for the canonical, publicly documented React pattern. This page remains Figma-facing prose about the Content/Tree Item component set.