Data Display@knitui/components

Tree

Tree renders a hierarchical, expandable node list. State lives in a useTree controller (expanded/selected/checked, with cascading checks); pass your own via the tree prop or let Tree create one. Subtree expand/collapse animates through Collapse (reduced-motion aware). Pass renderNode for fully custom node rows.

WebiOSAndroid6 style slots10 own props11 examples

Stories Source Tests Open in Storybook

import { Tree } from "@knitui/components";

Playground

Loading playground…

expandOnClickExpand/collapse a branch when its row is pressed.

true

selectOnClickSelect a node when its row is pressed.

false

withLinesRender connecting guide lines along each subtree.

false

levelOffsetHorizontal indent added per nesting level.

Playground

<Tree
  data={[{ value: "fruits", label: "Fruits", children: [{ value: "apple", label: "Apple" }, { value: "banana", label: "Banana" }, { value: "cherry", label: "Cherry" }] }, { value: "vegetables", label: "Vegetables", children: [{ value: "carrot", label: "Carrot" }, { value: "broccoli", label: "Broccoli" }] }, { value: "dairy", label: "Dairy" }]}
  expandOnClick
  selectOnClick={false}
  withLines={false}
  levelOffset="$lg"
/>

Examples

Shadows

The shadow elevation prop, inherited from Box, across all token levels.

Loading example…

ShadowsSource Storybook

With Lines

Connecting guide lines drawn along each subtree indent.

Loading example…

With LinesSource Storybook

Select On Click

Nodes become selectable on press; the selected row is visually highlighted.

Loading example…

Select On ClickSource Storybook

Deep Level Offset

Deeper nesting offset makes hierarchy levels easier to distinguish.

Loading example…

Deep Level OffsetSource Storybook

Custom Render Node

Custom node renderer via renderNode — each row gets a file-type icon derived from the node value, with the expand chevron driven manually via elementProps.

Loading example…

Custom Render NodeSource Storybook

Controlled With Actions

Controlled tree using an external useTree controller — expand-all and collapse-all buttons drive the tree from outside the component.

Loading example…

Controlled With ActionsSource Storybook

Pre Expanded

Pre-expanded tree — the src subtree is open on first render using getTreeExpandedState passed to useTree.

Loading example…

Pre ExpandedSource Storybook

Checked Nodes

Checkable nodes — a Checkbox per row driven by the useTree controller. checkNode/uncheckNode cascade to descendants, and parents render the partial isNodeIndeterminate state automatically.

Loading example…

Checked NodesSource Storybook

Multiple Selection

Multiple selection — useTree({ multiple: true }) lets several nodes be selected at once (Ctrl/Cmd-click semantics), instead of the default single selection.

Loading example…

Multiple SelectionSource Storybook

Styles

Per-slot styles targets individual parts — here the label and chevron.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`data` required	`TreeNodeData[]`	—	Hierarchical data used to render the tree.
`checkOnSpace`	`boolean \| undefined`	`false`	Accepted for Mantine parity. Space-to-check is a web-only keyboard behaviour; drive checking via the controller (`checkNode`) from a `renderNode` `Checkbox.Indicator` for cross-platform support.
`clearSelectionOnOutsideClick`	`boolean \| undefined`	`false`	Accepted for Mantine parity. Clearing selection on outside click relies on DOM click-outside detection (web-only); deferred.
`disabled` system	`boolean \| undefined`	—
`expandOnClick`	`boolean \| undefined`	`true`	Expand/collapse a branch when its row is pressed.
`expandOnSpace`	`boolean \| undefined`	`true`	Accepted for Mantine parity. Space-to-expand is a web-only keyboard behaviour (no cross-platform key primitive); on native, press to expand.
`levelOffset`	`number \| GetThemeValueForKey<"paddingLeft"> \| Animated.AnimatedNode \| "safe" \| null \| undefined` $xxs · $xs · $sm · $md · $lg · $xl · $xxl	`"$lg"`	Horizontal indent added per nesting level.
`renderNode`	`RenderNode \| undefined`	—	Render a fully custom node row from the `RenderTreeNodePayload`. Retained as the ultimate dynamic escape hatch over the composable `Tree.Node`/`Tree.Row` parts — when set it replaces each row wholesale.
`selectOnClick`	`boolean \| undefined`	`false`	Select a node when its row is pressed.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`styles` system	`SlotStyles<TreeStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`tree`	`TreeController \| undefined`	—	External controller from `useTree`; an internal one is created when omitted.
`withLines`	`boolean \| undefined`	`false`	Render connecting guide lines along each subtree.

Style slots

Every part of Tree can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`chevron`	`styles={{ chevron: { … } }}`
`label`	`styles={{ label: { … } }}`
`node`	`styles={{ node: { … } }}`
`root`	`styles={{ root: { … } }}`
`row`	`styles={{ row: { … } }}`
`subtree`	`styles={{ subtree: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.