1# Tree
2 
3A tree view component to display and interact with hierarchical data structures.
4 
5> Based on [Reka UI Tree](https://reka-ui.com/docs/components/tree)
6 
7## Key Props
8 
9- `items`: as an array of objects with the following properties:
10 
11- `icon?: string`{lang="ts-type"}
12- `label?: string`{lang="ts-type"}
13- `trailingIcon?: string`{lang="ts-type"}
14- `defaultExpanded?: boolean`{lang="ts-type"}
15- `disabled?: boolean`{lang="ts-type"}
16- `slot?: string`{lang="ts-type"}
17- `children?: TreeItem[]`{lang="ts-type"}
18- `onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void`{lang="ts-type"}
19- `onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void`{lang="ts-type"}
20- `class?: any`{lang="ts-type"}
21- `ui?: { item?: ClassNameValue, itemWithChildren?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingIcon?: ClassNameValue, listWithChildren?: ClassNameValue }`{lang="ts-type"}
22 
23::note
24A unique identifier is required for each item.
25 
26- `multiple`: to allow multiple item selections.
27- `nested`: to control whether the Tree is rendered with nested structure or as a flat list.
28- `color`: to change the color of the Tree.
29- `size`: to change the size of the Tree.
30- `disabled`: to prevent any user interaction with the Tree.
31- `virtualize`: to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.
32- `slot`:
33 
34## Usage
35 
36```vue
37<UTree
38  <!-- props here -->
39/>
40```
41