Tree

A recursive, hierarchical list component powered by Reka UI where folders expand and leaf items are selectable.

Installation

npx raya-ui@latest add tree

File Structure

your-project

components

tree

Tree.vue

API Reference

Props

items

Array

[]

The hierarchical recursive data array to render.

modelValue

any | any[]

The currently selected item(s). Use standard v-model binding.

multiple

boolean

false

Allows multiple selections. When true, modelValue must be an array.

expanded

string[]

[]

An array of the currently expanded folder keys. Use v-model:expanded binding.

selectionBehavior

enum

"toggle"

Controls selection behavior. replace deselects others on click (unless modifier key is held). toggle naturally adds/removes.

labelKey

string

"label"

The object property key to use for the item's label text.

childrenKey

string

"children"

The object property key to use to identify nested children arrays.

Slots

#item

Overrides the default rendering for each tree item. Provides { item, expanded, selected, indeterminate } in the slot scope.

app
components
Button.vue
Card.vue
Tree.vue
pages
assets
package.json
README.md

Expanded Folders

[
  "app",
  "components"
]

Active Selectionnull

Settings

Multiple SelectionAllow selecting multiple files.

Selection Behavior

source-code.vue

<script setup lang="ts">
import { ref } from 'vue'
import { Tree } from '@/components/ui/tree'
import { Folder, File, FileCode, Image as ImageIcon, Archive } from 'lucide-vue-next'

const items = [
  {
    label: 'app',
    icon: Folder,
    children: [
      {
        label: 'components',
        icon: Folder,
        children: [
          { label: 'Button.vue', icon: FileCode },
          { label: 'Card.vue', icon: FileCode }
        ]
      },
      {
        label: 'pages',
        icon: Folder,
        children: [
          { label: 'index.vue', icon: FileCode }
        ]
      }
    ]
  },
  { label: 'package.json', icon: Archive }
]

const selection = ref()
const expanded = ref(['app'])
</script>

<template>
  <Tree
    v-model="selection"
    v-model:expanded="expanded"
    :items="items"
  />
</template>