diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 063585f2b..fdc3b1308 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -151,6 +151,7 @@ export default defineConfig({
           { text: 'Toggle Group', link: '/components/toggle-group' },
           { text: 'Toolbar', link: '/components/toolbar' },
           { text: 'Tooltip', link: '/components/tooltip' },
+          { text: `Tree ${BadgeHTML('Alpha')}`, link: '/components/tree' },
         ],
       },
       {
diff --git a/docs/components/Demos.vue b/docs/components/Demos.vue
index c493f1471..15b1ceacf 100644
--- a/docs/components/Demos.vue
+++ b/docs/components/Demos.vue
@@ -39,6 +39,7 @@ import ToggleDemo from './demo/Toggle/tailwind/index.vue'
 import ToggleGroupDemo from './demo/ToggleGroup/tailwind/index.vue'
 import ToolbarDemo from './demo/Toolbar/tailwind/index.vue'
 import TooltipDemo from './demo/Tooltip/tailwind/index.vue'
+import TreeDemo from './demo/Tree/tailwind/index.vue'
 
 import DemoContainer from './DemoContainer.vue'
 </script>
@@ -171,5 +172,8 @@ import DemoContainer from './DemoContainer.vue'
     <DemoContainer title="tooltip">
       <TooltipDemo />
     </DemoContainer>
+    <DemoContainer title="tree">
+      <TreeDemo />
+    </DemoContainer>
   </div>
 </template>
diff --git a/docs/components/demo/CalendarYearIncrement/css/index.vue b/docs/components/demo/CalendarYearIncrement/css/index.vue
index 5f5a14d6c..3abf2fce7 100644
--- a/docs/components/demo/CalendarYearIncrement/css/index.vue
+++ b/docs/components/demo/CalendarYearIncrement/css/index.vue
@@ -2,16 +2,16 @@
 import { Icon } from '@iconify/vue'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, type CalendarRootProps } from 'radix-vue'
 import './styles.css'
-import type { DateValue } from '@internationalized/date';
+import type { DateValue } from '@internationalized/date'
 
 const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
   return date.day === 17 || date.day === 18
 }
 
-const pagingFunc = (date: DateValue, sign: -1 | 1) => {
+function pagingFunc(date: DateValue, sign: -1 | 1) {
   if (sign === -1)
-    return date.subtract({ years: 1})
-  return date.add({ years: 1})
+    return date.subtract({ years: 1 })
+  return date.add({ years: 1 })
 }
 </script>
 
diff --git a/docs/components/demo/CalendarYearIncrement/tailwind/index.vue b/docs/components/demo/CalendarYearIncrement/tailwind/index.vue
index dc6c26c03..05b6b6f91 100644
--- a/docs/components/demo/CalendarYearIncrement/tailwind/index.vue
+++ b/docs/components/demo/CalendarYearIncrement/tailwind/index.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import type { DateValue } from '@internationalized/date';
+import type { DateValue } from '@internationalized/date'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, type CalendarRootProps } from 'radix-vue'
 
 const isDateUnavailable: CalendarRootProps['isDateUnavailable'] = (date) => {
   return date.day === 17 || date.day === 18
 }
 
-const pagingFunc = (date: DateValue, sign: -1 | 1) => {
+function pagingFunc(date: DateValue, sign: -1 | 1) {
   if (sign === -1)
-    return date.subtract({ years: 1})
-  return date.add({ years: 1})
+    return date.subtract({ years: 1 })
+  return date.add({ years: 1 })
 }
 </script>
 
diff --git a/docs/components/demo/Tree/css/index.vue b/docs/components/demo/Tree/css/index.vue
new file mode 100644
index 000000000..f1e314efb
--- /dev/null
+++ b/docs/components/demo/Tree/css/index.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot } from 'radix-vue'
+import { Icon } from '@iconify/vue'
+
+const items = [
+  {
+    title: 'composables',
+    icon: 'lucide:folder',
+    children: [
+      { title: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
+      { title: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' },
+    ],
+  },
+  {
+    title: 'components',
+    icon: 'lucide:folder',
+    children: [
+      {
+        title: 'Home',
+        icon: 'lucide:folder',
+        children: [
+          { title: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
+          { title: 'Button.vue', icon: 'vscode-icons:file-type-vue' },
+        ],
+      },
+    ],
+  },
+  { title: 'app.vue', icon: 'vscode-icons:file-type-vue' },
+  { title: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' },
+]
+</script>
+
+<template>
+  <TreeRoot
+    v-slot="{ flattenItems }"
+    class="list-none select-none w-56 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium" :items="items"
+    :get-key="(item) => item.title"
+    :default-expanded="['components']"
+  >
+    <h2 class="font-semibold !text-base text-blackA11 px-2 pt-1">
+      Directory Structure
+    </h2>
+    <TreeItem
+      v-for="item in flattenItems"
+      v-slot="{ isExpanded }"
+      :key="item._id"
+      :style="{ 'padding-left': `${item.level + 0.5}rem` }"
+      v-bind="item.bind"
+      class="flex items-center py-1 px-2 my-0.5 rounded outline-none focus:ring-grass8 focus:ring-2 data-[selected]:bg-grass4"
+    >
+      <template v-if="item.hasChildren">
+        <Icon v-if="!isExpanded" icon="lucide:folder" class="h-4 w-4" />
+        <Icon v-else icon="lucide:folder-open" class="h-4 w-4" />
+      </template>
+      <Icon v-else :icon="item.value.icon || 'lucide:file'" class="h-4 w-4" />
+      <div class="pl-2">
+        {{ item.value.title }}
+      </div>
+    </TreeItem>
+  </TreeRoot>
+</template>
diff --git a/docs/components/demo/Tree/tailwind/index.vue b/docs/components/demo/Tree/tailwind/index.vue
new file mode 100644
index 000000000..0adb0d0ea
--- /dev/null
+++ b/docs/components/demo/Tree/tailwind/index.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot } from 'radix-vue'
+import { Icon } from '@iconify/vue'
+
+const items = [
+  {
+    title: 'composables',
+    icon: 'lucide:folder',
+    children: [
+      { title: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
+      { title: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' },
+    ],
+  },
+  {
+    title: 'components',
+    icon: 'lucide:folder',
+    children: [
+      {
+        title: 'Home',
+        icon: 'lucide:folder',
+        children: [
+          { title: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
+          { title: 'Button.vue', icon: 'vscode-icons:file-type-vue' },
+        ],
+      },
+    ],
+  },
+  { title: 'app.vue', icon: 'vscode-icons:file-type-vue' },
+  { title: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' },
+]
+</script>
+
+<template>
+  <TreeRoot
+    v-slot="{ flattenItems }"
+    class="list-none select-none w-56 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
+    :items="items"
+    :get-key="(item) => item.title"
+    :default-expanded="['components']"
+  >
+    <h2 class="font-semibold !text-base text-blackA11 px-2 pt-1">
+      Directory Structure
+    </h2>
+    <TreeItem
+      v-for="item in flattenItems"
+      v-slot="{ isExpanded }"
+      :key="item._id"
+      :style="{ 'padding-left': `${item.level - 0.5}rem` }"
+      v-bind="item.bind"
+      class="flex items-center py-1 px-2 my-0.5 rounded outline-none focus:ring-grass8 focus:ring-2 data-[selected]:bg-grass4"
+    >
+      <template v-if="item.hasChildren">
+        <Icon
+          v-if="!isExpanded"
+          icon="lucide:folder"
+          class="h-4 w-4"
+        />
+        <Icon
+          v-else
+          icon="lucide:folder-open"
+          class="h-4 w-4"
+        />
+      </template>
+      <Icon
+        v-else
+        :icon="item.value.icon || 'lucide:file'"
+        class="h-4 w-4"
+      />
+      <div class="pl-2">
+        {{ item.value.title }}
+      </div>
+    </TreeItem>
+  </TreeRoot>
+</template>
diff --git a/docs/components/demo/Tree/tailwind/tailwind.config.js b/docs/components/demo/Tree/tailwind/tailwind.config.js
new file mode 100644
index 000000000..b84aff59e
--- /dev/null
+++ b/docs/components/demo/Tree/tailwind/tailwind.config.js
@@ -0,0 +1,15 @@
+const { green, grass } = require('@radix-ui/colors')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./**/*.vue'],
+  theme: {
+    extend: {
+      colors: {
+        ...green,
+        ...grass,
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/docs/content/components/number-field.md b/docs/content/components/number-field.md
index c5002c5d6..c272d9d18 100644
--- a/docs/content/components/number-field.md
+++ b/docs/content/components/number-field.md
@@ -8,6 +8,8 @@ aria: https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton
 
 # Number Field
 
+<Badge>Alpha</Badge>
+
 <Description>
 A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
 </Description>
diff --git a/docs/content/components/tree.md b/docs/content/components/tree.md
new file mode 100644
index 000000000..d27220b58
--- /dev/null
+++ b/docs/content/components/tree.md
@@ -0,0 +1,319 @@
+---
+
+title: Tree
+description: A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.
+name: tree
+aria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+---
+
+# Tree
+
+<Badge>Alpha</Badge>
+
+<Description>
+A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.
+</Description>
+
+<ComponentPreview name="Tree" />
+
+## Features
+
+<Highlights
+  :features="[
+    'Can be controlled or uncontrolled.',
+    'Focus is fully managed.',
+    'Full keyboard navigation.',
+    'Supports Right to Left direction.',
+    'Supports multiple selection.',
+    'Different selection behavior.',
+  ]"
+/>
+
+## Installation
+
+Install the component from your command line.
+
+<InstallationTabs value="radix-vue" />
+
+## Anatomy
+
+Import all parts and piece them together.
+
+```vue
+<script setup>
+import { TreeItem, TreeRoot, TreeVirtualizer } from 'radix-vue'
+</script>
+
+<template>
+  <TreeRoot>
+    <TreeItem />
+
+    <!-- or with virtual -->
+    <TreeVirtualizer>
+      <TreeItem />
+    </TreeVirtualizer>
+  </TreeRoot>
+</template>
+```
+
+## API Reference
+
+### Root
+
+Contains all the parts of a tree.
+
+<!-- @include: @/meta/TreeRoot.md -->
+
+### Item
+
+The item component.
+
+<!-- @include: @/meta/TreeItem.md -->
+
+<DataAttributesTable
+  :data="[
+    {
+      attribute: '[data-indent]',
+      values: 'Number',
+    },
+    {
+      attribute: '[data-expanded]',
+      values: 'Present when expanded',
+    },
+    {
+      attribute: '[data-selected]',
+      values: 'Present when selected',
+    },
+  ]"
+/>
+
+### Virtualizer
+
+Virtual container to achieve list virtualization.
+
+<!-- @include: @/meta/TreeVirtualizer.md -->
+
+## Examples
+
+### Selecting multiple items
+
+The `Tree` component allows you to select multiple items. You can enable this by providing an array of values instead of a single value.
+
+```vue line=12,16
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TreeRoot } from 'radix-vue'
+
+const people = [
+  { id: 1, name: 'Durward Reynolds' },
+  { id: 2, name: 'Kenton Towne' },
+  { id: 3, name: 'Therese Wunsch' },
+  { id: 4, name: 'Benedict Kessler' },
+  { id: 5, name: 'Katelyn Rohan' },
+]
+const selectedPeople = ref([people[0], people[1]])
+</script>
+
+<template>
+  <TreeRoot
+    v-model="selectedPeople"
+    multiple
+  >
+    ...
+  </TreeRoot>
+</template>
+```
+
+### Virtual List
+
+Rendering a long list of item can slow down the app, thus using virtualization would significantly improve the performance.
+
+```vue line=9-16
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TreeItem, TreeRoot, TreeVirtualizer } from 'radix-vue'
+</script>
+
+<template>
+  <TreeRoot :items>
+    <!-- checkout https://radix-vue.com/components/tree.html#virtualizer -->
+    <TreeVirtualizer
+      v-slot="{ item }"
+      :text-content="(opt) => opt.name"
+    >
+      <TreeItem v-bind="item.bind">
+        {{ person.name }}
+      </TreeItem>
+    </TreeVirtualizer>
+  </TreeRoot>
+</template>
+```
+
+### With Checkbox
+
+Some `Tree` component might want to show `toggled/indeterminate` checkbox. We can change the behavior of the `Tree` component by using a few props and `preventDefault` event.
+
+We set `propagateSelect` to `true` because we want the parent checkbox to select/deselect it's descendants. Then, we add a checkbox that triggers `select` event.
+
+```vue line=10-11,17-25,29-33
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TreeItem, TreeRoot } from 'radix-vue'
+</script>
+
+<template>
+  <TreeRoot
+    v-slot="{ flattenItems }"
+    :items
+    multiple
+    propagate-select
+  >
+    <TreeItem
+      v-for="item in flattenItems"
+      :key="item._id"
+      v-bind="item.bind"
+      v-slot="{ handleSelect, isSelected, isIndeterminate }"
+      @select="(event) => {
+        if (event.detail.originalEvent.type === 'click')
+          event.preventDefault()
+      }"
+      @toggle="(event) => {
+        if (event.detail.originalEvent.type === 'keydown')
+          event.preventDefault()
+      }"
+    >
+      <Icon
+        v-if="item.hasChildren"
+        icon="radix-icons:chevron-down"
+      />
+
+      <button
+        tabindex="-1"
+        @click.stop
+        @change="handleSelect"
+      >
+        <Icon
+          v-if="isSelected"
+          icon="radix-icons:check"
+        />
+        <Icon
+          v-else-if="isIndeterminate"
+          icon="radix-icons:dash"
+        />
+        <Icon
+          v-else
+          icon="radix-icons:box"
+        />
+      </button>
+
+      <div class="pl-2">
+        {{ item.value.title }}
+      </div>
+    </TreeItem>
+  </TreeRoot>
+</template>
+```
+
+### Nested Tree Node
+
+The default example shows flatten tree items and nodes, this enables [Virtualization](/components/tree.html#virtual-list) and custom feature such as Drag & Drop easier. However, you can also build it to have nested DOM node.
+
+In `Tree.vue`,
+
+```vue
+<script setup lang="ts">
+import { TreeItem } from 'radix-vue'
+
+interface TreeNode {
+  title: string
+  icon: string
+  children?: TreeNode[]
+}
+
+withDefaults(defineProps<{
+  treeItems: TreeNode[]
+  level?: number
+}>(), { level: 0 })
+</script>
+
+<template>
+  <li
+    v-for=" tree in treeItems"
+    :key="tree.title"
+  >
+    <TreeItem
+      v-slot="{ isExpanded }"
+      as-child
+      :level="level"
+      :value="tree"
+    >
+      <button>…</button>
+
+      <ul v-if="isExpanded && tree.children">
+        <Tree
+          :tree-items="tree.children"
+          :level="level + 1"
+        />
+      </ul>
+    </TreeItem>
+  </li>
+</template>
+```
+
+In `CustomTree.vue`
+
+```vue
+<template>
+  <TreeRoot
+    :items="items"
+    :get-key="(item) => item.title"
+  >
+    <Tree :tree-items="items" />
+  </TreeRoot>
+</template>
+```
+
+### Draggable/Sortable Tree
+
+For more complex draggable `Tree` component, in this example we will be using [pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop), as the core package for handling dnd.
+
+[Stackblitz Demo](https://stackblitz.com/edit/github-8f3fzs?file=src%2FTreeDND.vue)
+
+## Accessibility
+
+Adheres to the [Tree WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
+
+### Keyboard Interactions
+
+<KeyboardTable
+  :data="[
+    {
+      keys: ['Enter'],
+      description: 'When highlight on <code>TreeItem</code>, selects the focused item.',
+    },
+    {
+      keys: ['ArrowDown'],
+      description: 'When focus is on <code>TreeItem</code>, moves focus to the next item.',
+    },
+    {
+      keys: ['ArrowUp'],
+      description: 'When focus is on <code>TreeItem</code>, moves focus to the previous item.',
+    },
+    {
+      keys: ['ArrowRight'],
+      description: 'When focus is on a closed <code>TreeItem</code> (node), it opens the node without moving focus. When on an open node, it moves focus to the first child node. When on an end node, it does nothing.',
+    },
+    {
+      keys: ['ArrowLeft'],
+      description: 'When focus is on an open <code>TreeItem</code> (node), closes the node. When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node. When focus is on a root node that is also either an end node or a closed node, does nothing.',
+    },
+    {
+      keys: ['Home', 'PageUp'],
+      description: '<span>Moves focus first <code>TreeItem</code></span>',
+    },
+    {
+      keys: ['End', 'PageDown'],
+      description: '<span>Moves focus last <code>TreeItem</code></span>',
+    },
+  ]"
+/>
diff --git a/docs/content/meta/ComboboxRoot.md b/docs/content/meta/ComboboxRoot.md
index b25e8c2eb..ed10617b8 100644
--- a/docs/content/meta/ComboboxRoot.md
+++ b/docs/content/meta/ComboboxRoot.md
@@ -86,6 +86,12 @@
     'description': '<p>The controlled search term of the Combobox. Can be binded-with with v-model:searchTerm.</p>\n',
     'type': 'string',
     'required': false
+  },
+  {
+    'name': 'selectedValue',
+    'description': '<p>The current highlighted value of the COmbobox. Can be binded-with <code>v-model:selectedValue</code>.</p>\n',
+    'type': 'AcceptableValue',
+    'required': false
   }
 ]" />
 
@@ -104,6 +110,11 @@
     'name': 'update:searchTerm',
     'description': '<p>Event handler called when the searchTerm of the combobox changes.</p>\n',
     'type': '[value: string]'
+  },
+  {
+    'name': 'update:selectedValue',
+    'description': '<p>Event handler called when the highlighted value of the combobox changes</p>\n',
+    'type': '[value: AcceptableValue]'
   }
 ]" />
 
diff --git a/docs/content/meta/ListboxRoot.md b/docs/content/meta/ListboxRoot.md
index 46ca8f927..69149737f 100644
--- a/docs/content/meta/ListboxRoot.md
+++ b/docs/content/meta/ListboxRoot.md
@@ -72,7 +72,7 @@
   {
     'name': 'selectionBehavior',
     'description': '<p>How multiple selection should behave in the collection.</p>\n',
-    'type': '\'toggle\' | \'replace\'',
+    'type': '\'replace\' | \'toggle\'',
     'required': false,
     'default': '\'toggle\''
   }
diff --git a/docs/content/meta/ToggleGroupRoot.md b/docs/content/meta/ToggleGroupRoot.md
index 6cde41ee6..f96c34159 100644
--- a/docs/content/meta/ToggleGroupRoot.md
+++ b/docs/content/meta/ToggleGroupRoot.md
@@ -71,7 +71,7 @@
   {
     'name': 'update:modelValue',
     'description': '<p>Event handler called when the value changes.</p>\n',
-    'type': '[payload: string]'
+    'type': '[payload: string | string[]]'
   }
 ]" />
 
diff --git a/docs/content/meta/ToolbarToggleGroup.md b/docs/content/meta/ToolbarToggleGroup.md
index 62ebc8b2c..589daa2fe 100644
--- a/docs/content/meta/ToolbarToggleGroup.md
+++ b/docs/content/meta/ToolbarToggleGroup.md
@@ -68,6 +68,6 @@
   {
     'name': 'update:modelValue',
     'description': '<p>Event handler called when the value changes.</p>\n',
-    'type': '[payload: string]'
+    'type': '[payload: string | string[]]'
   }
 ]" />
diff --git a/docs/content/meta/TreeItem.md b/docs/content/meta/TreeItem.md
new file mode 100644
index 000000000..323ef97b7
--- /dev/null
+++ b/docs/content/meta/TreeItem.md
@@ -0,0 +1,70 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'li\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'level',
+    'description': '<p>Level of depth</p>\n',
+    'type': 'number',
+    'required': true
+  },
+  {
+    'name': 'value',
+    'description': '<p>Value given to this item</p>\n',
+    'type': 'Record<string, any>',
+    'required': true
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '<p>Event handler called when the selecting item. &lt;br&gt; It can be prevented by calling <code>event.preventDefault</code>.</p>\n',
+    'type': '[event: SelectEvent<Record<string, any>>]'
+  },
+  {
+    'name': 'toggle',
+    'description': '<p>Event handler called when the selecting item. &lt;br&gt; It can be prevented by calling <code>event.preventDefault</code>.</p>\n',
+    'type': '[event: ToggleEvent<Record<string, any>>]'
+  }
+]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'isExpanded',
+    'description': '',
+    'type': 'boolean'
+  },
+  {
+    'name': 'isSelected',
+    'description': '',
+    'type': 'boolean'
+  },
+  {
+    'name': 'isIndeterminate',
+    'description': '',
+    'type': 'boolean | undefined'
+  },
+  {
+    'name': 'handleToggle',
+    'description': '',
+    'type': ''
+  },
+  {
+    'name': 'handleSelect',
+    'description': '',
+    'type': ''
+  }
+]" />
diff --git a/docs/content/meta/TreeRoot.md b/docs/content/meta/TreeRoot.md
new file mode 100644
index 000000000..729d102c3
--- /dev/null
+++ b/docs/content/meta/TreeRoot.md
@@ -0,0 +1,115 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'ul\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultExpanded',
+    'description': '<p>The value of the expanded tree when initially rendered. Use when you do not need to control the state of the expanded tree</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the tree when initially rendered. Use when you do not need to control the state of the tree</p>\n',
+    'type': 'Record<string, any> | Record<string, any>[]',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the listbox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with tree</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'expanded',
+    'description': '<p>The controlled value of the expanded item. Can be binded-with with <code>v-model</code>.</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'getKey',
+    'description': '<p>This function is passed the index of each item and should return a unique key for that item</p>\n',
+    'type': '(val: Record<string, any>) => string',
+    'required': true
+  },
+  {
+    'name': 'items',
+    'description': '<p>List of items</p>\n',
+    'type': 'Record<string, any>[]',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the tree. Can be binded-with with <code>v-model</code>.</p>\n',
+    'type': 'Record<string, any> | Record<string, any>[]',
+    'required': false
+  },
+  {
+    'name': 'multiple',
+    'description': '<p>Whether multiple options can be selected or not.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'propagateSelect',
+    'description': '<p>When <code>true</code>, selecting parent will select the descendants.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'selectionBehavior',
+    'description': '<p>How multiple selection should behave in the collection.</p>\n',
+    'type': '\'replace\' | \'toggle\'',
+    'required': false,
+    'default': '\'toggle\''
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:expanded',
+    'description': '',
+    'type': '[val: string[]]'
+  },
+  {
+    'name': 'update:modelValue',
+    'description': '<p>Event handler called when the value changes.</p>\n',
+    'type': '[val: Record<string, any>]'
+  }
+]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'flattenItems',
+    'description': '',
+    'type': 'FlattenedItem<Record<string, any>>[]'
+  },
+  {
+    'name': 'modelValue',
+    'description': '',
+    'type': 'Record<string, any> | Record<string, any>[]'
+  },
+  {
+    'name': 'expanded',
+    'description': '',
+    'type': 'string[]'
+  }
+]" />
diff --git a/docs/content/meta/TreeVirtualizer.md b/docs/content/meta/TreeVirtualizer.md
new file mode 100644
index 000000000..9f479e4e0
--- /dev/null
+++ b/docs/content/meta/TreeVirtualizer.md
@@ -0,0 +1,24 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'estimateSize',
+    'description': '<p>Estimated size (in px) of each item</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'textContent',
+    'description': '<p>text content for each item to achieve type-ahead feature</p>\n',
+    'type': '((item: Record<string, any>) => string)',
+    'required': false
+  }
+]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'item',
+    'description': '',
+    'type': 'FlattenedItem<Record<string, any>>'
+  }
+]" />
diff --git a/packages/plugins/src/namespaced/index.ts b/packages/plugins/src/namespaced/index.ts
index d286248bf..439698d70 100644
--- a/packages/plugins/src/namespaced/index.ts
+++ b/packages/plugins/src/namespaced/index.ts
@@ -1,4 +1,4 @@
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AspectRatio, AvatarFallback, AvatarImage, AvatarRoot, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, CheckboxIndicator, CheckboxRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateFieldInput, DateFieldRoot, DatePickerAnchor, DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerClose, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger, DateRangeFieldInput, DateRangeFieldRoot, DateRangePickerAnchor, DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerClose, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger, HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, Label, ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, ListboxVirtualizer, MenubarArrow, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuSub, NavigationMenuTrigger, NavigationMenuViewport, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, PinInputInput, PinInputRoot, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, ProgressIndicator, ProgressRoot, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, SelectArrow, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Separator, SliderRange, SliderRoot, SliderThumb, SliderTrack, SplitterGroup, SplitterPanel, SplitterResizeHandle, SwitchRoot, SwitchThumb, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroupItem, ToggleGroupRoot, ToolbarButton, ToolbarLink, ToolbarRoot, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, Viewport } from 'radix-vue'
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AspectRatio, AvatarFallback, AvatarImage, AvatarRoot, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot, CheckboxIndicator, CheckboxRoot, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, ConfigProvider, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateFieldInput, DateFieldRoot, DatePickerAnchor, DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerClose, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger, DateRangeFieldInput, DateRangeFieldRoot, DateRangePickerAnchor, DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerClose, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger, HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger, Label, ListboxContent, ListboxFilter, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, ListboxRoot, ListboxVirtualizer, MenubarArrow, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarItemIndicator, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarRoot, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuSub, NavigationMenuTrigger, NavigationMenuViewport, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationList, PaginationListItem, PaginationNext, PaginationPrev, PaginationRoot, PinInputInput, PinInputRoot, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Primitive, ProgressIndicator, ProgressRoot, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, SelectArrow, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Separator, SliderRange, SliderRoot, SliderThumb, SliderTrack, Slot, SplitterGroup, SplitterPanel, SplitterResizeHandle, SwitchRoot, SwitchThumb, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroupItem, ToggleGroupRoot, ToolbarButton, ToolbarLink, ToolbarRoot, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, TreeItem, TreeRoot, TreeVirtualizer, Viewport, VisuallyHidden } from 'radix-vue'
 
 export const Accordion = {
   Content: AccordionContent,
@@ -714,4 +714,14 @@ export const Tooltip = {
   Provider: typeof TooltipProvider
 }
 
+export const Tree = {
+  Root: TreeRoot,
+  Item: TreeItem,
+  Virtualizer: TreeVirtualizer,
+} as {
+  Root: typeof TreeRoot
+  Item: typeof TreeItem
+  Virtualizer: typeof TreeVirtualizer
+}
+
 export { Viewport }
diff --git a/packages/radix-vue/constant/components.ts b/packages/radix-vue/constant/components.ts
index 446b5f64d..d5766cacd 100644
--- a/packages/radix-vue/constant/components.ts
+++ b/packages/radix-vue/constant/components.ts
@@ -408,6 +408,12 @@ export const components = {
     'TooltipProvider',
   ],
 
+  tree: [
+    'TreeRoot',
+    'TreeItem',
+    'TreeVirtualizer',
+  ],
+
   viewport: [
     'Viewport',
   ],
diff --git a/packages/radix-vue/src/Calendar/CalendarNext.vue b/packages/radix-vue/src/Calendar/CalendarNext.vue
index cb7e9fd57..77b3b439c 100644
--- a/packages/radix-vue/src/Calendar/CalendarNext.vue
+++ b/packages/radix-vue/src/Calendar/CalendarNext.vue
@@ -4,11 +4,12 @@ import type { CalendarIncrement } from '@/shared/date'
 import type { DateValue } from '@internationalized/date'
 
 export interface CalendarNextProps extends PrimitiveProps {
-/** The calendar unit to go forward 
-* @deprecated Use `nextPage` instead
-*/
+/**
+ * The calendar unit to go forward
+ * @deprecated Use `nextPage` instead
+ */
   step?: CalendarIncrement
-/** The function to be used for the next page. Overwrites the `nextPage` function set on the `CalendarRoot`. */
+  /** The function to be used for the next page. Overwrites the `nextPage` function set on the `CalendarRoot`. */
   nextPage?: (placeholder: DateValue) => DateValue
 }
 </script>
diff --git a/packages/radix-vue/src/Calendar/CalendarPrev.vue b/packages/radix-vue/src/Calendar/CalendarPrev.vue
index bf6f38588..41597c335 100644
--- a/packages/radix-vue/src/Calendar/CalendarPrev.vue
+++ b/packages/radix-vue/src/Calendar/CalendarPrev.vue
@@ -4,11 +4,12 @@ import type { CalendarIncrement } from '@/shared/date'
 import type { DateValue } from '@internationalized/date'
 
 export interface CalendarPrevProps extends PrimitiveProps {
-/** The calendar unit to go back 
-* @deprecated Use `prevPage` instead
-*/
+/**
+ * The calendar unit to go back
+ * @deprecated Use `prevPage` instead
+ */
   step?: CalendarIncrement
-/** The function to be used for the prev page. Overwrites the `prevPage` function set on the `CalendarRoot`. */
+  /** The function to be used for the prev page. Overwrites the `prevPage` function set on the `CalendarRoot`. */
   prevPage?: (placeholder: DateValue) => DateValue
 }
 </script>
diff --git a/packages/radix-vue/src/Calendar/story/CalendarChromatic.story.vue b/packages/radix-vue/src/Calendar/story/CalendarChromatic.story.vue
index 6e511ec64..5387aee9b 100644
--- a/packages/radix-vue/src/Calendar/story/CalendarChromatic.story.vue
+++ b/packages/radix-vue/src/Calendar/story/CalendarChromatic.story.vue
@@ -8,7 +8,7 @@ const modelValue = ref(defaultValue) as Ref<DateValue>
 
 const placeholder = ref(new CalendarDate(2024, 4, 1)) as Ref<CalendarDate>
 
-const paging = (date: DateValue, sign: -1 | 1) => {
+function paging(date: DateValue, sign: -1 | 1) {
   if (sign === -1)
     return date.subtract({ years: 1 })
   return date.add({ years: 1 })
@@ -79,7 +79,11 @@ const paging = (date: DateValue, sign: -1 | 1) => {
     </Variant>
 
     <Variant title="Pagination functions">
-      <Calendar :default-value="defaultValue" :next-page="(date: DateValue) => paging(date, 1)" :prev-page="(date: DateValue) => paging(date, -1)" />
+      <Calendar
+        :default-value="defaultValue"
+        :next-page="(date: DateValue) => paging(date, 1)"
+        :prev-page="(date: DateValue) => paging(date, -1)"
+      />
     </Variant>
   </Story>
 </template>
diff --git a/packages/radix-vue/src/Calendar/story/CalendarYearIncrement.story.vue b/packages/radix-vue/src/Calendar/story/CalendarYearIncrement.story.vue
index e73d888c3..75b0f2737 100644
--- a/packages/radix-vue/src/Calendar/story/CalendarYearIncrement.story.vue
+++ b/packages/radix-vue/src/Calendar/story/CalendarYearIncrement.story.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from '../'
-import type { DateValue } from '@internationalized/date';
+import type { DateValue } from '@internationalized/date'
 
-const paging = (date: DateValue, sign: -1 | 1) => {
+function paging(date: DateValue, sign: -1 | 1) {
   if (sign === -1)
     return date.subtract({ years: 1 })
   return date.add({ years: 1 })
diff --git a/packages/radix-vue/src/Calendar/story/_Calendar.vue b/packages/radix-vue/src/Calendar/story/_Calendar.vue
index 2c065a32d..89bce7d17 100644
--- a/packages/radix-vue/src/Calendar/story/_Calendar.vue
+++ b/packages/radix-vue/src/Calendar/story/_Calendar.vue
@@ -5,10 +5,10 @@ import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, Cale
 
 const props = defineProps<{ calendarProps?: CalendarRootProps, emits?: { 'onUpdate:modelValue'?: (data: DateValue) => void } }>()
 
-const pagingFunc = (date: DateValue, sign: -1 | 1) => {
+function pagingFunc(date: DateValue, sign: -1 | 1) {
   if (sign === -1)
-    return date.subtract({ years: 1})
-  return date.add({ years: 1})
+    return date.subtract({ years: 1 })
+  return date.add({ years: 1 })
 }
 </script>
 
diff --git a/packages/radix-vue/src/Collection/Collection.ts b/packages/radix-vue/src/Collection/Collection.ts
index faba925b1..8f4255bdc 100644
--- a/packages/radix-vue/src/Collection/Collection.ts
+++ b/packages/radix-vue/src/Collection/Collection.ts
@@ -5,7 +5,7 @@ import { Slot, usePrimitiveElement } from '@/Primitive'
 
 interface CollectionContext<ItemData = {}> {
   collectionRef: Ref<HTMLElement | undefined>
-  itemMap: Ref<Map<HTMLElement, { ref: HTMLElement } & ItemData>>
+  itemMap: Ref<Map<HTMLElement, { ref: HTMLElement, value?: any } & ItemData>>
   attrName: string
 }
 
@@ -46,20 +46,21 @@ export const CollectionSlot = defineComponent({
 
 export const CollectionItem = defineComponent({
   name: 'CollectionItem',
+  inheritAttrs: false,
   setup(_, { slots, attrs }) {
     const context = injectCollectionContext()
     const { primitiveElement, currentElement } = usePrimitiveElement()
-    const vm = getCurrentInstance()
+    const { value, ...restAttrs } = attrs
 
     watchEffect((cleanupFn) => {
       if (currentElement.value) {
         const key = markRaw(currentElement.value)
-        context.itemMap.value.set(key, { ref: currentElement.value!, ...(markRaw(vm?.parent?.props ?? {})) })
+        context.itemMap.value.set(key, { ref: currentElement.value!, value })
         cleanupFn(() => context.itemMap.value.delete(key))
       }
     })
 
-    return () => h(Slot, { ...attrs, [context.attrName]: '', ref: primitiveElement }, slots)
+    return () => h(Slot, { ...restAttrs, [context.attrName]: '', ref: primitiveElement }, slots)
   },
 })
 
diff --git a/packages/radix-vue/src/Combobox/ComboboxItem.vue b/packages/radix-vue/src/Combobox/ComboboxItem.vue
index f1935249c..f11bb8b07 100644
--- a/packages/radix-vue/src/Combobox/ComboboxItem.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxItem.vue
@@ -103,7 +103,7 @@ provideComboboxItemContext({
 </script>
 
 <template>
-  <CollectionItem>
+  <CollectionItem :value="value">
     <Primitive
       v-show="isInOption"
       :id="optionId"
diff --git a/packages/radix-vue/src/Listbox/ListboxItem.vue b/packages/radix-vue/src/Listbox/ListboxItem.vue
index 923cdda7e..b5719a5d8 100644
--- a/packages/radix-vue/src/Listbox/ListboxItem.vue
+++ b/packages/radix-vue/src/Listbox/ListboxItem.vue
@@ -68,7 +68,7 @@ provideListboxItemContext({
 </script>
 
 <template>
-  <CollectionItem>
+  <CollectionItem :value="value">
     <Primitive
       :id="id"
       :ref="forwardRef"
diff --git a/packages/radix-vue/src/Listbox/ListboxRoot.vue b/packages/radix-vue/src/Listbox/ListboxRoot.vue
index 8d6510935..86aa566d3 100644
--- a/packages/radix-vue/src/Listbox/ListboxRoot.vue
+++ b/packages/radix-vue/src/Listbox/ListboxRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { createContext, useDirection, useFormControl, useKbd, useTypeahead } from '@/shared'
+import { createContext, findValuesBetween, useDirection, useFormControl, useKbd, useTypeahead } from '@/shared'
 import { Primitive } from '..'
 import { type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
 import type { AcceptableValue, DataOrientation, Direction } from '@/shared/types'
@@ -75,7 +75,7 @@ export type ListboxRootEmits<T = AcceptableValue> = {
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import { type EventHook, createEventHook, useVModel } from '@vueuse/core'
 import { type Ref, nextTick, ref, toRefs, watch } from 'vue'
-import { compare, findValuesBetween } from './utils'
+import { compare } from './utils'
 import { createCollection } from '@/Collection'
 import { VisuallyHiddenInput } from '@/VisuallyHidden'
 
diff --git a/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue b/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue
index be36799ad..a454b7b23 100644
--- a/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue
+++ b/packages/radix-vue/src/Listbox/ListboxVirtualizer.vue
@@ -13,9 +13,10 @@ export interface ListboxVirtualizerProps<T extends AcceptableValue = AcceptableV
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { type Ref, cloneVNode, computed, useSlots } from 'vue'
 import { injectListboxRootContext } from './ListboxRoot.vue'
-import { compare, findValuesBetween, queryCheckedElement } from './utils'
+import { compare, queryCheckedElement } from './utils'
 import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
 import { refAutoReset } from '@vueuse/shared'
+import { findValuesBetween } from '@/shared'
 import { getNextMatch } from '@/shared/useTypeahead'
 import { useParentElement } from '@vueuse/core'
 import { useCollection } from '@/Collection'
@@ -71,7 +72,7 @@ const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map(
     is: cloneVNode(slots.default!({
       option: props.options[item.index],
     })![0], {
-      'key': `${item.index}`,
+      'key': `${item.key}`,
       'data-index': item.index,
       'aria-setsize': props.options.length,
       'aria-posinset': item.index + 1,
diff --git a/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue b/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue
index 57b490e19..a92174c4f 100644
--- a/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue
+++ b/packages/radix-vue/src/Listbox/story/ListboxChromatic.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ListboxContent, ListboxItem, ListboxRoot } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 
 const options = computed(() => countryList.slice(0, 20))
 const singleControl = ref()
diff --git a/packages/radix-vue/src/Listbox/story/ListboxDemo.story.vue b/packages/radix-vue/src/Listbox/story/ListboxDemo.story.vue
index c7c76393c..89088f666 100644
--- a/packages/radix-vue/src/Listbox/story/ListboxDemo.story.vue
+++ b/packages/radix-vue/src/Listbox/story/ListboxDemo.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ListboxContent, ListboxItem, ListboxRoot } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 
 const filterText = ref('')
 const filteredOptions = computed(() => {
diff --git a/packages/radix-vue/src/Listbox/story/ListboxFilter.story.vue b/packages/radix-vue/src/Listbox/story/ListboxFilter.story.vue
index 46872a15a..84911a101 100644
--- a/packages/radix-vue/src/Listbox/story/ListboxFilter.story.vue
+++ b/packages/radix-vue/src/Listbox/story/ListboxFilter.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ListboxContent, ListboxFilter, ListboxItem, ListboxRoot } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 
 const searchTerm = ref('')
 const options = computed(() => searchTerm.value.trim() ? countryList.slice(0, 20).filter(i => i.toLowerCase().includes(searchTerm.value.toLowerCase().trim())) : countryList.slice(0, 20))
diff --git a/packages/radix-vue/src/Listbox/story/ListboxVirtual.story.vue b/packages/radix-vue/src/Listbox/story/ListboxVirtual.story.vue
index db1971337..17acb9e84 100644
--- a/packages/radix-vue/src/Listbox/story/ListboxVirtual.story.vue
+++ b/packages/radix-vue/src/Listbox/story/ListboxVirtual.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ListboxContent, ListboxFilter, ListboxItem, ListboxRoot, ListboxVirtualizer } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 
 const filterText = ref('')
 const filteredOptions = computed(() => {
diff --git a/packages/radix-vue/src/Listbox/story/_Listbox.vue b/packages/radix-vue/src/Listbox/story/_Listbox.vue
index d722aae87..3a0f58570 100644
--- a/packages/radix-vue/src/Listbox/story/_Listbox.vue
+++ b/packages/radix-vue/src/Listbox/story/_Listbox.vue
@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue'
 import type { ListboxRootEmits, ListboxRootProps } from '../'
 import { ListboxContent, ListboxItem, ListboxRoot } from '../'
-import { countryList } from './constants'
+import { countryList } from '@/shared/constant'
 import { useForwardPropsEmits } from '@/shared'
 
 const props = defineProps<ListboxRootProps>()
diff --git a/packages/radix-vue/src/Listbox/utils.ts b/packages/radix-vue/src/Listbox/utils.ts
index fe9277c9f..8f1489d73 100644
--- a/packages/radix-vue/src/Listbox/utils.ts
+++ b/packages/radix-vue/src/Listbox/utils.ts
@@ -28,14 +28,3 @@ export function compare<T>(value?: T, currentValue?: T, comparator?: string | ((
 
   return isEqual(value, currentValue)
 }
-
-export function findValuesBetween<T>(array: T[], start: T, end: T) {
-  const startIndex = array.findIndex(i => isEqual(i, start))
-  const endIndex = array.findIndex(i => isEqual(i, end))
-  if (startIndex === -1 || endIndex === -1)
-    return []
-
-  const [minIndex, maxIndex] = [startIndex, endIndex].sort((a, b) => a - b)
-
-  return array.slice(minIndex, maxIndex + 1)
-}
diff --git a/packages/radix-vue/src/RadioGroup/RadioGroup.test.ts b/packages/radix-vue/src/RadioGroup/RadioGroup.test.ts
index 80f781423..06e377068 100644
--- a/packages/radix-vue/src/RadioGroup/RadioGroup.test.ts
+++ b/packages/radix-vue/src/RadioGroup/RadioGroup.test.ts
@@ -83,7 +83,7 @@ describe('given disabled RadioGroup', () => {
 
   it.each([[0], [1], [2]])('should have disabled attribute on item', async (input) => {
     expect(radios[input].attributes('disabled')).toBe('')
-    expect(radios[input].attributes('data-disabled')).toBe('true')
+    expect(radios[input].attributes('data-disabled')).toBe('')
   })
 })
 
diff --git a/packages/radix-vue/src/RangeCalendar/RangeCalendarNext.vue b/packages/radix-vue/src/RangeCalendar/RangeCalendarNext.vue
index f8c14415b..c2ff93466 100644
--- a/packages/radix-vue/src/RangeCalendar/RangeCalendarNext.vue
+++ b/packages/radix-vue/src/RangeCalendar/RangeCalendarNext.vue
@@ -4,11 +4,12 @@ import type { CalendarIncrement } from '@/shared/date'
 import type { DateValue } from '@internationalized/date'
 
 export interface RangeCalendarNextProps extends PrimitiveProps {
-/** The calendar unit to go forward 
-* @deprecated Use `nextPage` instead
-*/
+/**
+ * The calendar unit to go forward
+ * @deprecated Use `nextPage` instead
+ */
   step?: CalendarIncrement
-/** The function to be used for the next page. Overwrites the `nextPage` function set on the `RangeCalendarRoot`. */
+  /** The function to be used for the next page. Overwrites the `nextPage` function set on the `RangeCalendarRoot`. */
   nextPage?: (placeholder: DateValue) => DateValue
 }
 </script>
diff --git a/packages/radix-vue/src/RangeCalendar/RangeCalendarPrev.vue b/packages/radix-vue/src/RangeCalendar/RangeCalendarPrev.vue
index bd47075dc..20e5bdc2b 100644
--- a/packages/radix-vue/src/RangeCalendar/RangeCalendarPrev.vue
+++ b/packages/radix-vue/src/RangeCalendar/RangeCalendarPrev.vue
@@ -4,11 +4,12 @@ import type { CalendarIncrement } from '@/shared/date'
 import type { DateValue } from '@internationalized/date'
 
 export interface RangeCalendarPrevProps extends PrimitiveProps {
-/** The calendar unit to go forward 
-* @deprecated Use `prevPage` instead
-*/
+/**
+ * The calendar unit to go forward
+ * @deprecated Use `prevPage` instead
+ */
   step?: CalendarIncrement
-/** The function to be used for the prev page. Overwrites the `prevPage` function set on the `RangeCalendarRoot`. */
+  /** The function to be used for the prev page. Overwrites the `prevPage` function set on the `RangeCalendarRoot`. */
   prevPage?: (placeholder: DateValue) => DateValue
 }
 </script>
diff --git a/packages/radix-vue/src/RangeCalendar/story/RangeCalendarChromatic.story.vue b/packages/radix-vue/src/RangeCalendar/story/RangeCalendarChromatic.story.vue
index d11a58241..23b1f114f 100644
--- a/packages/radix-vue/src/RangeCalendar/story/RangeCalendarChromatic.story.vue
+++ b/packages/radix-vue/src/RangeCalendar/story/RangeCalendarChromatic.story.vue
@@ -9,7 +9,7 @@ const modelValue = ref(defaultValue) as Ref<{ start: DateValue, end: DateValue }
 
 const placeholder = ref(new CalendarDate(2024, 4, 1)) as Ref<CalendarDate>
 
-const paging = (date: DateValue, sign: -1 | 1) => {
+function paging(date: DateValue, sign: -1 | 1) {
   if (sign === -1)
     return date.subtract({ years: 1 })
   return date.add({ years: 1 })
@@ -81,8 +81,11 @@ const paging = (date: DateValue, sign: -1 | 1) => {
     </Variant>
 
     <Variant title="Pagination functions">
-      <RangeCalendar :default-value="defaultValue" :prev-page="(date: DateValue) => paging(date, -1)" :next-page="(date:DateValue)=> paging(date, 1)" />
+      <RangeCalendar
+        :default-value="defaultValue"
+        :prev-page="(date: DateValue) => paging(date, -1)"
+        :next-page="(date:DateValue) => paging(date, 1)"
+      />
     </Variant>
- 
   </Story>
 </template>
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
index 606e0c928..b863d23ee 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
@@ -50,8 +50,9 @@ export const [injectRovingFocusGroupContext, provideRovingFocusGroupContext]
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { Primitive } from '@/Primitive'
+import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { ENTRY_FOCUS, EVENT_OPTIONS, focusFirst } from './utils'
+import { CollectionSlot, createCollection } from '@/Collection'
 
 const props = withDefaults(defineProps<RovingFocusGroupProps>(), {
   loop: false,
@@ -59,6 +60,7 @@ const props = withDefaults(defineProps<RovingFocusGroupProps>(), {
   preventScrollOnEntryFocus: false,
 })
 const emits = defineEmits<RovingFocusGroupEmits>()
+
 const { loop, orientation, dir: propDir } = toRefs(props)
 const dir = useDirection(propDir)
 const currentTabStopId = useVModel(props, 'currentTabStopId', emits, {
@@ -69,9 +71,7 @@ const isTabbingBackOut = ref(false)
 const isClickFocus = ref(false)
 const focusableItemsCount = ref(0)
 
-const { forwardRef, currentElement } = useForwardExpose()
-const { createCollection } = useCollection('rovingFocus')
-const collections = createCollection(currentElement)
+const { getItems } = createCollection()
 
 function handleFocus(event: FocusEvent) {
   // We normally wouldn't need this check, because we already check
@@ -91,7 +91,7 @@ function handleFocus(event: FocusEvent) {
     emits('entryFocus', entryFocusEvent)
 
     if (!entryFocusEvent.defaultPrevented) {
-      const items = collections.value
+      const items = getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')
       const activeItem = items.find(item => item.getAttribute('data-active') === 'true')
       const currentItem = items.find(
         item => item.id === currentTabStopId.value,
@@ -106,6 +106,10 @@ function handleFocus(event: FocusEvent) {
   isClickFocus.value = false
 }
 
+defineExpose({
+  getItems,
+})
+
 provideRovingFocusGroupContext({
   loop,
   dir,
@@ -127,18 +131,19 @@ provideRovingFocusGroupContext({
 </script>
 
 <template>
-  <Primitive
-    :ref="forwardRef"
-    :tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"
-    :data-orientation="orientation"
-    :as="as"
-    :as-child="asChild"
-    :dir="dir"
-    style="outline: none"
-    @mousedown="isClickFocus = true"
-    @focus="handleFocus"
-    @blur="isTabbingBackOut = false"
-  >
-    <slot />
-  </Primitive>
+  <CollectionSlot>
+    <Primitive
+      :tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"
+      :data-orientation="orientation"
+      :as="as"
+      :as-child="asChild"
+      :dir="dir"
+      style="outline: none"
+      @mousedown="isClickFocus = true"
+      @focus="handleFocus"
+      @blur="isTabbingBackOut = false"
+    >
+      <slot />
+    </Primitive>
+  </CollectionSlot>
 </template>
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
index 3162cf820..76a3dfe59 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
@@ -5,6 +5,7 @@ export interface RovingFocusItemProps extends PrimitiveProps {
   tabStopId?: string
   focusable?: boolean
   active?: boolean
+  allowShiftKey?: boolean
 }
 </script>
 
@@ -13,7 +14,8 @@ import { computed, nextTick, onMounted, onUnmounted } from 'vue'
 import { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'
 import { Primitive } from '@/Primitive'
 import { focusFirst, getFocusIntent, wrapArray } from './utils'
-import { useCollection, useId } from '@/shared'
+import { useId } from '@/shared'
+import { CollectionItem, useCollection } from '@/Collection'
 
 const props = withDefaults(defineProps<RovingFocusItemProps>(), {
   focusable: true,
@@ -27,8 +29,7 @@ const isCurrentTabStop = computed(
   () => context.currentTabStopId.value === id.value,
 )
 
-const { injectCollection } = useCollection('rovingFocus')
-const collections = injectCollection()
+const { getItems } = useCollection()
 
 onMounted(() => {
   if (props.focusable)
@@ -55,10 +56,10 @@ function handleKeydown(event: KeyboardEvent) {
   )
 
   if (focusIntent !== undefined) {
-    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
+    if (event.metaKey || event.ctrlKey || event.altKey || (props.allowShiftKey ? false : event.shiftKey))
       return
     event.preventDefault()
-    let candidateNodes = [...collections.value]
+    let candidateNodes = [...getItems().map(i => i.ref).filter(i => i.dataset.disabled !== '')]
 
     if (focusIntent === 'last') {
       candidateNodes.reverse()
@@ -81,26 +82,27 @@ function handleKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <Primitive
-    data-radix-vue-collection-item
-    :tabindex="isCurrentTabStop ? 0 : -1"
-    :data-orientation="context.orientation.value"
-    :data-active="active"
-    :data-disabled="!focusable || undefined"
-    :as="as"
-    :as-child="asChild"
-    @mousedown="
-      (event) => {
-        // We prevent focusing non-focusable items on `mousedown`.
-        // Even though the item has tabIndex={-1}, that only means take it out of the tab order.
-        if (!focusable) event.preventDefault();
-        // Safari doesn't focus a button when clicked so we run our logic on mousedown also
-        else context.onItemFocus(id);
-      }
-    "
-    @focus="context.onItemFocus(id)"
-    @keydown="handleKeydown"
-  >
-    <slot />
-  </Primitive>
+  <CollectionItem>
+    <Primitive
+      :tabindex="isCurrentTabStop ? 0 : -1"
+      :data-orientation="context.orientation.value"
+      :data-active="active"
+      :data-disabled="!focusable ? '' : undefined"
+      :as="as"
+      :as-child="asChild"
+      @mousedown="
+        (event) => {
+          // We prevent focusing non-focusable items on `mousedown`.
+          // Even though the item has tabIndex={-1}, that only means take it out of the tab order.
+          if (!focusable) event.preventDefault();
+          // Safari doesn't focus a button when clicked so we run our logic on mousedown also
+          else context.onItemFocus(id);
+        }
+      "
+      @focus="context.onItemFocus(id)"
+      @keydown="handleKeydown"
+    >
+      <slot />
+    </Primitive>
+  </CollectionItem>
 </template>
diff --git a/packages/radix-vue/src/Tree/Tree.test.ts b/packages/radix-vue/src/Tree/Tree.test.ts
new file mode 100644
index 000000000..785ed23f7
--- /dev/null
+++ b/packages/radix-vue/src/Tree/Tree.test.ts
@@ -0,0 +1,190 @@
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { axe } from 'vitest-axe'
+import Tree from './story/_Tree.vue'
+import type { DOMWrapper, VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { useKbd } from '@/shared'
+import { nextTick } from 'vue'
+import { sleep } from '@/test'
+
+const kbd = useKbd()
+
+describe('given default Tree', () => {
+  // const kbd = useKbd()
+  let wrapper: VueWrapper<InstanceType<typeof Tree>>
+  let content: DOMWrapper<Element>
+  let items: DOMWrapper<Element>[]
+
+  const updateItems = () => {
+    items = wrapper.findAll('[role=treeitem]')
+  }
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    wrapper = mount(Tree, { attachTo: document.body, props: { selectionBehavior: 'toggle' } })
+    content = wrapper.find('[role=tree]')
+    updateItems()
+  })
+
+  it('should pass axe accessibility tests', async () => {
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+
+  it('should render snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should select and deselect item', async () => {
+    const item = items[0]
+    await item.trigger('click')
+    expect(item.attributes('aria-selected')).toBe('true')
+    await item.trigger('click')
+    expect(item.attributes('aria-selected')).toBe('false')
+  })
+
+  describe('when expand item by press ArrowRight', async () => {
+    beforeEach(async () => {
+      await items[1].trigger('keydown', { key: kbd.ARROW_RIGHT });
+      (items[1].element as HTMLElement).focus()
+      updateItems()
+    })
+
+    it('should pass axe accessibility tests', async () => {
+      expect(await axe(wrapper.element)).toHaveNoViolations()
+    })
+
+    it('should expand the item, revealing it\'s item', () => {
+      expect(items[2].text()).toBe('tree')
+    })
+
+    it('should close when press ArrowLeft', async () => {
+      await items[1].trigger('keydown', { key: kbd.ARROW_LEFT })
+      updateItems()
+      expect(items[2].text()).toBe('routes')
+      expect(items[2].text()).not.toBe('tree')
+    })
+
+    it('should focus on parent when press ArrowLeft on child item', async () => {
+      await items[2].trigger('keydown', { key: kbd.ARROW_DOWN })
+      await items[3].trigger('keydown', { key: kbd.ARROW_LEFT })
+      expect(document.activeElement).toBe(items[1].element)
+    })
+
+    it('should focus on child item when press ArriwRight', async () => {
+      await items[1].trigger('keydown', { key: kbd.ARROW_RIGHT })
+      expect(document.activeElement).toBe(items[2].element)
+    })
+
+    describe('when expand nested item', async () => {
+      beforeEach(async () => {
+        await items[2].trigger('keydown', { key: kbd.ARROW_RIGHT })
+        updateItems()
+      })
+
+      it('should pass axe accessibility tests', async () => {
+        expect(await axe(wrapper.element)).toHaveNoViolations()
+      })
+
+      it('should expand the nested item, revealing it\'s item ', () => {
+        expect(items[3].text()).toBe('Tree.vue')
+      })
+    })
+  })
+
+  // Test: useTypeAhead
+  describe('when typing letter', async () => {
+    it('should highlight text starting with l', async () => {
+      await content.trigger('keydown', { key: 'l' })
+      const item = items.find(i => i.text().startsWith('l'))
+      expect(document.activeElement).toBe(item?.element)
+    })
+  })
+
+  describe('when selection behavior `replace`', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({ selectionBehavior: 'replace' })
+      await nextTick()
+    })
+
+    it('should not toggle off the selected value', async () => {
+      const item = items[0]
+      await item.trigger('click')
+      await item.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('true')
+    })
+
+    it('should select and replace another item', async () => {
+      const item = items[0]
+      const newItem = items[1]
+      await item.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('true')
+      await newItem.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('false')
+      expect(newItem.attributes('aria-selected')).toBe('true')
+    })
+  })
+})
+
+describe('given multiple `true` Tree', () => {
+  let wrapper: VueWrapper<InstanceType<typeof Tree>>
+  // let content: DOMWrapper<Element>
+  let items: DOMWrapper<Element>[]
+
+  beforeEach(async () => {
+    document.body.innerHTML = ''
+    wrapper = mount(Tree, { props: { multiple: true, selectionBehavior: 'toggle' }, attachTo: document.body })
+    await nextTick()
+    // content = wrapper.find('[role=tree]')
+    items = wrapper.findAll('[role=treeitem]')
+  })
+
+  it('should select multiple items', async () => {
+    await items[0].trigger('keydown', { key: kbd.ENTER })
+    await items[0].trigger('keydown', { key: kbd.ARROW_DOWN })
+    await items[1].trigger('keydown', { key: kbd.ARROW_DOWN })
+    await items[2].trigger('keydown', { key: kbd.ENTER })
+
+    expect(items[0].attributes('aria-selected')).toBe('true')
+    expect(items[1].attributes('aria-selected')).toBe('false')
+    expect(items[2].attributes('aria-selected')).toBe('true')
+  })
+
+  describe('when selection behavior `replace`', () => {
+    beforeEach(async () => {
+      wrapper.setProps({ selectionBehavior: 'replace' })
+      await nextTick()
+      await items[0].trigger('click');
+      (items[0].element as HTMLElement).focus()
+    })
+
+    it('should not toggle off the selected value', async () => {
+      const item = items[0]
+      await item.trigger('click')
+      await item.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('true')
+    })
+
+    it('should select and replace another item', async () => {
+      const item = items[0]
+      const newItem = items[1]
+      expect(item.attributes('aria-selected')).toBe('true')
+      await newItem.trigger('click')
+      expect(item.attributes('aria-selected')).toBe('false')
+      expect(newItem.attributes('aria-selected')).toBe('true')
+    })
+
+    describe('when keypress Shift + ArrowDown', () => {
+      it('should select the next item', async () => {
+        await items[0].trigger('keydown.shift', { key: kbd.ARROW_DOWN })
+        expect(items[0].attributes('aria-selected')).toBe('true')
+        expect(items[1].attributes('aria-selected')).toBe('true')
+        expect(items[2].attributes('aria-selected')).toBe('false')
+
+        await items[1].trigger('keydown.shift', { key: kbd.ARROW_DOWN })
+        expect(items[0].attributes('aria-selected')).toBe('true')
+        expect(items[1].attributes('aria-selected')).toBe('true')
+        expect(items[2].attributes('aria-selected')).toBe('true')
+      })
+    })
+  })
+})
diff --git a/packages/radix-vue/src/Tree/TreeItem.vue b/packages/radix-vue/src/Tree/TreeItem.vue
new file mode 100644
index 000000000..b8181ca37
--- /dev/null
+++ b/packages/radix-vue/src/Tree/TreeItem.vue
@@ -0,0 +1,190 @@
+<script lang="ts">
+export interface TreeItemProps<T> extends PrimitiveProps {
+  /** Value given to this item */
+  value: T
+  /** Level of depth */
+  level: number
+}
+
+export type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T, isExpanded: boolean, isSelected: boolean }>
+export type ToggleEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T, isExpanded: boolean, isSelected: boolean }>
+
+export type TreeItemEmits<T> = {
+  /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */
+  select: [event: SelectEvent<T>]
+  /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */
+  toggle: [event: ToggleEvent<T>]
+}
+
+const TREE_SELECT = 'tree.select'
+const TREE_TOGGLE = 'tree.toggle'
+</script>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { Primitive, type PrimitiveProps } from '@/Primitive'
+import { RovingFocusItem } from '@/RovingFocus'
+import { injectTreeRootContext } from './TreeRoot.vue'
+import { computed, nextTick } from 'vue'
+import { useCollection } from '@/Collection'
+import { handleAndDispatchCustomEvent, useForwardRef } from '@/shared'
+import { flatten } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TreeItemProps<T>>(), {
+  as: 'li',
+})
+
+const emits = defineEmits<TreeItemEmits<T>>()
+
+defineSlots<{
+  default: (props: {
+    isExpanded: boolean
+    isSelected: boolean
+    isIndeterminate: boolean | undefined
+    handleToggle: () => void
+    handleSelect: () => void
+  }) => any
+}>()
+const rootContext = injectTreeRootContext()
+const { getItems } = useCollection()
+
+const hasChildren = computed(() => !!props.value.children)
+
+const isExpanded = computed(() => {
+  const key = rootContext.getKey(props.value)
+  return rootContext.expanded.value.includes(key)
+})
+
+const isSelected = computed(() => {
+  const key = rootContext.getKey(props.value)
+  return rootContext.selectedKeys.value.includes(key)
+})
+
+const isIndeterminate = computed(() => {
+  if (rootContext.propagateSelect.value && isSelected.value && hasChildren.value && Array.isArray(rootContext.modelValue.value)) {
+    const children = flatten<T, any>(props.value.children)
+
+    return !children.every(child => rootContext.modelValue.value.find((v: any) => rootContext.getKey(v) === rootContext.getKey(child)))
+  }
+  else {
+    return undefined
+  }
+})
+
+function handleKeydownRight(ev: KeyboardEvent) {
+  if (!hasChildren.value)
+    return
+
+  if (isExpanded.value) {
+    // go to first child
+    const collection = getItems().map(i => i.ref)
+    const currentElement = document.activeElement as HTMLElement
+    const currentIndex = collection.indexOf(currentElement)
+    const list = [...collection].slice(currentIndex)
+    const nextElement = list.find(el => Number(el.getAttribute('data-indent')) === (props.level + 1))
+
+    if (nextElement)
+      nextElement.focus()
+  }
+  else {
+    //  open expanded
+    handleToggleCustomEvent(ev)
+  }
+}
+
+function handleKeydownLeft(ev: KeyboardEvent) {
+  if (isExpanded.value) {
+    //  close expanded
+    handleToggleCustomEvent(ev)
+  }
+  else {
+    // go back to parent
+    const collection = getItems().map(i => i.ref)
+    const currentElement = document.activeElement as HTMLElement
+    const currentIndex = collection.indexOf(currentElement)
+    const list = [...collection].slice(0, currentIndex).reverse()
+    const parentElement = list.find(el => Number(el.getAttribute('data-indent')) === (props.level - 1))
+
+    if (parentElement)
+      parentElement.focus()
+  }
+}
+
+async function handleSelect(ev: SelectEvent<T>) {
+  emits('select', ev)
+  if (ev?.defaultPrevented)
+    return
+
+  rootContext.onSelect(props.value)
+}
+async function handleToggle(ev: ToggleEvent<T>) {
+  emits('toggle', ev)
+  if (ev?.defaultPrevented)
+    return
+
+  rootContext.onToggle(props.value)
+}
+
+async function handleSelectCustomEvent(ev?: PointerEvent | KeyboardEvent) {
+  if (!ev)
+    return
+
+  const eventDetail = { originalEvent: ev, value: props.value, isExpanded: isExpanded.value, isSelected: isSelected.value }
+  handleAndDispatchCustomEvent(TREE_SELECT, handleSelect, eventDetail)
+}
+
+async function handleToggleCustomEvent(ev?: PointerEvent | KeyboardEvent) {
+  if (!ev)
+    return
+
+  const eventDetail = { originalEvent: ev, value: props.value, isExpanded: isExpanded.value, isSelected: isSelected.value }
+  handleAndDispatchCustomEvent(TREE_TOGGLE, handleToggle, eventDetail)
+}
+
+defineExpose({
+  isExpanded,
+  isSelected,
+  isIndeterminate,
+  handleToggle: () => rootContext.onToggle(props.value),
+  handleSelect: () => rootContext.onSelect(props.value),
+})
+</script>
+
+<template>
+  <RovingFocusItem
+    as-child
+    :value="value"
+    allow-shift-key
+  >
+    <Primitive
+      v-bind="$attrs"
+      role="treeitem"
+      :as="as"
+      :as-child="asChild"
+      :aria-selected="isSelected"
+      :aria-expanded="hasChildren ? isExpanded : undefined"
+      :aria-level="level"
+      :data-indent="level"
+      :data-selected="isSelected ? '' : undefined"
+      :data-expanded="isExpanded ? '' : undefined"
+      @keydown.enter.space.self.prevent="handleSelectCustomEvent"
+      @keydown.right.prevent="(ev) => rootContext.dir.value === 'ltr' ? handleKeydownRight(ev) : handleKeydownLeft(ev)"
+      @keydown.left.prevent="(ev) => rootContext.dir.value === 'ltr' ? handleKeydownLeft(ev) : handleKeydownRight(ev)"
+      @click.stop="(ev) => {
+        handleSelectCustomEvent(ev)
+        handleToggleCustomEvent(ev)
+      }"
+    >
+      <slot
+        :is-expanded="isExpanded"
+        :is-selected="isSelected"
+        :is-indeterminate="isIndeterminate"
+        :handle-select="() => rootContext.onSelect(value)"
+        :handle-toggle="() => rootContext.onToggle(value)"
+      />
+    </Primitive>
+  </RovingFocusItem>
+</template>
diff --git a/packages/radix-vue/src/Tree/TreeRoot.vue b/packages/radix-vue/src/Tree/TreeRoot.vue
new file mode 100644
index 000000000..16539a619
--- /dev/null
+++ b/packages/radix-vue/src/Tree/TreeRoot.vue
@@ -0,0 +1,252 @@
+<script lang="ts">
+import { createContext, useDirection, useSelectionBehavior, useTypeahead } from '@/shared'
+import type { Direction } from '@/shared/types'
+import { flatten } from './utils'
+
+export interface TreeRootProps<T = Record<string, any>, U extends Record<string, any> = Record<string, any>> extends PrimitiveProps {
+  /** The controlled value of the tree. Can be binded-with with `v-model`. */
+  modelValue?: U | U[]
+  /** The value of the tree when initially rendered. Use when you do not need to control the state of the tree */
+  defaultValue?: U | U[]
+  /** List of items */
+  items?: T[]
+  /** The controlled value of the expanded item. Can be binded-with with `v-model`. */
+  expanded?: string[]
+  /** The value of the expanded tree when initially rendered. Use when you do not need to control the state of the expanded tree */
+  defaultExpanded?: string[]
+  /** This function is passed the index of each item and should return a unique key for that item */
+  getKey: (val: T) => string
+  /** How multiple selection should behave in the collection. */
+  selectionBehavior?: 'toggle' | 'replace'
+  /** Whether multiple options can be selected or not.  */
+  multiple?: boolean
+  /** The reading direction of the listbox when applicable. <br> If omitted, inherits globally from `DirectionProvider` or assumes LTR (left-to-right) reading mode. */
+  dir?: Direction
+  /** When `true`, prevents the user from interacting with tree  */
+  disabled?: boolean
+  /** When `true`, selecting parent will select the descendants. */
+  propagateSelect?: boolean
+}
+
+export type TreeRootEmits<T = Record<string, any>> = {
+  'update:modelValue': [val: T]
+  'update:expanded': [val: string[]]
+}
+
+interface TreeRootContext<T = Record<string, any>> {
+  modelValue: Ref<T | T[]>
+  selectedKeys: Ref<string[]>
+  onSelect: (val: T) => void
+  expanded: Ref<string[]>
+  onToggle: (val: T) => void
+  items: Ref<T[]>
+  expandedItems: Ref<T[]>
+  getKey: (val: T) => string
+  multiple: Ref<boolean>
+  disabled: Ref<boolean>
+  dir: Ref<Direction>
+  propagateSelect: Ref<boolean>
+  isVirtual: Ref<boolean>
+  virtualKeydownHook: EventHook<KeyboardEvent>
+
+  handleMultipleReplace: ReturnType<typeof useSelectionBehavior>['handleMultipleReplace']
+}
+
+export type FlattenedItem<T> = {
+  _id: string
+  index: number
+  value: T
+  level: number
+  hasChildren: boolean
+  parentItem?: T
+  bind: {
+    value: T
+    level: number
+    [key: string]: any
+  }
+}
+
+export const [injectTreeRootContext, provideTreeRootContext] = createContext<TreeRootContext<any>>('TreeRoot')
+</script>
+
+<script setup lang="ts" generic="T extends Record<string, any>, U extends Record<string, any>">
+import { Primitive, type PrimitiveProps } from '@/Primitive'
+import { type EventHook, createEventHook, useVModel } from '@vueuse/core'
+import { RovingFocusGroup } from '@/RovingFocus'
+import { type Ref, computed, nextTick, ref, toRefs } from 'vue'
+import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
+
+const props = withDefaults(defineProps<TreeRootProps<T, U>>(), {
+  as: 'ul',
+  selectionBehavior: 'toggle',
+})
+const emits = defineEmits<TreeRootEmits<U>>()
+
+defineSlots<{
+  default: (props: {
+    flattenItems: FlattenedItem<T>[]
+    modelValue: typeof modelValue.value
+    expanded: typeof expanded.value
+  }) => any
+}>()
+
+const { items, multiple, disabled, propagateSelect, dir: propDir } = toRefs(props)
+const { handleTypeaheadSearch } = useTypeahead()
+const dir = useDirection(propDir)
+const rovingFocusGroupRef = ref<InstanceType<typeof RovingFocusGroup>>()
+
+// Virtualizer
+const isVirtual = ref(false)
+const virtualKeydownHook = createEventHook<KeyboardEvent>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  // @ts-expect-error idk
+  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),
+  passive: (props.modelValue === undefined) as false,
+  deep: true,
+}) as Ref<U | U[]>
+
+const expanded = useVModel(props, 'expanded', emits, {
+  // @ts-expect-error idk
+  defaultValue: props.defaultExpanded ?? [],
+  passive: (props.expanded === undefined) as false,
+  deep: true,
+}) as Ref<string[]>
+
+const { onSelectItem, handleMultipleReplace } = useSelectionBehavior(modelValue, props)
+
+const selectedKeys = computed(() => {
+  if (multiple.value && Array.isArray(modelValue.value))
+    return modelValue.value.map(i => props.getKey(i as any))
+  else
+    return [props.getKey(modelValue.value as any ?? {})]
+})
+
+function flattenItems(items: T[], level: number = 1, parentItem?: T): FlattenedItem<T>[] {
+  return items.reduce((acc: FlattenedItem<T>[], item: T, index: number) => {
+    const key = props.getKey(item)
+    const isExpanded = expanded.value.includes(key)
+
+    const flattenedItem: FlattenedItem<T> = {
+      _id: key,
+      value: item,
+      index,
+      level,
+      parentItem,
+      hasChildren: !!item.children,
+      bind: {
+        'value': item,
+        level,
+        'aria-setsize': items.length,
+        'aria-posinset': index + 1,
+      },
+    }
+    acc.push(flattenedItem)
+
+    if (item.children && isExpanded)
+      acc.push(...flattenItems(item.children, level + 1, item))
+
+    return acc
+  }, [])
+}
+
+const expandedItems = computed(() => {
+  const items = props.items
+  const expandedKeys = expanded.value.map(i => i)
+  return flattenItems(items ?? [])
+})
+
+function handleKeydown(event: KeyboardEvent) {
+  if (isVirtual.value) {
+    virtualKeydownHook.trigger(event)
+  }
+  else {
+    const collections = rovingFocusGroupRef.value?.getItems().map(i => i.ref)
+    handleTypeaheadSearch(event.key, collections)
+  }
+}
+
+function handleKeydownNavigation(event: KeyboardEvent) {
+  if (isVirtual.value)
+    return
+
+  const intent = MAP_KEY_TO_FOCUS_INTENT[event.key]
+  nextTick(() => {
+    handleMultipleReplace(
+      intent,
+      document.activeElement,
+      rovingFocusGroupRef.value?.getItems!,
+      expandedItems.value.map(i => i.value),
+    )
+  })
+}
+
+provideTreeRootContext({
+  modelValue,
+  selectedKeys,
+  onSelect: (val) => {
+    const condition = (baseValue: U) => props.getKey(baseValue as any ?? {}) === props.getKey(val)
+    const exist = props.multiple && Array.isArray(modelValue.value) ? modelValue.value?.findIndex(condition) !== -1 : undefined
+    onSelectItem(val, condition)
+
+    if (props.propagateSelect && props.multiple && Array.isArray(modelValue.value)) {
+      const children = flatten<U, any>(val.children ?? [])
+      if (exist) {
+        // remove all child
+        modelValue.value = [...modelValue.value]
+          .filter(i => !children.some(child => props.getKey(i as any ?? {}) === props.getKey(child as any)))
+      }
+      else {
+        // select all child
+        modelValue.value = [...modelValue.value, ...children]
+      }
+    }
+  },
+  expanded,
+  onToggle(val) {
+    if (!val?.children)
+      return
+
+    const key = props.getKey(val) ?? val
+    if (expanded.value.includes(key))
+      expanded.value = expanded.value.filter(val => val !== key)
+    else
+      expanded.value.push(key)
+  },
+  getKey: props.getKey,
+  items,
+  expandedItems,
+  disabled,
+  multiple,
+  dir,
+  propagateSelect,
+
+  isVirtual,
+  virtualKeydownHook,
+  handleMultipleReplace,
+})
+</script>
+
+<template>
+  <RovingFocusGroup
+    ref="rovingFocusGroupRef"
+    as-child
+    orientation="vertical"
+    :dir="dir"
+  >
+    <Primitive
+      role="tree"
+      :as="as"
+      :as-child="asChild"
+      :aria-multiselectable="multiple ? true : undefined"
+      @keydown="handleKeydown"
+      @keydown.up.down.shift="handleKeydownNavigation"
+    >
+      <slot
+        :flatten-items="expandedItems"
+        :model-value="modelValue"
+        :expanded="expanded"
+      />
+    </Primitive>
+  </RovingFocusGroup>
+</template>
diff --git a/packages/radix-vue/src/Tree/TreeVirtualizer.vue b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
new file mode 100644
index 000000000..bd54d0fce
--- /dev/null
+++ b/packages/radix-vue/src/Tree/TreeVirtualizer.vue
@@ -0,0 +1,172 @@
+<script lang="ts">
+export interface TreeVirtualizerProps {
+  /** Estimated size (in px) of each item */
+  estimateSize?: number
+  /** text content for each item to achieve type-ahead feature */
+  textContent?: (item: Record<string, any>) => string
+}
+</script>
+
+<script setup lang="ts">
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { type Ref, cloneVNode, computed, nextTick, useSlots } from 'vue'
+import { type FlattenedItem, injectTreeRootContext } from './TreeRoot.vue'
+import { refAutoReset, useParentElement } from '@vueuse/core'
+import { getNextMatch } from '@/shared/useTypeahead'
+import { MAP_KEY_TO_FOCUS_INTENT } from '@/RovingFocus/utils'
+import { useCollection } from '@/Collection'
+
+const props = defineProps<TreeVirtualizerProps>()
+
+defineSlots<{
+  default: (props: {
+    item: FlattenedItem<Record<string, any>>
+  }) => any
+}>()
+
+const slots = useSlots()
+const rootContext = injectTreeRootContext()
+const parentEl = useParentElement() as Ref<HTMLElement>
+const { getItems } = useCollection()
+
+// Reset `search` 1 second after it was last updated
+const search = refAutoReset('', 1000)
+const optionsWithMetadata = computed(() => {
+  const parseTextContent = (option: Record<string, any>) => {
+    if (props.textContent)
+      return props.textContent(option)
+    else
+      return option.toString().toLowerCase()
+  }
+
+  return rootContext.expandedItems.value.map((option, index) => ({
+    index,
+    textContent: parseTextContent(option.value),
+  }))
+})
+
+// set virtual true when this component mounted
+rootContext.isVirtual.value = true
+
+const padding = computed(() => {
+  const el = parentEl.value
+  if (!el) {
+    return { start: 0, end: 0 }
+  }
+  else {
+    const styles = window.getComputedStyle(el)
+    return {
+      start: Number.parseFloat(styles.paddingBlockStart || styles.paddingTop),
+      end: Number.parseFloat(styles.paddingBlockEnd || styles.paddingBottom),
+    }
+  }
+})
+
+const virtualizer = useVirtualizer(
+  {
+    get scrollPaddingStart() { return padding.value.start },
+    get scrollPaddingEnd() { return padding.value.end },
+    get count() { return rootContext.expandedItems.value.length ?? 0 },
+    get horizontal() { return false },
+    getItemKey(index) {
+      return index + rootContext.getKey(rootContext.expandedItems.value[index].value)
+    },
+    estimateSize() {
+      return props.estimateSize ?? 28
+    },
+    getScrollElement() { return parentEl.value },
+    overscan: 12,
+  },
+)
+
+const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map((item) => {
+  return {
+    item,
+    is: cloneVNode(slots.default!({
+      item: rootContext.expandedItems.value[item.index],
+    })![0], {
+      'data-index': item.index,
+      'style': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        transform: `translateY(${item.start}px)`,
+        overflowAnchor: 'none',
+      },
+    }),
+  }
+}))
+
+function scrollToIndexAndFocus(index: number) {
+  virtualizer.value.scrollToIndex(index, { align: 'start' })
+  requestAnimationFrame(() => {
+    const item = parentEl.value.querySelector(`[data-index="${index}"]`) as HTMLElement
+    if (item instanceof HTMLElement)
+      item.focus()
+  })
+}
+
+rootContext.virtualKeydownHook.on((event) => {
+  const isMetaKey = event.altKey || event.ctrlKey || event.metaKey
+  const isTabKey = event.key === 'Tab' && !isMetaKey
+  if (isTabKey)
+    return
+
+  const intent = MAP_KEY_TO_FOCUS_INTENT[event.key]
+
+  if (['first', 'last'].includes(intent)) {
+    event.preventDefault()
+
+    const index = intent === 'first' ? 0 : rootContext.expandedItems.value.length - 1
+    virtualizer.value.scrollToIndex(index)
+    requestAnimationFrame(() => {
+      const items = getItems()
+      const item = intent === 'first' ? items[0] : items[items.length - 1]
+      item.ref.focus()
+    })
+  }
+  else if (intent === 'prev' && event.key !== 'ArrowUp') {
+    const currentElement = document.activeElement as HTMLElement
+    const currentIndex = Number(currentElement.getAttribute('data-index'))
+    const currentLevel = Number(currentElement.getAttribute('data-indent'))
+    const list = rootContext.expandedItems.value.slice(0, currentIndex).map((item, index) => ({ ...item, index })).reverse()
+
+    const parentItem = list.find(item => item.level === (currentLevel - 1))
+    if (parentItem)
+      scrollToIndexAndFocus(parentItem.index)
+  }
+  else if (!intent && !isMetaKey) {
+    search.value += event.key
+    const currentIndex = Number(document.activeElement?.getAttribute('data-index'))
+    const currentMatch = optionsWithMetadata.value[currentIndex].textContent
+    const filteredOptions = optionsWithMetadata.value.map(i => i.textContent)
+    const next = getNextMatch(filteredOptions, search.value, currentMatch)
+
+    const nextMatch = optionsWithMetadata.value.find(option => option.textContent === next)
+    if (nextMatch)
+      scrollToIndexAndFocus(nextMatch.index)
+  }
+
+  nextTick(() => {
+    if (event.shiftKey && intent)
+      rootContext.handleMultipleReplace(intent, document.activeElement, getItems, rootContext.expandedItems.value.map(i => i.value))
+  })
+})
+</script>
+
+<template>
+  <div
+    data-radix-vue-virtualizer
+    :style="{
+      position: 'relative',
+      width: '100%',
+      height: `${virtualizer.getTotalSize()}px`,
+    }"
+  >
+    <component
+      :is="is"
+      v-for="{ is, item } in virtualizedItems"
+      :key="item.key"
+    />
+  </div>
+</template>
diff --git a/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
new file mode 100644
index 000000000..b3373f8b8
--- /dev/null
+++ b/packages/radix-vue/src/Tree/__snapshots__/Tree.test.ts.snap
@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`given default Tree > should render snapshot 1`] = `
+"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline: none;" class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium">
+  <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="1" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-radix-vue-collection-item="">
+    <!--v-if-->
+    <div class="pl-2">index.vue</div>
+  </li>
+  <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="2" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-radix-vue-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="pl-2">lib</div>
+  </li>
+  <li class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4" style="margin-left: 1rem;" aria-setsize="3" aria-posinset="3" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-radix-vue-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="h-4 w-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="pl-2">routes</div>
+  </li>
+</ul>"
+`;
diff --git a/packages/radix-vue/src/Tree/index.ts b/packages/radix-vue/src/Tree/index.ts
new file mode 100644
index 000000000..c9be0db51
--- /dev/null
+++ b/packages/radix-vue/src/Tree/index.ts
@@ -0,0 +1,16 @@
+export {
+  default as TreeRoot,
+  type TreeRootProps,
+  type TreeRootEmits,
+  type FlattenedItem,
+} from './TreeRoot.vue'
+export {
+  default as TreeItem,
+  type TreeItemProps,
+  type SelectEvent as TreeItemSelectEvent,
+  type ToggleEvent as TreeItemToggleEvent,
+} from './TreeItem.vue'
+export {
+  default as TreeVirtualizer,
+  type TreeVirtualizerProps,
+} from './TreeVirtualizer.vue'
diff --git a/packages/radix-vue/src/Tree/story/TreeAsync.story.vue b/packages/radix-vue/src/Tree/story/TreeAsync.story.vue
new file mode 100644
index 000000000..6f0c232d1
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeAsync.story.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { TreeItemToggleEvent } from '..'
+import { TreeItem, TreeRoot } from '..'
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+
+interface TreeNode {
+  id: string
+  name: string
+  children?: TreeNode[]
+}
+
+const initialData = [
+  { id: '1', name: 'Node 1', children: [] },
+  { id: '2', name: 'Node 2', children: [
+    { id: '5', name: 'Child Node 5' },
+  ] },
+  { id: '3', name: 'Node 3', children: [] },
+  { id: '4', name: 'Plain Node' },
+]
+
+const treeData = ref(initialData)
+const loadingIds = ref<Set<string>>(new Set())
+
+function addChildrenToNode(tree: TreeNode[], targetId: string, newChildren: TreeNode[]): boolean {
+  for (const node of tree) {
+    if (node.id === targetId) {
+      node.children = node.children ? [...node.children, ...newChildren] : newChildren
+      return true
+    }
+    if (node.children && node.children.length > 0) {
+      const found = addChildrenToNode(node.children, targetId, newChildren)
+      if (found)
+        return true
+    }
+  }
+  return false
+}
+
+function fetchData(value: TreeNode) {
+  return new Promise<void>((resolve) => {
+    if ((value.children?.length ?? 0) > 0) {
+      return resolve()
+    }
+
+    setTimeout(() => {
+      addChildrenToNode(treeData.value, value.id, [
+        { id: `${value.id}-0`, name: `Child Node ${`${value.id}-0`}`, children: [] },
+        { id: `${value.id}-1`, name: 'Plain Node' },
+      ])
+      return resolve()
+    }, 1000)
+  })
+}
+
+async function fetchChildren(ev: TreeItemToggleEvent<TreeNode>) {
+  const value = ev.detail.value
+  if (!value?.children)
+    return
+
+  loadingIds.value.add(value.id)
+  await fetchData(value)
+  loadingIds.value.delete(value.id)
+}
+</script>
+
+<template>
+  <Story
+    title="Tree/Async"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant title="default">
+      <TreeRoot
+        v-slot="{ flattenItems }"
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
+        :items="treeData"
+        :get-key="(item) => `${item.id}`"
+      >
+        <TreeItem
+          v-for="item in flattenItems"
+          :key="item._id"
+          v-slot="{ isExpanded }"
+          :style="{ 'margin-left': `${item.level - 1}rem` }"
+          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4 transition rotate-0"
+          v-bind="item.bind"
+          @toggle="fetchChildren"
+        >
+          <Icon
+            v-if="loadingIds.has(item.value.id)"
+            icon="radix-icons:reload"
+            class="h-4 w-4 mr-2 animate-spin"
+          />
+          <Icon
+            v-else-if="item.hasChildren"
+            icon="radix-icons:chevron-down"
+            class="h-4 w-4 mr-2"
+            :class="{ '-rotate-90': isExpanded }"
+          />
+          <div> {{ item.value.name }} </div>
+        </TreeItem>
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/TreeBasic.story.vue b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
new file mode 100644
index 000000000..ffbb7e089
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeBasic.story.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot } from '../'
+import { Icon } from '@iconify/vue'
+import { items } from './constants'
+</script>
+
+<template>
+  <Story
+    title="Tree/Basic"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant title="default">
+      <TreeRoot
+        v-slot="{ flattenItems }"
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
+        :items="items"
+        :get-key="(item) => item.title"
+      >
+        <TreeItem
+          v-for="item in flattenItems"
+          :key="item._id"
+          v-bind="item.bind"
+          :style="{ 'margin-left': `${item.level - 1}rem` }"
+          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
+        >
+          <Icon
+            v-if="item.hasChildren"
+            icon="radix-icons:chevron-down"
+            class="h-4 w-4 mr-2"
+          />
+          <div>
+            {{ item.value.title }}
+          </div>
+        </TreeItem>
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue b/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
new file mode 100644
index 000000000..8c1d0640e
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeCheckbox.story.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot } from '..'
+import { Icon } from '@iconify/vue'
+import { items } from './constants'
+</script>
+
+<template>
+  <Story
+    title="Tree/Checkbox"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant title="default">
+      <TreeRoot
+        v-slot="{ flattenItems }"
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
+        :items="items"
+        :get-key="(item) => item.title"
+        multiple
+        propagate-select
+      >
+        <TreeItem
+          v-for="item in flattenItems"
+          :key="item._id"
+          v-slot="{ handleSelect, isSelected }"
+          v-bind="item.bind"
+          :style="{ 'margin-left': `${item.level - 1}rem` }"
+          class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
+          @select="(event) => {
+            if (event.detail.originalEvent.type === 'click')
+              event.preventDefault()
+          }"
+        >
+          <Icon
+            v-if="item.hasChildren"
+            icon="radix-icons:chevron-down"
+            class="h-4 w-4"
+          />
+          <input
+            :checked="isSelected"
+            type="checkbox"
+            tabindex="-1"
+            @click.stop
+            @change="handleSelect"
+          >
+          <div class="pl-2">
+            {{ item.value.title }}
+          </div>
+        </TreeItem>
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/TreeNested.story.vue b/packages/radix-vue/src/Tree/story/TreeNested.story.vue
new file mode 100644
index 000000000..99fdb9f8d
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeNested.story.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot } from '..'
+import { Icon } from '@iconify/vue'
+import { items } from './constants'
+import Tree from './_TreeNested.vue'
+</script>
+
+<template>
+  <Story
+    title="Tree/Nested"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant title="default">
+      <TreeRoot
+        class="list-none select-none w-64 bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
+        :items="items"
+        :get-key="(item) => item.title"
+      >
+        <Tree :tree-items="items" />
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
new file mode 100644
index 000000000..bab13e49b
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/TreeVirtual.story.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { TreeItem, TreeRoot, TreeVirtualizer } from '..'
+import { Icon } from '@iconify/vue'
+import { countryList } from '@/shared/constant'
+
+function groupCountriesByFirstLetter(countries: string[]) {
+  const grouped = countries.reduce((acc, country) => {
+    const firstLetter = country[0].toUpperCase()
+    if (!acc[firstLetter])
+      acc[firstLetter] = { title: firstLetter, children: [] }
+
+    acc[firstLetter].children.push({ title: country })
+    return acc
+  }, {} as { [key: string]: { title: string, children: { title: string }[] } })
+
+  return Object.values(grouped)
+}
+
+const items = groupCountriesByFirstLetter(countryList)
+</script>
+
+<template>
+  <Story
+    title="Tree/Virtual"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant title="default">
+      <TreeRoot
+        :items="items"
+        :get-key="(item) => item.title"
+        multiple
+        selection-behavior="replace"
+        propagate-select
+        class="list-none select-none w-64 h-80 overflow-y-auto bg-white text-blackA11 rounded-lg p-2 text-sm font-medium"
+      >
+        <TreeVirtualizer
+          v-slot="{ item }"
+          :text-content="(item) => item.title"
+        >
+          <TreeItem
+            class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
+            :style="{ 'margin-left': `${item.level - 1}rem` }"
+            v-bind="item.bind"
+          >
+            <Icon
+              v-if="item.hasChildren"
+              icon="radix-icons:chevron-down"
+              class="h-4 w-4"
+            />
+            <div class="pl-2">
+              {{ item.value.title }}
+            </div>
+          </TreeItem>
+        </TreeVirtualizer>
+      </TreeRoot>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/_Tree.vue b/packages/radix-vue/src/Tree/story/_Tree.vue
new file mode 100644
index 000000000..c26f0f780
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/_Tree.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from '@/shared'
+import { TreeItem, TreeRoot, type TreeRootEmits, type TreeRootProps } from '..'
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+
+const props = defineProps<Omit<TreeRootProps, 'items' | 'getKey'>>()
+const emits = defineEmits<TreeRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+
+const items = [
+  { title: 'index.vue', icon: 'vue' },
+  {
+    title: 'lib',
+    icon: 'folder',
+    children: [
+      {
+        title: 'tree',
+        icon: 'folder',
+        children: [
+          {
+            title: 'Tree.vue',
+            icon: 'vue',
+          },
+          {
+            title: 'TreeView.vue',
+            icon: 'vue',
+          },
+        ],
+      },
+      {
+        title: 'icons',
+        icon: 'folder',
+        children: [
+          { title: 'JS.vue', icon: 'vue' },
+          { title: 'vue.vue', icon: 'vue' },
+        ],
+      },
+      {
+        title: 'index.js',
+        icon: 'js',
+      },
+    ],
+  },
+  {
+    title: 'routes',
+    icon: 'folder',
+    children: [
+      {
+        title: 'contents',
+        icon: 'folder',
+        children: [
+          {
+            title: '+layout.vue',
+            icon: 'vue',
+          },
+          {
+            title: '+page.vue',
+            icon: 'vue',
+          },
+        ],
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <TreeRoot
+    v-slot="{ flattenItems }"
+    v-bind="forwarded"
+    class="list-none select-none w-64 bg-white text-blackA11 rounded-md p-2 text-sm font-medium"
+    :items="items"
+    :get-key="(item) => item.title"
+  >
+    <TreeItem
+      v-for="item in flattenItems"
+      :key="item._id"
+      class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
+      :style="{ 'margin-left': `${item.level}rem` }"
+      v-bind="item.bind"
+    >
+      <Icon
+        v-if="item.hasChildren"
+        icon="radix-icons:chevron-down"
+        class="h-4 w-4"
+      />
+      <div class="pl-2">
+        {{ item.value.title }}
+      </div>
+    </TreeItem>
+  </TreeRoot>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/_TreeNested.vue b/packages/radix-vue/src/Tree/story/_TreeNested.vue
new file mode 100644
index 000000000..30b902078
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/_TreeNested.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { TreeItem } from '../'
+// eslint-disable-next-line import/no-self-import
+import Tree from './_TreeNested.vue'
+
+interface TreeNode {
+  title: string
+  icon: string
+  children?: TreeNode[]
+}
+
+withDefaults(defineProps<{
+  treeItems: TreeNode[]
+  level?: number
+}>(), {
+  level: 0,
+})
+</script>
+
+<template>
+  <li
+    v-for=" tree in treeItems"
+    :key="tree.title"
+  >
+    <TreeItem
+      v-slot="{ isExpanded }"
+      as-child
+      :level="level"
+      :value="tree"
+      :style="{ 'margin-left': `${level}rem` }"
+    >
+      <button class="flex items-center outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4 rounded py-1 px-2 my-0.5 w-max">
+        <Icon
+          v-if="tree.children"
+          icon="radix-icons:chevron-down"
+          class="h-4 w-4 mr-2"
+        />
+        <span>
+          {{ tree.title }}
+        </span>
+      </button>
+
+      <ul v-if="isExpanded">
+        <template v-if="tree.children">
+          <Tree
+            :tree-items="tree.children"
+            :level="level + 1"
+          />
+        </template>
+      </ul>
+    </TreeItem>
+  </li>
+</template>
diff --git a/packages/radix-vue/src/Tree/story/constants.ts b/packages/radix-vue/src/Tree/story/constants.ts
new file mode 100644
index 000000000..30a95a7ce
--- /dev/null
+++ b/packages/radix-vue/src/Tree/story/constants.ts
@@ -0,0 +1,26 @@
+export const items = [
+  {
+    title: 'composables',
+    icon: 'lucide:folder',
+    children: [
+      { title: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
+      { title: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' },
+    ],
+  },
+  {
+    title: 'components',
+    icon: 'lucide:folder',
+    children: [
+      {
+        title: 'Home',
+        icon: 'lucide:folder',
+        children: [
+          { title: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
+          { title: 'Button.vue', icon: 'vscode-icons:file-type-vue' },
+        ],
+      },
+    ],
+  },
+  { title: 'app.vue', icon: 'vscode-icons:file-type-vue' },
+  { title: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' },
+]
diff --git a/packages/radix-vue/src/Tree/utils.ts b/packages/radix-vue/src/Tree/utils.ts
new file mode 100644
index 000000000..bf1a7ba14
--- /dev/null
+++ b/packages/radix-vue/src/Tree/utils.ts
@@ -0,0 +1,12 @@
+export function flatten<U, T extends { children: any[] } >(items: T[]): U[] {
+  return items.reduce((acc: any[], item: T) => {
+    acc.push(item)
+
+    if (item.children)
+      acc.push(...flatten(item.children))
+
+    return acc
+  }, [])
+}
+
+// TODO: expose more utility function to handle flattened item
diff --git a/packages/radix-vue/src/index.ts b/packages/radix-vue/src/index.ts
index fa409f1d0..c9c33e6c2 100644
--- a/packages/radix-vue/src/index.ts
+++ b/packages/radix-vue/src/index.ts
@@ -40,6 +40,7 @@ export * from './Toggle'
 export * from './ToggleGroup'
 export * from './Toolbar'
 export * from './Tooltip'
+export * from './Tree'
 export * from './Viewport'
 
 // utilities
diff --git a/packages/radix-vue/src/shared/arrays.ts b/packages/radix-vue/src/shared/arrays.ts
index 72de00372..48109d5d1 100644
--- a/packages/radix-vue/src/shared/arrays.ts
+++ b/packages/radix-vue/src/shared/arrays.ts
@@ -1,3 +1,5 @@
+import isEqual from 'fast-deep-equal'
+
 /**
  * The function `areEqual` compares two arrays and returns true if they are equal in length and have
  * the same elements at corresponding indexes.
@@ -37,3 +39,28 @@ export function chunk<T>(arr: T[], size: number): T[][] {
 
   return result
 }
+
+/**
+ * The function `findValuesBetween` takes an array and two values, then returns a subarray containing
+ * elements between the first occurrence of the start value and the first occurrence of the end value
+ * in the array.
+ * @param {T[]} array - The `array` parameter is an array of values of type `T`.
+ * @param {T} start - The `start` parameter is the value that marks the beginning of the range you want
+ * to find in the array.
+ * @param {T} end - The `end` parameter in the `findValuesBetween` function represents the end value
+ * that you want to find in the array. This function will return a subarray of values that are between
+ * the `start` and `end` values in the original array.
+ * @returns The `findValuesBetween` function returns an array of values from the input array that are
+ * between the `start` and `end` values (inclusive). If either the `start` or `end` values are not
+ * found in the input array, an empty array is returned.
+ */
+export function findValuesBetween<T>(array: T[], start: T, end: T) {
+  const startIndex = array.findIndex(i => isEqual(i, start))
+  const endIndex = array.findIndex(i => isEqual(i, end))
+  if (startIndex === -1 || endIndex === -1)
+    return []
+
+  const [minIndex, maxIndex] = [startIndex, endIndex].sort((a, b) => a - b)
+
+  return array.slice(minIndex, maxIndex + 1)
+}
diff --git a/packages/radix-vue/src/Listbox/story/constants.ts b/packages/radix-vue/src/shared/constant/countryList.ts
similarity index 100%
rename from packages/radix-vue/src/Listbox/story/constants.ts
rename to packages/radix-vue/src/shared/constant/countryList.ts
diff --git a/packages/radix-vue/src/shared/constant/index.ts b/packages/radix-vue/src/shared/constant/index.ts
new file mode 100644
index 000000000..39c9505b5
--- /dev/null
+++ b/packages/radix-vue/src/shared/constant/index.ts
@@ -0,0 +1 @@
+export * from './countryList'
diff --git a/packages/radix-vue/src/shared/index.ts b/packages/radix-vue/src/shared/index.ts
index c17f37df9..a7dc5936e 100644
--- a/packages/radix-vue/src/shared/index.ts
+++ b/packages/radix-vue/src/shared/index.ts
@@ -25,6 +25,7 @@ export { useForwardRef } from './useForwardRef'
 export { useGraceArea } from './useGraceArea'
 export { useHideOthers } from './useHideOthers'
 export { useId } from './useId'
+export { useSelectionBehavior } from './useSelectionBehavior'
 export { useSize } from './useSize'
 export { useStateMachine } from './useStateMachine'
 export { useTypeahead } from './useTypeahead'
diff --git a/packages/radix-vue/src/shared/useSelectionBehavior.ts b/packages/radix-vue/src/shared/useSelectionBehavior.ts
new file mode 100644
index 000000000..0c064296a
--- /dev/null
+++ b/packages/radix-vue/src/shared/useSelectionBehavior.ts
@@ -0,0 +1,74 @@
+import { type Ref, type UnwrapNestedRefs, ref } from 'vue'
+import { findValuesBetween } from './arrays'
+
+export function useSelectionBehavior<T>(
+  modelValue: Ref<T | T[]>,
+  props: UnwrapNestedRefs<{ multiple?: boolean, selectionBehavior?: 'toggle' | 'replace' }>,
+) {
+  const firstValue = ref()
+
+  const onSelectItem = (val: T, condition: (existingValue: T) => boolean) => {
+    // multiple select
+    if (props.multiple && Array.isArray(modelValue.value)) {
+      if (props.selectionBehavior === 'replace') {
+        modelValue.value = [val]
+        firstValue.value = val
+      }
+      else {
+        const index = modelValue.value.findIndex(v => condition(v))
+        if (index !== -1)
+          modelValue.value.splice(index, 1)
+        else
+          modelValue.value.push(val)
+      }
+    }
+    // single select
+    else {
+      if (props.selectionBehavior === 'replace') {
+        modelValue.value = { ...val }
+      }
+      else {
+        if (!Array.isArray(modelValue.value) && condition(modelValue.value))
+          modelValue.value = undefined as any
+        else
+          modelValue.value = { ...val }
+      }
+    }
+    return modelValue.value
+  }
+
+  function handleMultipleReplace(intent: 'first' | 'last' | 'prev' | 'next', currentElement: HTMLElement | Element | null, getItems: () => { ref: HTMLElement, value?: any }[], options: any[]) {
+    if (!firstValue?.value || !props.multiple || !Array.isArray(modelValue.value))
+      return
+
+    const collection = getItems().filter(i => i.ref.dataset.disabled !== '')
+    const lastValue = collection.find(i => i.ref === currentElement)?.value
+    if (!lastValue)
+      return
+
+    let value: T[] | null = null
+    switch (intent) {
+      case 'prev':
+      case 'next': {
+        value = findValuesBetween(options, firstValue.value, lastValue)
+        break
+      }
+      case 'first': {
+        value = findValuesBetween(options, firstValue.value, options?.[0])
+        break
+      }
+      case 'last': {
+        value = findValuesBetween(options, firstValue.value, options?.[options.length - 1])
+        break
+      }
+    }
+
+    modelValue.value = value
+  }
+
+  return {
+    firstValue,
+    onSelectItem,
+    handleMultipleReplace,
+  }
+}