Tree
A hierarchical list component where folders expand and only files are selectable.
- app
- components
- Button.vue
- Card.vue
- Tree.vue
- pages
- assets
- package.json
- README.md
Expanded: [ "app", "components" ]
Selected Label: None
Installation
Terminal
npx shadcn-vue@latest add https://raya-ui.com/registry/tree.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | Array | [] | The hierarchical data to render. |
| modelValue | any | undefined | The currently selected item. Use v-model. |
| labelKey | string | 'label' | The property key to use for the item label. |
| childrenKey | string | 'children' | The property key to use for nested children. |
| iconKey | string | 'icon' | The property key to use for the item icon component/name. |
| selectionBehavior | 'toggle' | 'replace' | 'toggle' | Controls selection behavior. 'replace' deselects others on click (unless modifier key). 'toggle' adds/removes. |
| expanded | string[] | [] | Keys of expanded items. Use v-model:expanded. |
Emits
| Event | Payload | Description |
|---|---|---|
| update:modelValue | any | Fired when selection changes. |
| update:expanded | string[] | Fired when items are expanded or collapsed. |
Slots
| Slot | Props | Description |
|---|---|---|
| #item | { item, expanded, selected, indeterminate } | Custom content for each tree item. |