Avala Design
← Components/patterns

TreeView

TreeView + TreeNode — pattern.

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { TreeView } from "@avala/design";

<TreeView>TreeView</TreeView>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

patterns-treeview--defaultOpen in Storybook →

When to use

  • File / folder browsers, dataset hierarchies, label taxonomies, organisation charts.
  • Nested data where the user benefits from collapsing / expanding sub-branches.
  • When parent → child structure carries meaning (a flat list wouldn't read).

When not to use

  • Flat list with no nesting → use `StructuredList` or a plain <ul>.
  • Multi-select hierarchy (checkboxes on every node) → roll your own; TreeView ships single-select only today.
  • Heavy data-grid with sort / filter — even hierarchical → `DataTable` with row grouping.