From 809e1c7bd34269c41b78499befd029e14a997942 Mon Sep 17 00:00:00 2001
From: Artem Melnyk <melkam464@gmail.com>
Date: Sun, 15 Oct 2023 13:29:10 +0200
Subject: [PATCH] refactor: use createContext composable in many other
 components

---
 .../src/Accordion/AccordionContent.vue        | 23 +++---
 .../src/Accordion/AccordionHeader.vue         | 15 ++--
 .../radix-vue/src/Accordion/AccordionItem.vue | 40 +++++-----
 .../radix-vue/src/Accordion/AccordionRoot.vue | 15 ++--
 .../src/Accordion/AccordionTrigger.vue        | 31 ++++----
 .../src/AlertDialog/AlertDialogCancel.vue     |  8 +-
 .../src/AlertDialog/AlertDialogContent.vue    | 13 ++--
 .../radix-vue/src/Avatar/AvatarFallback.vue   | 10 +--
 packages/radix-vue/src/Avatar/AvatarImage.vue |  8 +-
 packages/radix-vue/src/Avatar/AvatarRoot.vue  | 19 +++--
 .../src/Checkbox/CheckboxIndicator.vue        | 13 ++--
 .../radix-vue/src/Checkbox/CheckboxRoot.vue   | 25 +++++--
 .../src/Collapsible/CollapsibleContent.vue    | 16 ++--
 .../src/Collapsible/CollapsibleRoot.vue       | 13 ++--
 .../src/Collapsible/CollapsibleTrigger.vue    | 17 ++---
 .../src/ContextMenu/ContextMenuContent.vue    |  8 +-
 .../src/ContextMenu/ContextMenuRoot.vue       | 13 ++--
 .../src/ContextMenu/ContextMenuTrigger.vue    | 10 +--
 packages/radix-vue/src/ContextMenu/utils.ts   |  9 ---
 packages/radix-vue/src/Dialog/DialogClose.vue |  7 +-
 .../radix-vue/src/Dialog/DialogContent.vue    |  9 +--
 .../src/Dialog/DialogContentImpl.vue          | 15 ++--
 .../src/Dialog/DialogContentModal.vue         |  9 +--
 .../src/Dialog/DialogContentNonModal.vue      | 10 +--
 .../src/Dialog/DialogDescription.vue          |  7 +-
 .../radix-vue/src/Dialog/DialogOverlay.vue    | 14 ++--
 packages/radix-vue/src/Dialog/DialogRoot.vue  | 17 +++--
 packages/radix-vue/src/Dialog/DialogTitle.vue |  7 +-
 .../radix-vue/src/Dialog/DialogTrigger.vue    | 16 ++--
 .../src/HoverCard/HoverCardContent.vue        | 11 ++-
 .../src/HoverCard/HoverCardContentImpl.vue    | 22 +++---
 .../radix-vue/src/HoverCard/HoverCardRoot.vue | 15 ++--
 .../src/HoverCard/HoverCardTrigger.vue        | 15 ++--
 .../radix-vue/src/Menu/MenuCheckboxItem.vue   |  7 +-
 packages/radix-vue/src/Menu/MenuContent.vue   | 11 ++-
 .../radix-vue/src/Menu/MenuContentImpl.vue    | 51 +++++++------
 packages/radix-vue/src/Menu/MenuItem.vue      | 14 ++--
 packages/radix-vue/src/Menu/MenuItemImpl.vue  | 12 +--
 .../radix-vue/src/Menu/MenuItemIndicator.vue  | 20 +++--
 .../radix-vue/src/Menu/MenuRadioGroup.vue     | 16 ++--
 packages/radix-vue/src/Menu/MenuRadioItem.vue | 16 ++--
 packages/radix-vue/src/Menu/MenuRoot.vue      | 20 ++---
 .../src/Menu/MenuRootContentModal.vue         | 11 ++-
 .../src/Menu/MenuRootContentNonModal.vue      |  7 +-
 packages/radix-vue/src/Menu/MenuSub.vue       | 22 +++---
 .../radix-vue/src/Menu/MenuSubContent.vue     | 33 ++++----
 .../radix-vue/src/Menu/MenuSubTrigger.vue     | 58 +++++++-------
 .../radix-vue/src/Menubar/MenubarContent.vue  | 30 ++++----
 .../radix-vue/src/Menubar/MenubarMenu.vue     | 26 +++----
 .../radix-vue/src/Menubar/MenubarRoot.vue     | 16 ++--
 .../src/Menubar/MenubarSubContent.vue         | 15 ++--
 .../radix-vue/src/Menubar/MenubarTrigger.vue  | 34 ++++-----
 .../src/Pagination/PaginationFirst.vue        |  9 +--
 .../src/Pagination/PaginationLast.vue         |  9 +--
 .../src/Pagination/PaginationList.vue         |  8 +-
 .../src/Pagination/PaginationListItem.vue     | 12 +--
 .../src/Pagination/PaginationNext.vue         |  9 +--
 .../src/Pagination/PaginationPrev.vue         |  9 +--
 .../src/Pagination/PaginationRoot.vue         | 11 ++-
 .../radix-vue/src/Popover/PopoverAnchor.vue   | 10 +--
 .../radix-vue/src/Popover/PopoverClose.vue    |  8 +-
 .../radix-vue/src/Popover/PopoverContent.vue  |  9 +--
 .../src/Popover/PopoverContentImpl.vue        | 11 ++-
 .../src/Popover/PopoverContentModal.vue       | 10 +--
 .../src/Popover/PopoverContentNonModal.vue    | 10 +--
 .../radix-vue/src/Popover/PopoverRoot.vue     | 16 ++--
 .../radix-vue/src/Popover/PopoverTrigger.vue  | 18 ++---
 .../radix-vue/src/Popper/PopperAnchor.vue     |  8 +-
 packages/radix-vue/src/Popper/PopperArrow.vue | 32 ++++----
 .../radix-vue/src/Popper/PopperContent.vue    | 38 +++++-----
 packages/radix-vue/src/Popper/PopperRoot.vue  | 16 ++--
 .../src/Progress/ProgressIndicator.vue        | 11 ++-
 .../radix-vue/src/Progress/ProgressRoot.vue   | 15 ++--
 packages/radix-vue/src/RadioGroup/Radio.vue   |  9 +--
 .../src/RadioGroup/RadioGroupIndicator.vue    | 11 ++-
 .../src/RadioGroup/RadioGroupItem.vue         | 23 +++---
 .../src/RadioGroup/RadioGroupRoot.vue         | 15 ++--
 .../src/RovingFocus/RovingFocusGroup.vue      | 13 ++--
 .../src/RovingFocus/RovingFocusItem.vue       | 28 ++++---
 .../src/ScrollArea/ScrollAreaCorner.vue       | 10 +--
 .../src/ScrollArea/ScrollAreaCornerImpl.vue   | 26 +++----
 .../src/ScrollArea/ScrollAreaRoot.vue         | 75 ++++++++-----------
 .../src/ScrollArea/ScrollAreaScrollbar.vue    | 32 ++++----
 .../ScrollArea/ScrollAreaScrollbarAuto.vue    | 26 +++----
 .../ScrollArea/ScrollAreaScrollbarHover.vue   | 12 +--
 .../ScrollArea/ScrollAreaScrollbarImpl.vue    | 47 ++++++------
 .../ScrollArea/ScrollAreaScrollbarScroll.vue  | 16 ++--
 .../ScrollArea/ScrollAreaScrollbarVisible.vue | 70 ++++++++---------
 .../src/ScrollArea/ScrollAreaScrollbarX.vue   | 23 +++---
 .../src/ScrollArea/ScrollAreaScrollbarY.vue   | 23 +++---
 .../src/ScrollArea/ScrollAreaThumb.vue        | 33 ++++----
 .../src/ScrollArea/ScrollAreaViewport.vue     | 14 ++--
 packages/radix-vue/src/Select/SelectArrow.vue | 11 ++-
 .../radix-vue/src/Select/SelectContent.vue    | 10 +--
 .../src/Select/SelectContentImpl.vue          | 55 +++++++-------
 packages/radix-vue/src/Select/SelectGroup.vue | 15 ++--
 packages/radix-vue/src/Select/SelectItem.vue  | 36 +++++----
 .../src/Select/SelectItemAlignedPosition.vue  | 48 +++++++-----
 .../src/Select/SelectItemIndicator.vue        |  7 +-
 .../radix-vue/src/Select/SelectItemText.vue   | 37 +++++----
 packages/radix-vue/src/Select/SelectLabel.vue |  7 +-
 .../radix-vue/src/Select/SelectProvider.vue   |  8 +-
 packages/radix-vue/src/Select/SelectRoot.vue  | 34 ++++-----
 .../src/Select/SelectScrollButtonImpl.vue     |  8 +-
 .../src/Select/SelectScrollDownButton.vue     | 22 +++---
 .../src/Select/SelectScrollUpButton.vue       | 22 +++---
 .../radix-vue/src/Select/SelectTrigger.vue    | 27 ++++---
 packages/radix-vue/src/Select/SelectValue.vue | 12 +--
 .../radix-vue/src/Select/SelectViewport.vue   | 24 ++----
 .../radix-vue/src/Slider/SliderHorizontal.vue |  6 +-
 packages/radix-vue/src/Slider/SliderImpl.vue  |  7 +-
 packages/radix-vue/src/Slider/SliderRange.vue | 20 ++---
 packages/radix-vue/src/Slider/SliderRoot.vue  | 22 +++---
 .../radix-vue/src/Slider/SliderThumbImpl.vue  | 36 ++++-----
 packages/radix-vue/src/Slider/SliderTrack.vue |  9 +--
 .../radix-vue/src/Slider/SliderVertical.vue   |  6 +-
 packages/radix-vue/src/Slider/utils.ts        |  5 +-
 packages/radix-vue/src/Switch/SwitchRoot.vue  | 15 ++--
 packages/radix-vue/src/Switch/SwitchThumb.vue | 10 +--
 packages/radix-vue/src/Tabs/TabsContent.vue   | 14 ++--
 packages/radix-vue/src/Tabs/TabsList.vue      | 10 +--
 packages/radix-vue/src/Tabs/TabsRoot.vue      | 29 +++----
 packages/radix-vue/src/Tabs/TabsTrigger.vue   | 22 +++---
 packages/radix-vue/src/Toggle/ToggleRoot.vue  | 10 +--
 .../src/ToggleGroup/ToggleGroupItem.vue       | 20 ++---
 .../src/ToggleGroup/ToggleGroupRoot.vue       | 15 ++--
 .../radix-vue/src/Toolbar/ToolbarRoot.vue     | 15 ++--
 .../src/Toolbar/ToolbarSeparator.vue          |  7 +-
 .../src/Toolbar/ToolbarToggleGroup.vue        |  9 +--
 .../radix-vue/src/Tooltip/TooltipContent.vue  |  8 +-
 .../src/Tooltip/TooltipContentHoverable.vue   |  4 +-
 .../src/Tooltip/TooltipContentImpl.vue        | 16 ++--
 .../radix-vue/src/Tooltip/TooltipProvider.vue |  4 +-
 .../radix-vue/src/Tooltip/TooltipRoot.vue     |  6 +-
 .../radix-vue/src/Tooltip/TooltipTrigger.vue  | 20 ++---
 .../radix-vue/src/shared/createContext.ts     | 45 ++++++++---
 pnpm-lock.yaml                                |  1 -
 137 files changed, 1202 insertions(+), 1256 deletions(-)

diff --git a/packages/radix-vue/src/Accordion/AccordionContent.vue b/packages/radix-vue/src/Accordion/AccordionContent.vue
index 467d3e142..556ed4e12 100644
--- a/packages/radix-vue/src/Accordion/AccordionContent.vue
+++ b/packages/radix-vue/src/Accordion/AccordionContent.vue
@@ -1,29 +1,28 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import { CollapsibleContent } from '../Collapsible'
-import { ACCORDION_ITEM_INJECTION_KEY } from './AccordionItem.vue'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionItemContext } from './AccordionItem.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
 import type { PrimitiveProps } from '@/Primitive'
 
 export interface AccordionContentProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionContentProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
-const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
+const itemContext = injectAccordionItemContext()
 </script>
 
 <template>
   <CollapsibleContent
-    :id="injectedItem?.triggerId"
+    :id="itemContext.triggerId"
     role="region"
-    :open="injectedItem?.open.value"
-    :hidden="!injectedItem?.open.value"
+    :open="itemContext.open.value"
+    :hidden="!itemContext.open.value"
     :as-child="props.asChild"
-    :aria-labelledby="injectedItem?.triggerId"
-    :data-state="injectedItem?.dataState.value"
-    :data-disabled="injectedItem?.dataDisabled.value"
-    :data-orientation="injectedRoot?.orientation"
+    :aria-labelledby="itemContext.triggerId"
+    :data-state="itemContext.dataState.value"
+    :data-disabled="itemContext.dataDisabled.value"
+    :data-orientation="rootContext.orientation"
     style="
       --radix-accordion-content-width: var(--radix-collapsible-content-width);
       --radix-accordion-content-height: var(--radix-collapsible-content-height);
diff --git a/packages/radix-vue/src/Accordion/AccordionHeader.vue b/packages/radix-vue/src/Accordion/AccordionHeader.vue
index e9c5f6044..af02408f2 100644
--- a/packages/radix-vue/src/Accordion/AccordionHeader.vue
+++ b/packages/radix-vue/src/Accordion/AccordionHeader.vue
@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { ACCORDION_ITEM_INJECTION_KEY } from './AccordionItem.vue'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionItemContext } from './AccordionItem.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface AccordionHeaderProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionHeaderProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
-const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
+const itemContext = injectAccordionItemContext()
 </script>
 
 <template>
   <Primitive
     :as="props.as || 'h3'"
     :as-child="props.asChild"
-    :data-orientation="injectedRoot?.orientation"
-    :data-state="injectedItem?.dataState.value"
-    :data-disabled="injectedItem?.dataDisabled.value"
+    :data-orientation="rootContext.orientation"
+    :data-state="itemContext.dataState.value"
+    :data-disabled="itemContext.dataDisabled.value"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Accordion/AccordionItem.vue b/packages/radix-vue/src/Accordion/AccordionItem.vue
index f6a0b07db..ec7d16272 100644
--- a/packages/radix-vue/src/Accordion/AccordionItem.vue
+++ b/packages/radix-vue/src/Accordion/AccordionItem.vue
@@ -1,7 +1,8 @@
 <script lang="ts" context="module">
-import type { ComputedRef, InjectionKey, VNodeRef } from 'vue'
+import type { ComputedRef, VNodeRef } from 'vue'
 import type { CollapsibleRootProps } from '../Collapsible'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
+import { createContext, useArrowNavigation, useId } from '@/shared'
 
 enum AccordionItemState {
   Open = 'open',
@@ -23,7 +24,7 @@ export interface AccordionItemProps
   value: string
 }
 
-interface AccordionItemProvideValue {
+interface AccordionItemContext {
   open: ComputedRef<boolean>
   dataState: ComputedRef<AccordionItemState>
   disabled: ComputedRef<boolean>
@@ -34,32 +35,31 @@ interface AccordionItemProvideValue {
   value: ComputedRef<string>
 }
 
-export const ACCORDION_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<AccordionItemProvideValue>
+export const [injectAccordionItemContext, provideAccordionItemContext]
+  = createContext<AccordionItemContext>('AccordionItem')
 </script>
 
 <script setup lang="ts">
 import { CollapsibleRoot } from '@/Collapsible'
 import { usePrimitiveElement } from '@/Primitive'
-import { useArrowNavigation, useId } from '@/shared'
-import { computed, inject, provide } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps<AccordionItemProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
 
 const open = computed(() =>
-  injectedRoot?.isSingle.value
-    ? props.value === injectedRoot.modelValue.value
-    : Array.isArray(injectedRoot?.modelValue.value)
-      && !!injectedRoot?.modelValue.value.includes(props.value),
+  rootContext.isSingle.value
+    ? props.value === rootContext.modelValue.value
+    : Array.isArray(rootContext.modelValue.value)
+      && rootContext.modelValue.value.includes(props.value),
 )
 
 const disabled = computed(() => {
   return (
-    injectedRoot?.disabled
+    rootContext.disabled
     || props.disabled
-    || (!!injectedRoot?.isSingle.value && open.value && !injectedRoot?.collapsible)
+    || (rootContext.isSingle.value && open.value && !rootContext.collapsible)
   )
 })
 
@@ -71,7 +71,7 @@ const dataState = computed(() =>
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-provide(ACCORDION_ITEM_INJECTION_KEY, {
+provideAccordionItemContext({
   open,
   dataState,
   disabled,
@@ -85,11 +85,11 @@ provide(ACCORDION_ITEM_INJECTION_KEY, {
 function handleArrowKey(e: KeyboardEvent) {
   useArrowNavigation(
     e,
-    currentElement.value!,
-    injectedRoot?.parentElement.value!,
+    currentElement.value,
+    rootContext.parentElement.value!,
     {
-      arrowKeyOptions: injectedRoot?.orientation,
-      dir: injectedRoot?.direction,
+      arrowKeyOptions: rootContext.orientation,
+      dir: rootContext.direction,
       focus: true,
     },
   )
@@ -100,7 +100,7 @@ defineExpose({ open })
 
 <template>
   <CollapsibleRoot
-    :data-orientation="injectedRoot?.orientation"
+    :data-orientation="rootContext.orientation"
     :data-disabled="dataDisabled"
     :data-state="dataState"
     :disabled="disabled"
diff --git a/packages/radix-vue/src/Accordion/AccordionRoot.vue b/packages/radix-vue/src/Accordion/AccordionRoot.vue
index b0a0f434a..93529784b 100644
--- a/packages/radix-vue/src/Accordion/AccordionRoot.vue
+++ b/packages/radix-vue/src/Accordion/AccordionRoot.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import type { DataOrientation, Direction, Type } from '@/shared/types'
+import { createContext } from '@/shared'
 
 export interface AccordionRootProps extends PrimitiveProps {
   /**
@@ -53,10 +54,7 @@ export type AccordionRootEmits = {
   'update:modelValue': [value: string | string[] | undefined]
 }
 
-export const ACCORDION_INJECTION_KEY
-  = Symbol() as InjectionKey<AccordionProvideValue>
-
-export interface AccordionProvideValue {
+export type AccordionRootContext = {
   disabled?: AccordionRootProps['disabled']
   direction: AccordionRootProps['dir']
   orientation: AccordionRootProps['orientation']
@@ -66,6 +64,9 @@ export interface AccordionProvideValue {
   modelValue: Ref<string | undefined | string[]>
   collapsible: boolean
 }
+
+export const [injectAccordionRootContext, provideAccordionRootContext]
+  = createContext<AccordionRootContext>('AccordionRoot')
 </script>
 
 <script setup lang="ts">
@@ -75,7 +76,7 @@ import {
   usePrimitiveElement,
 } from '@/Primitive'
 import { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'
-import { computed, provide } from 'vue'
+import { computed } from 'vue'
 
 const props = withDefaults(defineProps<AccordionRootProps>(), {
   asChild: false,
@@ -92,7 +93,7 @@ const { modelValue, changeModelValue } = useSingleOrMultipleValue(props, emits)
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 
-provide<AccordionProvideValue>(ACCORDION_INJECTION_KEY, {
+provideAccordionRootContext({
   disabled: props.disabled,
   direction: props.dir,
   orientation: props.orientation,
diff --git a/packages/radix-vue/src/Accordion/AccordionTrigger.vue b/packages/radix-vue/src/Accordion/AccordionTrigger.vue
index 17f21fcb4..2b0aedbf7 100644
--- a/packages/radix-vue/src/Accordion/AccordionTrigger.vue
+++ b/packages/radix-vue/src/Accordion/AccordionTrigger.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { ACCORDION_ITEM_INJECTION_KEY } from './AccordionItem.vue'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionItemContext } from './AccordionItem.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
 import { type PrimitiveProps } from '@/Primitive'
 import { CollapsibleTrigger } from '@/Collapsible'
 
@@ -9,30 +8,30 @@ export interface AccordionTriggerProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionTriggerProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
-const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
+const itemContext = injectAccordionItemContext()
 
 function changeItem() {
-  if (injectedItem?.disabled.value)
+  if (itemContext.disabled.value)
     return
-  injectedItem && injectedRoot?.changeModelValue(injectedItem.value.value)
+  rootContext.changeModelValue(itemContext.value.value)
 }
 </script>
 
 <template>
   <CollapsibleTrigger
-    :id="injectedItem?.triggerId"
-    :ref="injectedItem?.primitiveElement"
+    :id="itemContext.triggerId"
+    :ref="itemContext.primitiveElement"
     data-radix-vue-collection-item
     :as="props.as"
     :as-child="props.asChild"
-    :aria-controls="injectedItem?.triggerId"
-    :aria-disabled="injectedItem?.disabled.value || undefined"
-    :aria-expanded="injectedItem?.open.value || false"
-    :data-disabled="injectedItem?.dataDisabled.value"
-    :data-orientation="injectedRoot?.orientation"
-    :data-state="injectedItem?.dataState.value"
-    :disabled="injectedItem?.disabled?.value"
+    :aria-controls="itemContext.triggerId"
+    :aria-disabled="itemContext.disabled.value || undefined"
+    :aria-expanded="itemContext.open.value || false"
+    :data-disabled="itemContext.dataDisabled.value"
+    :data-orientation="rootContext.orientation"
+    :data-state="itemContext.dataState.value"
+    :disabled="itemContext.disabled.value"
     @click="changeItem"
   >
     <slot />
diff --git a/packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue b/packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue
index e132ec97b..104e43aeb 100644
--- a/packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue
+++ b/packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { ALERT_DIALOG_CONTENT_INJECTION_KEY } from './AlertDialogContent.vue'
+import { onMounted } from 'vue'
+import { injectAlertDialogContentContext } from './AlertDialogContent.vue'
 import { DialogClose, type DialogCloseProps } from '@/Dialog'
 import { usePrimitiveElement } from '@/Primitive'
 
 export interface AlertDialogCancelProps extends DialogCloseProps {}
 
 const props = defineProps<AlertDialogCancelProps>()
-const contentContext = inject(ALERT_DIALOG_CONTENT_INJECTION_KEY)
+const contentContext = injectAlertDialogContentContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 onMounted(() => {
-  contentContext!.onCancelElementChange(currentElement.value)
+  contentContext.onCancelElementChange(currentElement.value)
 })
 </script>
 
diff --git a/packages/radix-vue/src/AlertDialog/AlertDialogContent.vue b/packages/radix-vue/src/AlertDialog/AlertDialogContent.vue
index 9d960e9eb..a6d0cc9fa 100644
--- a/packages/radix-vue/src/AlertDialog/AlertDialogContent.vue
+++ b/packages/radix-vue/src/AlertDialog/AlertDialogContent.vue
@@ -1,23 +1,24 @@
 <script lang="ts">
-interface AlertDialogContentContextValue {
+import { createContext, useEmitAsProps } from '@/shared'
+
+interface AlertDialogContentContext {
   onCancelElementChange(el: HTMLElement | undefined): void
 }
 
-export const ALERT_DIALOG_CONTENT_INJECTION_KEY
-  = Symbol() as InjectionKey<AlertDialogContentContextValue>
+export const [injectAlertDialogContentContext, provideAlertDialogContentContext]
+  = createContext<AlertDialogContentContext>('AlertDialogContent')
 
 export interface AlertDialogContentProps extends DialogContentProps {}
 export type AlertDialogContentEmits = DialogContentEmits
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, nextTick, provide, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import {
   DialogContent,
   type DialogContentEmits,
   type DialogContentProps,
 } from '@/Dialog'
-import { useEmitAsProps } from '@/shared'
 
 const props = defineProps<AlertDialogContentProps>()
 const emits = defineEmits<AlertDialogContentEmits>()
@@ -26,7 +27,7 @@ const emitsAsProps = useEmitAsProps(emits)
 
 const cancelElement = ref<HTMLElement | undefined>()
 
-provide(ALERT_DIALOG_CONTENT_INJECTION_KEY, {
+provideAlertDialogContentContext({
   onCancelElementChange: (el) => {
     cancelElement.value = el
   },
diff --git a/packages/radix-vue/src/Avatar/AvatarFallback.vue b/packages/radix-vue/src/Avatar/AvatarFallback.vue
index ec182f0ff..bbf1af205 100644
--- a/packages/radix-vue/src/Avatar/AvatarFallback.vue
+++ b/packages/radix-vue/src/Avatar/AvatarFallback.vue
@@ -5,21 +5,21 @@ export interface AvatarFallbackProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { Primitive, type PrimitiveProps } from '../Primitive'
-import { AVATAR_INJECTION_KEY } from './AvatarRoot.vue'
+import { injectAvatarRootContext } from './AvatarRoot.vue'
 
 const props = withDefaults(defineProps<AvatarFallbackProps>(), {
   delayMs: 0,
   as: 'span',
 })
 
-const context = inject(AVATAR_INJECTION_KEY)
+const rootContext = injectAvatarRootContext()
 
 const canRender = ref(false)
 let timeout: ReturnType<typeof setTimeout> | undefined
 
-watch(() => context?.imageLoadingStatus.value, (value) => {
+watch(rootContext.imageLoadingStatus, (value) => {
   if (value === 'loading') {
     canRender.value = false
     if (props.delayMs) {
@@ -37,7 +37,7 @@ watch(() => context?.imageLoadingStatus.value, (value) => {
 
 <template>
   <Primitive
-    v-if="canRender && context?.imageLoadingStatus.value !== 'loaded'"
+    v-if="canRender && rootContext.imageLoadingStatus.value !== 'loaded'"
     :as-child="props.asChild"
     :as="as"
   >
diff --git a/packages/radix-vue/src/Avatar/AvatarImage.vue b/packages/radix-vue/src/Avatar/AvatarImage.vue
index 3e0a675fa..d4f7f6d2a 100644
--- a/packages/radix-vue/src/Avatar/AvatarImage.vue
+++ b/packages/radix-vue/src/Avatar/AvatarImage.vue
@@ -8,16 +8,16 @@ export interface AvatarImageProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject, toRefs, watch } from 'vue'
+import { toRefs, watch } from 'vue'
 import { Primitive, type PrimitiveProps } from '../Primitive'
-import { AVATAR_INJECTION_KEY } from './AvatarRoot.vue'
+import { injectAvatarRootContext } from './AvatarRoot.vue'
 import { type ImageLoadingStatus, useImageLoadingStatus } from './utils'
 
 const props = withDefaults(defineProps<AvatarImageProps>(), { as: 'img' })
 const emits = defineEmits<AvatarImageEmits>()
 
 const { src } = toRefs(props)
-const context = inject(AVATAR_INJECTION_KEY)
+const rootContext = injectAvatarRootContext()
 
 const imageLoadingStatus = useImageLoadingStatus(src)
 
@@ -26,7 +26,7 @@ watch(
   (newValue) => {
     emits('loadingStatusChange', newValue)
     if (newValue !== 'idle')
-      context!.imageLoadingStatus.value = newValue
+      rootContext.imageLoadingStatus.value = newValue
   },
   { immediate: true },
 )
diff --git a/packages/radix-vue/src/Avatar/AvatarRoot.vue b/packages/radix-vue/src/Avatar/AvatarRoot.vue
index cfa81049c..73c923ca2 100644
--- a/packages/radix-vue/src/Avatar/AvatarRoot.vue
+++ b/packages/radix-vue/src/Avatar/AvatarRoot.vue
@@ -1,29 +1,28 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { ImageLoadingStatus } from './utils'
+import { createContext } from '@/shared'
 
 export interface AvatarRootProps extends PrimitiveProps {}
 
-export const AVATAR_INJECTION_KEY
-  = Symbol() as InjectionKey<AvatarProvideValue>
-
-interface AvatarProvideValue {
+export type AvatarRootContext = {
   imageLoadingStatus: Ref<ImageLoadingStatus>
 }
+
+export const [injectAvatarRootContext, provideAvatarRootContext]
+  = createContext<AvatarRootContext>('AvatarRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { ref } from 'vue'
 import { Primitive, type PrimitiveProps } from '../Primitive'
 
 const props = withDefaults(defineProps<AvatarRootProps>(), {
   as: 'span',
 })
 
-const imageLoadingStatusRef = ref<ImageLoadingStatus>('loading')
-
-provide(AVATAR_INJECTION_KEY, {
-  imageLoadingStatus: imageLoadingStatusRef,
+provideAvatarRootContext({
+  imageLoadingStatus: ref<ImageLoadingStatus>('loading'),
 })
 </script>
 
diff --git a/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue b/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue
index 6303f8c1a..9044b5807 100644
--- a/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue
+++ b/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue
@@ -5,8 +5,7 @@ export interface CheckboxIndicatorProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { CHECKBOX_INJECTION_KEY } from './CheckboxRoot.vue'
+import { injectCheckboxRootContext } from './CheckboxRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { Presence } from '@/Presence'
 import { getState, isIndeterminate } from './utils'
@@ -15,14 +14,16 @@ withDefaults(defineProps<CheckboxIndicatorProps>(), {
   as: 'span',
 })
 
-const context = inject(CHECKBOX_INJECTION_KEY)
+const rootContext = injectCheckboxRootContext()
 </script>
 
 <template>
-  <Presence :present="forceMount || isIndeterminate(context!.state.value) || context?.state.value === true">
+  <Presence
+    :present="forceMount || isIndeterminate(rootContext.state.value) || rootContext.state.value === true"
+  >
     <Primitive
-      :data-state="getState(context!.state.value)"
-      :data-disabled="context?.disabled.value ? '' : undefined"
+      :data-state="getState(rootContext.state.value)"
+      :data-disabled="rootContext.disabled.value ? '' : undefined"
       :style="{ pointerEvents: 'none' }"
       :as-child="asChild"
       :as="as"
diff --git a/packages/radix-vue/src/Checkbox/CheckboxRoot.vue b/packages/radix-vue/src/Checkbox/CheckboxRoot.vue
index bf5894cc6..1029963e3 100644
--- a/packages/radix-vue/src/Checkbox/CheckboxRoot.vue
+++ b/packages/radix-vue/src/Checkbox/CheckboxRoot.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import { useVModel } from '@vueuse/core'
+import { createContext } from '@/shared'
 
 export interface CheckboxRootProps extends PrimitiveProps {
   defaultChecked?: boolean
@@ -16,13 +17,13 @@ export type CheckboxRootEmits = {
   'update:checked': [value: boolean]
 }
 
-interface CheckboxProvideValue {
+interface CheckboxRootContext {
   disabled: Ref<boolean>
   state: Ref<CheckedState>
 }
 
-export const CHECKBOX_INJECTION_KEY
-  = Symbol() as InjectionKey<CheckboxProvideValue>
+export const [injectCheckboxRootContext, provideCheckboxRootContext]
+  = createContext<CheckboxRootContext>('CheckboxRoot')
 
 export default {
   inheritAttrs: false,
@@ -30,7 +31,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, provide, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
 import type { CheckedState } from './utils'
 import { getState, isIndeterminate } from './utils'
@@ -50,10 +51,18 @@ const checked = useVModel(props, 'checked', emits, {
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 // We set this to true by default so that events bubble to forms without JS (SSR)
-const isFormControl = computed(() => currentElement.value ? Boolean(currentElement.value.closest('form')) : true)
-const ariaLabel = computed(() => props.id && currentElement.value ? (document.querySelector(`[for="${props.id}"]`) as HTMLLabelElement)?.innerText : undefined)
+const isFormControl = computed(() =>
+  currentElement.value
+    ? Boolean(currentElement.value.closest('form'))
+    : true,
+)
+const ariaLabel = computed(() =>
+  props.id && currentElement.value
+    ? (document.querySelector(`[for="${props.id}"]`) as HTMLLabelElement)?.innerText
+    : undefined,
+)
 
-provide(CHECKBOX_INJECTION_KEY, {
+provideCheckboxRootContext({
   disabled,
   state: checked,
 })
diff --git a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
index 2fd2abf18..4b4ee08bd 100644
--- a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
+++ b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
@@ -6,8 +6,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
-import { COLLAPSIBLE_INJECTION_KEY } from './CollapsibleRoot.vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { injectCollapsibleRootContext } from './CollapsibleRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -17,7 +17,7 @@ import { Presence } from '@/Presence'
 
 const props = defineProps<CollapsibleContentProps>()
 
-const injectedValue = inject(COLLAPSIBLE_INJECTION_KEY)
+const rootContext = injectCollapsibleRootContext()
 
 const presentRef = ref<InstanceType<typeof Presence>>()
 const { primitiveElement, currentElement } = usePrimitiveElement()
@@ -27,7 +27,7 @@ const height = ref(0)
 
 // when opening we want it to immediately open to retrieve dimensions
 // when closing we delay `present` to retrieve dimensions before closing
-const isOpen = computed(() => injectedValue?.open.value)
+const isOpen = computed(() => rootContext.open.value)
 const isMountAnimationPrevented = ref(isOpen.value)
 const currentStyle = ref<Record<string, string>>()
 
@@ -72,17 +72,17 @@ onMounted(() => {
 <template>
   <Presence
     ref="presentRef"
-    :present="injectedValue!.open.value"
+    :present="rootContext.open.value"
     :force-mount="true"
   >
     <Primitive
       v-bind="$attrs"
-      :id="injectedValue?.contentId"
+      :id="rootContext.contentId"
       ref="primitiveElement"
       :as-child="props.asChild"
       :as="as"
-      :data-state="injectedValue?.open.value ? 'open' : 'closed'"
-      :data-disabled="injectedValue?.disabled?.value ? 'true' : undefined"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
+      :data-disabled="rootContext.disabled?.value ? 'true' : undefined"
       :hidden="!presentRef?.present"
       :style="{
         [`--radix-collapsible-content-height`]: `${height}px`,
diff --git a/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue b/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
index fdb057faf..d8bac825b 100644
--- a/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
+++ b/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
-import { useId } from '@/shared'
+import type { Ref } from 'vue'
+import { createContext, useId } from '@/shared'
 
 export interface CollapsibleRootProps extends PrimitiveProps {
   defaultOpen?: boolean
@@ -12,19 +12,18 @@ export type CollapsibleRootEmits = {
   'update:open': [value: boolean]
 }
 
-interface CollapsibleProvideValue {
+interface CollapsibleRootContext {
   contentId: string
   disabled?: Ref<boolean>
   open: Ref<boolean>
   onOpenToggle(): void
 }
 
-export const COLLAPSIBLE_INJECTION_KEY
-  = Symbol() as InjectionKey<CollapsibleProvideValue>
+export const [injectCollapsibleRootContext, provideCollapsibleRootContext]
+  = createContext<CollapsibleRootContext>('CollapsibleRoot')
 </script>
 
 <script setup lang="ts">
-import { provide } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 
@@ -42,7 +41,7 @@ const open = useVModel(props, 'open', emit, {
 
 const disabled = useVModel(props, 'disabled')
 
-provide(COLLAPSIBLE_INJECTION_KEY, {
+provideCollapsibleRootContext({
   contentId: useId(),
   disabled,
   open,
diff --git a/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue b/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue
index 66e538de2..f4b7de570 100644
--- a/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue
+++ b/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue
@@ -3,15 +3,14 @@ export interface CollapsibleTriggerProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
 import { Primitive, type PrimitiveProps } from '../Primitive'
-import { COLLAPSIBLE_INJECTION_KEY } from './CollapsibleRoot.vue'
+import { injectCollapsibleRootContext } from './CollapsibleRoot.vue'
 
 const props = withDefaults(defineProps<CollapsibleTriggerProps>(), {
   as: 'button',
 })
 
-const injectedValue = inject(COLLAPSIBLE_INJECTION_KEY)
+const rootContext = injectCollapsibleRootContext()
 </script>
 
 <template>
@@ -19,12 +18,12 @@ const injectedValue = inject(COLLAPSIBLE_INJECTION_KEY)
     :type="as === 'button' ? 'button' : undefined"
     :as="as"
     :as-child="props.asChild"
-    :aria-controls="injectedValue?.contentId"
-    :aria-expanded="injectedValue?.open.value || false"
-    :data-state="injectedValue?.open.value ? 'open' : 'closed'"
-    :data-disabled="injectedValue?.disabled?.value ? '' : undefined"
-    :disabled="injectedValue?.disabled?.value"
-    @click="injectedValue?.onOpenToggle"
+    :aria-controls="rootContext.contentId"
+    :aria-expanded="rootContext.open.value"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
+    :data-disabled="rootContext.disabled?.value ? '' : undefined"
+    :disabled="rootContext.disabled?.value"
+    @click="rootContext.onOpenToggle"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue b/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue
index b65c27420..08222945f 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { CONTEXT_MENU_INJECTION_KEY } from './ContextMenuRoot.vue'
+import { ref } from 'vue'
+import { injectContextMenuRootContext } from './ContextMenuRoot.vue'
 import {
   MenuContent,
   type MenuContentEmits,
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<ContextMenuContentProps>(), {
 })
 const emits = defineEmits<ContextMenuContentEmits>()
 
-const context = inject(CONTEXT_MENU_INJECTION_KEY)
+const rootContext = injectContextMenuRootContext()
 const hasInteractedOutside = ref(false)
 </script>
 
@@ -63,7 +63,7 @@ const hasInteractedOutside = ref(false)
     @interact-outside="
       (event) => {
         emits('interactOutside', event);
-        if (!event.defaultPrevented && !context?.modal.value)
+        if (!event.defaultPrevented && !rootContext.modal.value)
           hasInteractedOutside = true;
       }
     "
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue b/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue
index 46a3535aa..f99646e62 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue
@@ -1,16 +1,17 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { Direction } from '../shared/types'
+import { createContext } from '@/shared'
 
-interface ContextMenuContextValue {
+type ContextMenuRootContext = {
   open: Ref<boolean>
   onOpenChange(open: boolean): void
   modal: Ref<boolean>
   dir: Ref<Direction>
 }
 
-export const CONTEXT_MENU_INJECTION_KEY
-  = Symbol() as InjectionKey<ContextMenuContextValue>
+export const [injectContextMenuRootContext, provideContextMenuRootContext]
+  = createContext<ContextMenuRootContext>('ContextMenuRoot')
 
 export interface ContextMenuRootProps {
   dir?: Direction
@@ -22,7 +23,7 @@ export type ContextMenuRootEmits = {
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { MenuRoot } from '@/Menu'
 
 const props = withDefaults(defineProps<ContextMenuRootProps>(), {
@@ -34,7 +35,7 @@ const { dir, modal } = toRefs(props)
 
 const open = ref(false)
 
-provide(CONTEXT_MENU_INJECTION_KEY, {
+provideContextMenuRootContext({
   open,
   onOpenChange: (value: boolean) => {
     open.value = value
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue b/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue
index 4de9e649a..94ee4eee0 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue
@@ -8,8 +8,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, toRefs } from 'vue'
-import { CONTEXT_MENU_INJECTION_KEY } from './ContextMenuRoot.vue'
+import { computed, nextTick, ref, toRefs } from 'vue'
+import { injectContextMenuRootContext } from './ContextMenuRoot.vue'
 import { isTouchOrPen } from './utils'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { MenuAnchor } from '@/Menu'
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<ContextMenuTriggerProps>(), {
 })
 const { disabled } = toRefs(props)
 
-const context = inject(CONTEXT_MENU_INJECTION_KEY)
+const rootContext = injectContextMenuRootContext()
 const point = ref<Point>({ x: 0, y: 0 })
 const virtualEl = computed(() => ({
   getBoundingClientRect: () =>
@@ -43,7 +43,7 @@ function clearLongPress() {
 
 function handleOpen(event: MouseEvent | PointerEvent) {
   point.value = { x: event.clientX, y: event.clientY }
-  context?.onOpenChange(true)
+  rootContext.onOpenChange(true)
 }
 
 async function handleContextMenu(event: PointerEvent) {
@@ -84,7 +84,7 @@ async function handlePointerEvent(event: PointerEvent) {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :data-state="context?.open.value ? 'open' : 'closed'"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
     :data-disabled="disabled ? '' : undefined"
     :style="{
       WebkitTouchCallout: 'none',
diff --git a/packages/radix-vue/src/ContextMenu/utils.ts b/packages/radix-vue/src/ContextMenu/utils.ts
index 0460cbbb1..2ae68ac91 100644
--- a/packages/radix-vue/src/ContextMenu/utils.ts
+++ b/packages/radix-vue/src/ContextMenu/utils.ts
@@ -1,12 +1,3 @@
-import { type InjectionKey, type Ref } from 'vue'
-
-interface ContextMenuItemContextValue {
-  modelValue: Ref<boolean>
-}
-
-export const CONTEXT_MENU_ITEM_SYMBOL
-  = Symbol() as InjectionKey<ContextMenuItemContextValue>
-
 export function isTouchOrPen(event: PointerEvent) {
   return event.pointerType !== 'mouse'
 }
diff --git a/packages/radix-vue/src/Dialog/DialogClose.vue b/packages/radix-vue/src/Dialog/DialogClose.vue
index 59d60ad63..8b5c9a5aa 100644
--- a/packages/radix-vue/src/Dialog/DialogClose.vue
+++ b/packages/radix-vue/src/Dialog/DialogClose.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface DialogCloseProps extends PrimitiveProps {}
@@ -8,7 +7,7 @@ const props = withDefaults(defineProps<DialogCloseProps>(), {
   as: 'button',
 })
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 </script>
 
 <template>
@@ -16,7 +15,7 @@ const context = inject(DIALOG_INJECTION_KEY)
     v-bind="props"
     :type="as === 'button' ? 'button' : undefined"
     aria-label="Close"
-    @click="context?.onOpenChange(false)"
+    @click="rootContext.onOpenChange(false)"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Dialog/DialogContent.vue b/packages/radix-vue/src/Dialog/DialogContent.vue
index f528cf6c8..e294d0ea0 100644
--- a/packages/radix-vue/src/Dialog/DialogContent.vue
+++ b/packages/radix-vue/src/Dialog/DialogContent.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import DialogContentModal from './DialogContentModal.vue'
 import DialogContentNonModal from './DialogContentNonModal.vue'
 import {
   type DialogContentImplEmits,
   type DialogContentImplProps,
 } from './DialogContentImpl.vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Presence } from '@/Presence'
 import { useEmitAsProps } from '@/shared'
 
@@ -14,7 +13,7 @@ const props = defineProps<DialogContentProps>()
 
 const emits = defineEmits<DialogContentEmits>()
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 
 export interface DialogContentProps extends DialogContentImplProps {}
 export type DialogContentEmits = DialogContentImplEmits
@@ -23,9 +22,9 @@ const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <Presence :present="context!.open.value">
+  <Presence :present="rootContext.open.value">
     <DialogContentModal
-      v-if="context?.modal.value"
+      v-if="rootContext.modal.value"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
       @open-auto-focus="emits('openAutoFocus', $event)"
     >
diff --git a/packages/radix-vue/src/Dialog/DialogContentImpl.vue b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
index c28e7b07f..308c02415 100644
--- a/packages/radix-vue/src/Dialog/DialogContentImpl.vue
+++ b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import {
   DismissableLayer,
   type DismissableLayerEmits,
@@ -39,7 +38,7 @@ export type DialogContentImplEmits = DismissableLayerEmits & {
 const props = defineProps<DialogContentImplProps>()
 const emits = defineEmits<DialogContentImplEmits>()
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 </script>
 
 <template>
@@ -52,15 +51,15 @@ const context = inject(DIALOG_INJECTION_KEY)
   >
     <DismissableLayer
       v-bind="$attrs"
-      :id="context!.contentId"
+      :id="rootContext.contentId"
       :as="as"
       :as-child="asChild"
       :disable-outside-pointer-events="disableOutsidePointerEvents"
       role="dialog"
-      :aria-describedby="context!.descriptionId"
-      :aria-labelledby="context!.titleId"
-      :data-state="getOpenState(context!.open.value)"
-      @dismiss="context?.onOpenChange(false)"
+      :aria-describedby="rootContext.descriptionId"
+      :aria-labelledby="rootContext.titleId"
+      :data-state="getOpenState(rootContext.open.value)"
+      @dismiss="rootContext.onOpenChange(false)"
       @escape-key-down="emits('escapeKeyDown', $event)"
       @focus-outside="emits('focusOutside', $event)"
       @interact-outside="emits('interactOutside', $event)"
diff --git a/packages/radix-vue/src/Dialog/DialogContentModal.vue b/packages/radix-vue/src/Dialog/DialogContentModal.vue
index d3f619173..f27bfa8ff 100644
--- a/packages/radix-vue/src/Dialog/DialogContentModal.vue
+++ b/packages/radix-vue/src/Dialog/DialogContentModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import DialogContentImpl, {
   type DialogContentImplEmits,
   type DialogContentImplProps,
@@ -11,7 +10,7 @@ import { usePrimitiveElement } from '@/Primitive'
 const props = defineProps<DialogContentImplProps>()
 const emits = defineEmits<DialogContentImplEmits>()
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 
 const emitsAsProps = useEmitAsProps(emits)
 
@@ -23,7 +22,7 @@ useHideOthers(currentElement)
   <DialogContentImpl
     ref="primitiveElement"
     v-bind="{ ...props, ...emitsAsProps }"
-    :trap-focus="context?.open.value"
+    :trap-focus="rootContext.open.value"
     :disable-outside-pointer-events="true"
     @close-auto-focus="
       (event) => {
@@ -31,7 +30,7 @@ useHideOthers(currentElement)
 
         if (!event.defaultPrevented) {
           event.preventDefault();
-          context?.triggerElement.value?.focus();
+          rootContext.triggerElement.value?.focus();
         }
       }
     "
diff --git a/packages/radix-vue/src/Dialog/DialogContentNonModal.vue b/packages/radix-vue/src/Dialog/DialogContentNonModal.vue
index 4f87ba993..07143771c 100644
--- a/packages/radix-vue/src/Dialog/DialogContentNonModal.vue
+++ b/packages/radix-vue/src/Dialog/DialogContentNonModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { ref } from 'vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import DialogContentImpl, {
   type DialogContentImplEmits,
   type DialogContentImplProps,
@@ -12,7 +12,7 @@ const emits = defineEmits<DialogContentImplEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 const hasInteractedOutsideRef = ref(false)
 const hasPointerDownOutsideRef = ref(false)
 </script>
@@ -27,7 +27,7 @@ const hasPointerDownOutsideRef = ref(false)
         emits('closeAutoFocus', event);
 
         if (!event.defaultPrevented) {
-          if (!hasInteractedOutsideRef) context?.triggerElement.value?.focus();
+          if (!hasInteractedOutsideRef) rootContext.triggerElement.value?.focus();
           // Always prevent auto focus because we either focus manually or want user agent focus
           event.preventDefault();
         }
@@ -48,7 +48,7 @@ const hasPointerDownOutsideRef = ref(false)
       // As the trigger is already setup to close, without doing so would
       // cause it to close and immediately open.
       const target = event.target as HTMLElement;
-      const targetIsTrigger = context?.triggerElement.value?.contains(target);
+      const targetIsTrigger = rootContext.triggerElement.value?.contains(target);
       if (targetIsTrigger) event.preventDefault();
 
       // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
diff --git a/packages/radix-vue/src/Dialog/DialogDescription.vue b/packages/radix-vue/src/Dialog/DialogDescription.vue
index 6d950348a..845254258 100644
--- a/packages/radix-vue/src/Dialog/DialogDescription.vue
+++ b/packages/radix-vue/src/Dialog/DialogDescription.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface DialogDescriptionProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<DialogDescriptionProps>(), { as: 'p' })
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 </script>
 
 <template>
-  <Primitive v-bind="props" :id="context?.descriptionId">
+  <Primitive v-bind="props" :id="rootContext.descriptionId">
     <slot />
   </Primitive>
 </template>
diff --git a/packages/radix-vue/src/Dialog/DialogOverlay.vue b/packages/radix-vue/src/Dialog/DialogOverlay.vue
index 8ed2870a0..9f1bfffe7 100644
--- a/packages/radix-vue/src/Dialog/DialogOverlay.vue
+++ b/packages/radix-vue/src/Dialog/DialogOverlay.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, watch } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { watch } from 'vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { Presence } from '@/Presence'
 import { useBodyScrollLock } from '@/shared'
@@ -14,22 +14,22 @@ export interface DialogOverlayProps extends PrimitiveProps {
 }
 
 defineProps<DialogOverlayProps>()
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 
 const isLocked = useBodyScrollLock()
 watch(
-  () => context?.open.value,
-  n => (isLocked.value = n ?? false),
+  rootContext.open,
+  isOpen => (isLocked.value = isOpen),
 )
 </script>
 
 <template>
-  <Presence :present="forceMount || context!.open.value">
+  <Presence :present="forceMount || rootContext.open.value">
     <Primitive
       v-bind="$attrs"
       :as="as"
       :as-child="asChild"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       style="pointer-events: auto"
       data-aria-hidden="true"
       aria-hidden="true"
diff --git a/packages/radix-vue/src/Dialog/DialogRoot.vue b/packages/radix-vue/src/Dialog/DialogRoot.vue
index 48ec8b1d9..b8b3f6b2b 100644
--- a/packages/radix-vue/src/Dialog/DialogRoot.vue
+++ b/packages/radix-vue/src/Dialog/DialogRoot.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext, useId } from '@/shared'
 
 export interface DialogRootProps {
   open?: boolean
@@ -11,10 +12,7 @@ export type DialogRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const DIALOG_INJECTION_KEY
-  = Symbol() as InjectionKey<DialogProvideValue>
-
-export interface DialogProvideValue {
+export interface DialogRootContext {
   open: Readonly<Ref<boolean>>
   modal: Ref<boolean>
   openModal(): void
@@ -26,12 +24,14 @@ export interface DialogProvideValue {
   titleId: string
   descriptionId: string
 }
+
+export const [injectDialogRootContext, provideDialogRootContext]
+  = createContext<DialogRootContext>('DialogRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { useId } from '@/shared'
 
 const props = withDefaults(defineProps<DialogRootProps>(), {
   open: undefined,
@@ -49,7 +49,8 @@ const open = useVModel(props, 'open', emit, {
 const triggerElement = ref<HTMLElement>()
 const contentElement = ref<HTMLElement>()
 const { modal } = toRefs(props)
-provide<DialogProvideValue>(DIALOG_INJECTION_KEY, {
+
+provideDialogRootContext({
   open,
   modal,
   openModal: () => {
diff --git a/packages/radix-vue/src/Dialog/DialogTitle.vue b/packages/radix-vue/src/Dialog/DialogTitle.vue
index e926f563c..d21b53c17 100644
--- a/packages/radix-vue/src/Dialog/DialogTitle.vue
+++ b/packages/radix-vue/src/Dialog/DialogTitle.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface DialogTitleProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<DialogTitleProps>(), { as: 'h2' })
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 </script>
 
 <template>
-  <Primitive v-bind="props" :id="context?.titleId">
+  <Primitive v-bind="props" :id="rootContext.titleId">
     <slot />
   </Primitive>
 </template>
diff --git a/packages/radix-vue/src/Dialog/DialogTrigger.vue b/packages/radix-vue/src/Dialog/DialogTrigger.vue
index fb9701958..793133fe3 100644
--- a/packages/radix-vue/src/Dialog/DialogTrigger.vue
+++ b/packages/radix-vue/src/Dialog/DialogTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { onMounted } from 'vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -12,11 +12,11 @@ export interface DialogTriggerProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<DialogTriggerProps>(), {
   as: 'button',
 })
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 onMounted(() => {
-  context!.triggerElement = currentElement
+  rootContext.triggerElement = currentElement
 })
 </script>
 
@@ -26,10 +26,10 @@ onMounted(() => {
     v-bind="props"
     :type="as === 'button' ? 'button' : undefined"
     aria-haspopup="dialog"
-    :aria-expanded="context?.open.value || false"
-    :aria-controls="context?.contentId"
-    :data-state="context?.open.value ? 'open' : 'closed'"
-    @click="context?.onOpenToggle"
+    :aria-expanded="rootContext.open.value || false"
+    :aria-controls="rootContext.contentId"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
+    @click="rootContext.onOpenToggle"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/HoverCard/HoverCardContent.vue b/packages/radix-vue/src/HoverCard/HoverCardContent.vue
index c111f3c26..2ad5428bf 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardContent.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import {
-  HOVER_CARD_INJECTION_KEY,
+  injectHoverCardRootContext,
 } from './HoverCardRoot.vue'
 import { excludeTouch } from './utils'
 import { Presence } from '@/Presence'
@@ -15,17 +14,17 @@ const props = defineProps<HoverCardContentProps>()
 const emits = defineEmits<HoverCardContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(HOVER_CARD_INJECTION_KEY)
+const rootContext = injectHoverCardRootContext()
 </script>
 
 <template>
   <Presence
-    :present="context!.open.value"
+    :present="rootContext.open.value"
   >
     <HoverCardContentImpl
       v-bind="forwarded"
-      @pointerenter="excludeTouch(context!.onOpen)($event)"
-      @pointerleave="excludeTouch(context!.onClose)($event)"
+      @pointerenter="excludeTouch(rootContext.onOpen)($event)"
+      @pointerleave="excludeTouch(rootContext.onClose)($event)"
     >
       <slot />
     </HoverCardContentImpl>
diff --git a/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue b/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
index beed9c4e5..580cb3fd8 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { inject, nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import {
-  HOVER_CARD_INJECTION_KEY,
+  injectHoverCardRootContext,
 } from './HoverCardRoot.vue'
 import { PopperContent, type PopperContentProps } from '@/Popper'
 import { DismissableLayer, type DismissableLayerEmits } from '@/DismissableLayer'
@@ -17,7 +17,7 @@ const emits = defineEmits<HoverCardContentImplEmits>()
 const forwarded = useForwardProps(props)
 
 const { primitiveElement, currentElement: contentElement } = usePrimitiveElement()
-const context = inject(HOVER_CARD_INJECTION_KEY)
+const rootContext = injectHoverCardRootContext()
 const containSelection = ref(false)
 
 let originalBodyUserSelect: string
@@ -40,13 +40,13 @@ watchEffect((cleanupFn) => {
 
 function handlePointerUp() {
   containSelection.value = false
-  context!.isPointerDownOnContentRef.value = false
+  rootContext.isPointerDownOnContentRef.value = false
 
   // Delay a frame to ensure we always access the latest selection
   nextTick(() => {
     const hasSelection = document.getSelection()?.toString() !== ''
     if (hasSelection)
-      context!.hasSelectionRef.value = true
+      rootContext.hasSelectionRef.value = true
   })
 }
 onMounted(() => {
@@ -60,8 +60,8 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('pointerup', handlePointerUp)
-  context!.hasSelectionRef.value = false
-  context!.isPointerDownOnContentRef.value = false
+  rootContext.hasSelectionRef.value = false
+  rootContext.isPointerDownOnContentRef.value = false
 })
 </script>
 
@@ -72,12 +72,12 @@ onUnmounted(() => {
     @escape-key-down="emits('escapeKeyDown', $event)"
     @pointer-down-outside="emits('pointerDownOutside', $event)"
     @focus-outside.prevent="emits('focusOutside', $event)"
-    @dismiss="context?.onDismiss"
+    @dismiss="rootContext.onDismiss"
   >
     <PopperContent
       ref="primitiveElement"
       v-bind="{ ...forwarded, ...$attrs }"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       :style="{
         'userSelect': containSelection ? 'text' : undefined,
         // Safari requires prefix
@@ -94,8 +94,8 @@ onUnmounted(() => {
         if (event.currentTarget.contains(event.target as HTMLElement)) {
           containSelection = true
         }
-        context!.hasSelectionRef.value = false;
-        context!.isPointerDownOnContentRef.value = true;
+        rootContext.hasSelectionRef.value = false;
+        rootContext.isPointerDownOnContentRef.value = true;
       }"
     >
       <slot />
diff --git a/packages/radix-vue/src/HoverCard/HoverCardRoot.vue b/packages/radix-vue/src/HoverCard/HoverCardRoot.vue
index ca83ea432..9271d16c8 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardRoot.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardRoot.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from '@/shared'
 
 export interface HoverCardRootProps {
   defaultOpen?: false
@@ -11,10 +12,7 @@ export type HoverCardRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const HOVER_CARD_INJECTION_KEY
-  = Symbol() as InjectionKey<HoverCardProvideValue>
-
-export interface HoverCardProvideValue {
+export interface HoverCardRootContext {
   open: Ref<boolean>
   onOpenChange(open: boolean): void
   onOpen(): void
@@ -23,10 +21,13 @@ export interface HoverCardProvideValue {
   hasSelectionRef: Ref<boolean>
   isPointerDownOnContentRef: Ref<boolean>
 }
+
+export const [injectHoverCardRootContext, provideHoverCardRootContext]
+  = createContext<HoverCardRootContext>('HoverCardRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { PopperRoot } from '@/Popper'
 
@@ -65,7 +66,7 @@ function handleDismiss() {
   open.value = false
 }
 
-provide<HoverCardProvideValue>(HOVER_CARD_INJECTION_KEY, {
+provideHoverCardRootContext({
   open,
   onOpenChange(value) {
     open.value = value
diff --git a/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue b/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue
index 216441d00..17e984e18 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import {
-  HOVER_CARD_INJECTION_KEY,
+  injectHoverCardRootContext,
 } from './HoverCardRoot.vue'
 import {
   Primitive,
@@ -16,7 +15,7 @@ withDefaults(defineProps<HoverCardTriggerProps>(), {
   as: 'a',
 })
 
-const context = inject(HOVER_CARD_INJECTION_KEY)
+const rootContext = injectHoverCardRootContext()
 </script>
 
 <template>
@@ -24,11 +23,11 @@ const context = inject(HOVER_CARD_INJECTION_KEY)
     <Primitive
       :as-child="asChild"
       :as="as"
-      :data-state="context?.open.value ? 'open' : 'closed'"
-      @pointerenter="excludeTouch(context!.onOpen)($event)"
-      @pointerleave="excludeTouch(context!.onClose)($event)"
-      @focus="context!.onOpen()"
-      @blur="context!.onClose"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
+      @pointerenter="excludeTouch(rootContext.onOpen)($event)"
+      @pointerleave="excludeTouch(rootContext.onClose)($event)"
+      @focus="rootContext.onOpen()"
+      @blur="rootContext.onClose"
       @touchstart.prevent="() => {
         // prevent focus event on touch devices
       }"
diff --git a/packages/radix-vue/src/Menu/MenuCheckboxItem.vue b/packages/radix-vue/src/Menu/MenuCheckboxItem.vue
index 48c9fa572..9bb156682 100644
--- a/packages/radix-vue/src/Menu/MenuCheckboxItem.vue
+++ b/packages/radix-vue/src/Menu/MenuCheckboxItem.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { provide } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { type CheckedState, getCheckedState, isIndeterminate } from './utils'
 import MenuItem, {
   type MenuItemEmits,
   type MenuItemProps,
 } from './MenuItem.vue'
-import { MENU_ITEM_INDICATOR_INJECTION_KEY } from './MenuItemIndicator.vue'
+import { provideMenuItemIndicatorContext } from './MenuItemIndicator.vue'
 
 export interface MenuCheckboxItemProps extends MenuItemProps {
   checked?: CheckedState
@@ -21,9 +20,7 @@ const props = withDefaults(defineProps<MenuCheckboxItemProps>(), {
 const emits = defineEmits<MenuCheckboxItemEmits>()
 const checked = useVModel(props, 'checked', emits)
 
-provide(MENU_ITEM_INDICATOR_INJECTION_KEY, {
-  checked,
-})
+provideMenuItemIndicatorContext({ checked })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Menu/MenuContent.vue b/packages/radix-vue/src/Menu/MenuContent.vue
index 357080826..d627cd53e 100644
--- a/packages/radix-vue/src/Menu/MenuContent.vue
+++ b/packages/radix-vue/src/Menu/MenuContent.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import MenuRootContentModal from './MenuRootContentModal.vue'
 import MenuRootContentNonModal from './MenuRootContentNonModal.vue'
-import { MENU_INJECTION_KEY, MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
+import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
 import {
   type MenuContentImplEmits,
   type MenuRootContentProps,
@@ -16,16 +15,16 @@ export type MenuContentEmits = MenuContentImplEmits
 const props = defineProps<MenuContentProps>()
 const emits = defineEmits<MenuContentEmits>()
 
-const context = inject(MENU_INJECTION_KEY)
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
+const menuContext = injectMenuContext()
+const rootContext = injectMenuRootContext()
 
 const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <Presence :present="context!.open.value">
+  <Presence :present="menuContext.open.value">
     <MenuRootContentModal
-      v-if="rootContext?.modal.value"
+      v-if="rootContext.modal.value"
       v-bind="{ ...$attrs, ...props, ...emitsAsProps }"
     >
       <slot />
diff --git a/packages/radix-vue/src/Menu/MenuContentImpl.vue b/packages/radix-vue/src/Menu/MenuContentImpl.vue
index 04afb2567..0572f1e9f 100644
--- a/packages/radix-vue/src/Menu/MenuContentImpl.vue
+++ b/packages/radix-vue/src/Menu/MenuContentImpl.vue
@@ -1,5 +1,14 @@
 <script lang="ts">
-export interface MenuContentContextValue {
+import {
+  createContext,
+  useArrowNavigation,
+  useBodyScrollLock,
+  useCollection,
+  useFocusGuards,
+  useTypeahead,
+} from '@/shared'
+
+export interface MenuContentContext {
   onItemEnter(event: PointerEvent): void
   onItemLeave(event: PointerEvent): void
   onTriggerLeave(event: PointerEvent): void
@@ -8,8 +17,8 @@ export interface MenuContentContextValue {
   onPointerGraceIntentChange(intent: GraceIntent | null): void
 }
 
-export const MENU_CONTENT_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuContentContextValue>
+export const [injectMenuContentContext, provideMenuContentContext]
+  = createContext<MenuContentContext>('MenuContent')
 
 export interface MenuContentImplPrivateProps {
   disableOutsidePointerEvents?: DismissableLayerProps['disableOutsidePointerEvents']
@@ -58,16 +67,13 @@ export interface MenuRootContentProps
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
-  inject,
   onUnmounted,
-  provide,
   ref,
   toRefs,
   watch,
 } from 'vue'
-import { MENU_INJECTION_KEY, MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
+import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
 import {
   FIRST_LAST_KEYS,
   type GraceIntent,
@@ -91,20 +97,13 @@ import {
 } from '@/Popper'
 import { usePrimitiveElement } from '@/Primitive'
 import { RovingFocusGroup, type RovingFocusGroupEmits } from '@/RovingFocus'
-import {
-  useArrowNavigation,
-  useBodyScrollLock,
-  useCollection,
-  useFocusGuards,
-  useTypeahead,
-} from '@/shared'
 
 const props = withDefaults(defineProps<MenuContentImplProps>(), {
   ...PopperContentPropsDefaultValue,
 })
 const emits = defineEmits<MenuContentImplEmits>()
-const context = inject(MENU_INJECTION_KEY)
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
+const menuContext = injectMenuContext()
+const rootContext = injectMenuRootContext()
 
 const { trapFocus, disableOutsidePointerEvents, loop } = toRefs(props)
 
@@ -125,7 +124,7 @@ const { primitiveElement, currentElement: contentElement }
 const collectionItems = createCollection(contentElement)
 
 watch(contentElement, (el) => {
-  context!.onContentChange(el)
+  menuContext!.onContentChange(el)
 })
 
 const { handleTypeaheadSearch } = useTypeahead(collectionItems)
@@ -226,24 +225,24 @@ function handlePointerMove(event: PointerEvent) {
   }
 }
 
-provide(MENU_CONTENT_INJECTION_KEY, {
-  onItemEnter: (event: PointerEvent) => {
+provideMenuContentContext({
+  onItemEnter: (event) => {
     if (isPointerMovingToSubmenu(event))
       event.preventDefault()
   },
-  onItemLeave: (event: PointerEvent) => {
+  onItemLeave: (event) => {
     if (isPointerMovingToSubmenu(event))
       return
     contentElement.value?.focus()
     currentItemId.value = null
   },
-  onTriggerLeave: (event: PointerEvent) => {
+  onTriggerLeave: (event) => {
     if (isPointerMovingToSubmenu(event))
       event.preventDefault()
   },
   searchRef,
   pointerGraceTimerRef,
-  onPointerGraceIntentChange: (intent: GraceIntent | null) => {
+  onPointerGraceIntentChange: (intent) => {
     pointerGraceIntentRef.value = intent
   },
 })
@@ -269,12 +268,12 @@ provide(MENU_CONTENT_INJECTION_KEY, {
         v-model:current-tab-stop-id="currentItemId"
         as-child
         orientation="vertical"
-        :dir="rootContext?.dir.value"
+        :dir="rootContext.dir.value"
         :loop="loop"
         @entry-focus="(event) => {
           emits('entryFocus', event)
           // only focus first item when using keyboard
-          if (!rootContext?.isUsingKeyboardRef.value) event.preventDefault();
+          if (!rootContext.isUsingKeyboardRef.value) event.preventDefault();
         }"
       >
         <PopperContent
@@ -284,8 +283,8 @@ provide(MENU_CONTENT_INJECTION_KEY, {
           :as-child="asChild"
           aria-orientation="vertical"
           data-radix-menu-content
-          :data-state="getOpenState(context!.open.value)"
-          :dir="rootContext!.dir.value"
+          :data-state="getOpenState(menuContext.open.value)"
+          :dir="rootContext.dir.value"
           :side="side"
           :side-offset="sideOffset"
           :align="align"
diff --git a/packages/radix-vue/src/Menu/MenuItem.vue b/packages/radix-vue/src/Menu/MenuItem.vue
index b7467f894..683bfed37 100644
--- a/packages/radix-vue/src/Menu/MenuItem.vue
+++ b/packages/radix-vue/src/Menu/MenuItem.vue
@@ -6,10 +6,10 @@ export interface MenuItemProps extends MenuItemImplProps {}
 </script>
 
 <script setup lang="ts">
-import { inject, nextTick, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import MenuItemImpl, { type MenuItemImplProps } from './MenuItemImpl.vue'
-import { MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
-import { MENU_CONTENT_INJECTION_KEY } from './MenuContentImpl.vue'
+import { injectMenuRootContext } from './MenuRoot.vue'
+import { injectMenuContentContext } from './MenuContentImpl.vue'
 import { ITEM_SELECT, SELECTION_KEYS } from './utils'
 import { usePrimitiveElement } from '@/Primitive'
 
@@ -17,8 +17,8 @@ const props = defineProps<MenuItemProps>()
 const emits = defineEmits<MenuItemEmits>()
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
-const contentContext = inject(MENU_CONTENT_INJECTION_KEY)
+const rootContext = injectMenuRootContext()
+const contentContext = injectMenuContentContext()
 
 const isPointerDownRef = ref(false)
 
@@ -34,7 +34,7 @@ async function handleSelect() {
     await nextTick()
     if (itemSelectEvent.defaultPrevented)
       isPointerDownRef.value = false
-    else rootContext!.onClose()
+    else rootContext.onClose()
   }
 }
 </script>
@@ -61,7 +61,7 @@ async function handleSelect() {
     "
     @keydown="
       async (event) => {
-        const isTypingAhead = contentContext!.searchRef.value !== '';
+        const isTypingAhead = contentContext.searchRef.value !== '';
         if (disabled || (isTypingAhead && event.key === ' ')) return;
         if (SELECTION_KEYS.includes(event.key)) {
           event.currentTarget.click();
diff --git a/packages/radix-vue/src/Menu/MenuItemImpl.vue b/packages/radix-vue/src/Menu/MenuItemImpl.vue
index 08baaba91..0113af48f 100644
--- a/packages/radix-vue/src/Menu/MenuItemImpl.vue
+++ b/packages/radix-vue/src/Menu/MenuItemImpl.vue
@@ -8,18 +8,18 @@ export interface MenuItemImplProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { MENU_CONTENT_INJECTION_KEY } from './MenuContentImpl.vue'
+import { injectMenuContentContext } from './MenuContentImpl.vue'
 import {
   Primitive,
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
-import { inject, nextTick, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 const props = defineProps<MenuItemImplProps>()
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
-const contentContext = inject(MENU_CONTENT_INJECTION_KEY)
+const contentContext = injectMenuContentContext()
 
 const isFocused = ref(false)
 
@@ -31,10 +31,10 @@ async function handlePointerMove(event: PointerEvent) {
     return
 
   if (props.disabled) {
-    contentContext!.onItemLeave(event)
+    contentContext.onItemLeave(event)
   }
   else {
-    contentContext!.onItemEnter(event)
+    contentContext.onItemEnter(event)
     if (!event.defaultPrevented) {
       const item = event.currentTarget
       item && (item as HTMLElement).focus()
@@ -49,7 +49,7 @@ async function handlePointerLeave(event: PointerEvent) {
   if (!isMouseEvent(event))
     return
 
-  contentContext!.onItemLeave(event)
+  contentContext.onItemLeave(event)
 }
 
 defineExpose({
diff --git a/packages/radix-vue/src/Menu/MenuItemIndicator.vue b/packages/radix-vue/src/Menu/MenuItemIndicator.vue
index 49c5bca66..1e82c17d6 100644
--- a/packages/radix-vue/src/Menu/MenuItemIndicator.vue
+++ b/packages/radix-vue/src/Menu/MenuItemIndicator.vue
@@ -1,14 +1,18 @@
 <script lang="ts">
-interface MenuItemIndicatorContextValue {
+import { createContext } from '@/shared'
+
+interface MenuItemIndicatorContext {
   checked: Ref<CheckedState>
 }
 
-export const MENU_ITEM_INDICATOR_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuItemIndicatorContextValue>
+export const [injectMenuItemIndicatorContext, provideMenuItemIndicatorContext]
+  = createContext<MenuItemIndicatorContext>(
+    ['MenuCheckboxItem', 'MenuRadioItem'], 'MenuItemIndicatorContext',
+  )
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, inject, ref } from 'vue'
+import { type Ref, ref } from 'vue'
 import { type CheckedState, getCheckedState, isIndeterminate } from './utils'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { Presence } from '@/Presence'
@@ -19,7 +23,7 @@ withDefaults(defineProps<MenuItemIndicatorProps>(), {
   as: 'span',
 })
 
-const indicatorContext = inject(MENU_ITEM_INDICATOR_INJECTION_KEY, {
+const indicatorContext = injectMenuItemIndicatorContext({
   checked: ref(false),
 })
 </script>
@@ -27,14 +31,14 @@ const indicatorContext = inject(MENU_ITEM_INDICATOR_INJECTION_KEY, {
 <template>
   <Presence
     :present="
-      isIndeterminate(indicatorContext?.checked.value)
-        || indicatorContext?.checked.value === true
+      isIndeterminate(indicatorContext.checked.value)
+        || indicatorContext.checked.value === true
     "
   >
     <Primitive
       :as="as"
       :as-child="asChild"
-      :data-state="getCheckedState(indicatorContext!.checked.value)"
+      :data-state="getCheckedState(indicatorContext.checked.value)"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Menu/MenuRadioGroup.vue b/packages/radix-vue/src/Menu/MenuRadioGroup.vue
index 5c4589e67..2764f2926 100644
--- a/packages/radix-vue/src/Menu/MenuRadioGroup.vue
+++ b/packages/radix-vue/src/Menu/MenuRadioGroup.vue
@@ -1,15 +1,17 @@
 <script lang="ts">
-interface MenuRadioGroupContextValue {
+import { createContext } from '@/shared'
+
+interface MenuRadioGroupContext {
   modelValue: Ref<string>
   onValueChange: (payload: string) => void
 }
 
-export const MENU_RADIO_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuRadioGroupContextValue>
+export const [injectMenuRadioGroupContext, provideMenuRadioGroupContext]
+  = createContext<MenuRadioGroupContext>('MenuRadioGroup')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, provide } from 'vue'
+import { type Ref } from 'vue'
 import { useVModel } from '@vueuse/core'
 import MenuGroup, { type MenuGroupProps } from './MenuGroup.vue'
 
@@ -26,10 +28,10 @@ const props = withDefaults(defineProps<MenuRadioGroupProps>(), {
 const emits = defineEmits<MenuRadioGroupEmits>()
 const modelValue = useVModel(props, 'modelValue', emits)
 
-provide(MENU_RADIO_GROUP_INJECTION_KEY, {
+provideMenuRadioGroupContext({
   modelValue,
-  onValueChange: (ev) => {
-    modelValue.value = ev
+  onValueChange: (payload) => {
+    modelValue.value = payload
   },
 })
 </script>
diff --git a/packages/radix-vue/src/Menu/MenuRadioItem.vue b/packages/radix-vue/src/Menu/MenuRadioItem.vue
index b97920ca1..1f111061d 100644
--- a/packages/radix-vue/src/Menu/MenuRadioItem.vue
+++ b/packages/radix-vue/src/Menu/MenuRadioItem.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, inject, provide, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { getCheckedState } from './utils'
 import MenuItem, {
   type MenuItemEmits,
   type MenuItemProps,
 } from './MenuItem.vue'
-import { MENU_RADIO_GROUP_INJECTION_KEY } from './MenuRadioGroup.vue'
-import { MENU_ITEM_INDICATOR_INJECTION_KEY } from './MenuItemIndicator.vue'
+import { injectMenuRadioGroupContext } from './MenuRadioGroup.vue'
+import { provideMenuItemIndicatorContext } from './MenuItemIndicator.vue'
 
 export interface MenuRadioItemProps extends MenuItemProps {
   value: string
@@ -17,14 +17,12 @@ const props = defineProps<MenuRadioItemProps>()
 const emits = defineEmits<MenuRadioItemEmits>()
 
 const { value } = toRefs(props)
-const radioGroupContext = inject(MENU_RADIO_GROUP_INJECTION_KEY)
+const radioGroupContext = injectMenuRadioGroupContext()
 const checked = computed(
-  () => radioGroupContext?.modelValue.value === value?.value,
+  () => radioGroupContext.modelValue.value === value?.value,
 )
 
-provide(MENU_ITEM_INDICATOR_INJECTION_KEY, {
-  checked,
-})
+provideMenuItemIndicatorContext({ checked })
 </script>
 
 <template>
@@ -36,7 +34,7 @@ provide(MENU_ITEM_INDICATOR_INJECTION_KEY, {
     @select="
       async (event) => {
         emits('select', event);
-        radioGroupContext?.onValueChange(value);
+        radioGroupContext.onValueChange(value);
       }
     "
   >
diff --git a/packages/radix-vue/src/Menu/MenuRoot.vue b/packages/radix-vue/src/Menu/MenuRoot.vue
index b6f4b5ef0..aa8cce599 100644
--- a/packages/radix-vue/src/Menu/MenuRoot.vue
+++ b/packages/radix-vue/src/Menu/MenuRoot.vue
@@ -1,12 +1,14 @@
 <script lang="ts">
-export interface MenuContextValue {
+import { createContext } from '@/shared'
+
+export interface MenuContext {
   open: Ref<boolean>
   onOpenChange(open: boolean): void
   content: Ref<HTMLElement | undefined>
   onContentChange(content: HTMLElement | undefined): void
 }
 
-export interface MenuRootContextValue {
+export interface MenuRootContext {
   onClose(): void
   dir: Ref<Direction>
   isUsingKeyboardRef: Ref<boolean>
@@ -20,16 +22,16 @@ export interface MenuProps {
   modal?: boolean
 }
 
-export const MENU_INJECTION_KEY = Symbol() as InjectionKey<MenuContextValue>
-export const MENU_ROOT_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuRootContextValue>
+export const [injectMenuContext, provideMenuContext]
+  = createContext<MenuContext>(['MenuRoot', 'MenuSub'], 'MenuContext')
+
+export const [injectMenuRootContext, provideMenuRootContext]
+  = createContext<MenuRootContext>('MenuRoot')
 </script>
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
-  provide,
   ref,
   toRefs,
   watchEffect,
@@ -82,7 +84,7 @@ watchEffect((cleanupFn) => {
   })
 })
 
-provide(MENU_INJECTION_KEY, {
+provideMenuContext({
   open,
   onOpenChange: (value) => {
     open.value = value
@@ -93,7 +95,7 @@ provide(MENU_INJECTION_KEY, {
   },
 })
 
-provide(MENU_ROOT_INJECTION_KEY, {
+provideMenuRootContext({
   onClose: () => {
     open.value = false
   },
diff --git a/packages/radix-vue/src/Menu/MenuRootContentModal.vue b/packages/radix-vue/src/Menu/MenuRootContentModal.vue
index 6b1e55e0f..215a36323 100644
--- a/packages/radix-vue/src/Menu/MenuRootContentModal.vue
+++ b/packages/radix-vue/src/Menu/MenuRootContentModal.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import MenuContentImpl, {
   type MenuContentImplEmits,
   type MenuRootContentProps,
 } from './MenuContentImpl.vue'
-import { MENU_INJECTION_KEY } from './MenuRoot.vue'
+import { injectMenuContext } from './MenuRoot.vue'
 import { useEmitAsProps, useHideOthers } from '@/shared'
 import { usePrimitiveElement } from '@/Primitive'
 
@@ -12,7 +11,7 @@ const props = defineProps<MenuRootContentModalProps>()
 
 const emits = defineEmits<MenuRootContentModalEmits>()
 
-const context = inject(MENU_INJECTION_KEY)
+const menuContext = injectMenuContext()
 
 interface MenuRootContentModalProps extends MenuRootContentProps {}
 type MenuRootContentModalEmits = MenuContentImplEmits
@@ -27,10 +26,10 @@ useHideOthers(currentElement)
   <MenuContentImpl
     ref="primitiveElement"
     v-bind="{ ...props, ...emitsAsProps }"
-    :trap-focus="context?.open.value"
-    :disable-outside-pointer-events="context?.open.value"
+    :trap-focus="menuContext.open.value"
+    :disable-outside-pointer-events="menuContext.open.value"
     :disable-outside-scroll="true"
-    @dismiss="context?.onOpenChange(false)"
+    @dismiss="menuContext.onOpenChange(false)"
     @focus-outside.prevent="emits('focusOutside', $event)"
   >
     <slot />
diff --git a/packages/radix-vue/src/Menu/MenuRootContentNonModal.vue b/packages/radix-vue/src/Menu/MenuRootContentNonModal.vue
index d89737c0e..890bc01da 100644
--- a/packages/radix-vue/src/Menu/MenuRootContentNonModal.vue
+++ b/packages/radix-vue/src/Menu/MenuRootContentNonModal.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import MenuContentImpl, {
   type MenuContentImplEmits,
   type MenuRootContentProps,
 } from './MenuContentImpl.vue'
-import { MENU_INJECTION_KEY } from './MenuRoot.vue'
+import { injectMenuContext } from './MenuRoot.vue'
 import { useEmitAsProps } from '@/shared'
 
 const props = defineProps<MenuRootContentNonModalProps>()
 
 const emits = defineEmits<MenuRootContentModalEmits>()
 
-const context = inject(MENU_INJECTION_KEY)
+const menuContext = injectMenuContext()
 
 interface MenuRootContentNonModalProps extends MenuRootContentProps {}
 type MenuRootContentModalEmits = MenuContentImplEmits
@@ -25,7 +24,7 @@ const emitsAsProps = useEmitAsProps(emits)
     :trap-focus="false"
     :disable-outside-pointer-events="false"
     :disable-outside-scroll="false"
-    @dismiss="context?.onOpenChange(false)"
+    @dismiss="menuContext.onOpenChange(false)"
   >
     <slot />
   </MenuContentImpl>
diff --git a/packages/radix-vue/src/Menu/MenuSub.vue b/packages/radix-vue/src/Menu/MenuSub.vue
index 7255170a5..9d002fbf6 100644
--- a/packages/radix-vue/src/Menu/MenuSub.vue
+++ b/packages/radix-vue/src/Menu/MenuSub.vue
@@ -1,14 +1,16 @@
 <script lang="ts">
-export interface MenuSubContextValue {
+import { createContext, useId } from '@/shared'
+
+export interface MenuSubContext {
   contentId: string
   triggerId: string
   trigger: Ref<HTMLElement | undefined>
   onTriggerChange(trigger: HTMLElement | undefined): void
-  parentMenuContext?: MenuContextValue
+  parentMenuContext?: MenuContext
 }
 
-export const MENU_SUB_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuSubContextValue>
+export const [injectMenuSubContext, provideMenuSubContext]
+  = createContext<MenuSubContext>('MenuSub')
 
 export interface MenuSubProps {
   open?: boolean
@@ -17,17 +19,13 @@ export interface MenuSubProps {
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
-  inject,
-  provide,
   ref,
   watchEffect,
 } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { MENU_INJECTION_KEY, type MenuContextValue } from './MenuRoot.vue'
+import { type MenuContext, injectMenuContext, provideMenuContext } from './MenuRoot.vue'
 import { PopperRoot } from '@/Popper'
-import { useId } from '@/shared'
 
 const props = defineProps<MenuSubProps>()
 const emits = defineEmits<{
@@ -39,7 +37,7 @@ const open = useVModel(props, 'open', emits, {
   passive: true,
 })
 
-const parentMenuContext = inject(MENU_INJECTION_KEY)
+const parentMenuContext = injectMenuContext()
 const trigger = ref<HTMLElement>()
 const content = ref<HTMLElement>()
 
@@ -50,7 +48,7 @@ watchEffect((cleanupFn) => {
   cleanupFn(() => (open.value = false))
 })
 
-provide(MENU_INJECTION_KEY, {
+provideMenuContext({
   open,
   onOpenChange: (value) => {
     open.value = value
@@ -61,7 +59,7 @@ provide(MENU_INJECTION_KEY, {
   },
 })
 
-provide(MENU_SUB_INJECTION_KEY, {
+provideMenuSubContext({
   triggerId: useId(),
   contentId: useId(),
   trigger,
diff --git a/packages/radix-vue/src/Menu/MenuSubContent.vue b/packages/radix-vue/src/Menu/MenuSubContent.vue
index d01febf6a..d647dea11 100644
--- a/packages/radix-vue/src/Menu/MenuSubContent.vue
+++ b/packages/radix-vue/src/Menu/MenuSubContent.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import MenuContentImpl, {
   type MenuContentImplEmits,
   type MenuContentImplProps,
 } from './MenuContentImpl.vue'
-import { MENU_INJECTION_KEY, MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
-import { MENU_SUB_INJECTION_KEY } from './MenuSub.vue'
+import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
+import { injectMenuSubContext } from './MenuSub.vue'
 import { SUB_CLOSE_KEYS } from './utils'
 import { Presence } from '@/Presence'
 import { usePrimitiveElement } from '@/Primitive'
@@ -19,28 +18,28 @@ const emits = defineEmits<MenuSubContentEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(MENU_INJECTION_KEY)
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
-const subContext = inject(MENU_SUB_INJECTION_KEY)
+const menuContext = injectMenuContext()
+const rootContext = injectMenuRootContext()
+const menuSubContext = injectMenuSubContext()
 
 const { primitiveElement, currentElement: subContentElement }
   = usePrimitiveElement()
 </script>
 
 <template>
-  <Presence :present="context!.open.value">
+  <Presence :present="menuContext.open.value">
     <MenuContentImpl
       v-bind="forwarded"
-      :id="subContext!.contentId"
+      :id="menuSubContext.contentId"
       ref="primitiveElement"
-      :aria-labelledby="subContext!.triggerId"
+      :aria-labelledby="menuSubContext.triggerId"
       align="start"
-      :side="rootContext!.dir.value === 'rtl' ? 'left' : 'right'"
+      :side="rootContext.dir.value === 'rtl' ? 'left' : 'right'"
       :disable-outside-pointer-events="false"
       :disable-outside-scroll="false"
       :trap-focus="false"
       @open-auto-focus="(event) => {
-        if (rootContext!.isUsingKeyboardRef.value) subContentElement?.focus();
+        if (rootContext.isUsingKeyboardRef.value) subContentElement?.focus();
         // event.preventDefault();
       }"
       @close-auto-focus.prevent
@@ -49,13 +48,13 @@ const { primitiveElement, currentElement: subContentElement }
           if (event.defaultPrevented) return;
           // We prevent closing when the trigger is focused to avoid triggering a re-open animation
           // on pointer interaction.
-          if (event.target !== subContext!.trigger.value)
-            context!.onOpenChange(false);
+          if (event.target !== menuSubContext.trigger.value)
+            menuContext.onOpenChange(false);
         }
       "
       @escape-key-down="
         (event) => {
-          rootContext?.onClose();
+          rootContext.onClose();
           // ensure pressing escape in submenu doesn't escape full screen mode
           event.preventDefault();
         }
@@ -63,11 +62,11 @@ const { primitiveElement, currentElement: subContentElement }
       @keydown="(event: KeyboardEvent) => {
         // Submenu key events bubble through portals. We only care about keys in this menu.
         const isKeyDownInside = (event.currentTarget as HTMLElement)?.contains(event.target as HTMLElement);
-        const isCloseKey = SUB_CLOSE_KEYS[rootContext!.dir.value].includes(event.key);
+        const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir.value].includes(event.key);
         if (isKeyDownInside && isCloseKey) {
-          context!.onOpenChange(false);
+          menuContext.onOpenChange(false);
           // We focus manually because we prevented it in `onCloseAutoFocus`
-          subContext!.trigger.value?.focus();
+          menuSubContext.trigger.value?.focus();
           // prevent window from scrolling
           event.preventDefault();
         }
diff --git a/packages/radix-vue/src/Menu/MenuSubTrigger.vue b/packages/radix-vue/src/Menu/MenuSubTrigger.vue
index 7cc054f59..9742e8b49 100644
--- a/packages/radix-vue/src/Menu/MenuSubTrigger.vue
+++ b/packages/radix-vue/src/Menu/MenuSubTrigger.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, inject, nextTick, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onUnmounted, ref } from 'vue'
 import MenuItemImpl, { type MenuItemImplProps } from './MenuItemImpl.vue'
-import { MENU_INJECTION_KEY, MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
-import { MENU_SUB_INJECTION_KEY } from './MenuSub.vue'
-import { MENU_CONTENT_INJECTION_KEY } from './MenuContentImpl.vue'
+import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
+import { injectMenuSubContext } from './MenuSub.vue'
+import { injectMenuContentContext } from './MenuContentImpl.vue'
 import MenuAnchor from './MenuAnchor.vue'
 import { SUB_OPEN_KEYS, type Side, getOpenState, isMouseEvent } from './utils'
 
@@ -11,14 +11,14 @@ export interface MenuSubTriggerProps extends MenuItemImplProps {}
 
 const props = defineProps<MenuSubTriggerProps>()
 
-const context = inject(MENU_INJECTION_KEY)
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
-const subContext = inject(MENU_SUB_INJECTION_KEY)
-const contentContext = inject(MENU_CONTENT_INJECTION_KEY)
+const menuContext = injectMenuContext()
+const rootContext = injectMenuRootContext()
+const subContext = injectMenuSubContext()
+const contentContext = injectMenuContentContext()
 
 const openTimerRef = ref<number | null>(null)
 const pointerGraceTimerRef = computed(
-  () => contentContext?.pointerGraceTimerRef.value,
+  () => contentContext.pointerGraceTimerRef.value,
 )
 
 function clearOpenTimer() {
@@ -34,12 +34,12 @@ onUnmounted(() => {
 function handlePointerMove(event: PointerEvent) {
   if (!isMouseEvent(event))
     return
-  contentContext!.onItemEnter(event)
-  context!.onOpenChange(true)
+  contentContext.onItemEnter(event)
+  menuContext.onOpenChange(true)
   if (event.defaultPrevented)
     return
-  if (!props.disabled && !context?.open.value && !openTimerRef.value) {
-    contentContext!.onPointerGraceIntentChange(null)
+  if (!props.disabled && !menuContext.open.value && !openTimerRef.value) {
+    contentContext.onPointerGraceIntentChange(null)
     openTimerRef.value = window.setTimeout(() => {
       clearOpenTimer()
     }, 100)
@@ -51,18 +51,18 @@ function handlePointerLeave(event: PointerEvent) {
     return
   clearOpenTimer()
 
-  const contentRect = context!.content.value?.getBoundingClientRect()
+  const contentRect = menuContext.content.value?.getBoundingClientRect()
 
   if (contentRect) {
     // TODO: make sure to update this when we change positioning logic
-    const side = context!.content.value?.dataset.side as Side
+    const side = menuContext.content.value?.dataset.side as Side
 
     const rightSide = side === 'right'
     const bleed = rightSide ? -5 : +5
     const contentNearEdge = contentRect[rightSide ? 'left' : 'right']
     const contentFarEdge = contentRect[rightSide ? 'right' : 'left']
 
-    contentContext!.onPointerGraceIntentChange({
+    contentContext.onPointerGraceIntentChange({
       area: [
         // Apply a bleed on clientX to ensure that our exit point is
         // consistently within polygon bounds
@@ -76,32 +76,32 @@ function handlePointerLeave(event: PointerEvent) {
     })
 
     window.clearTimeout(pointerGraceTimerRef.value)
-    contentContext!.pointerGraceTimerRef.value = window.setTimeout(
-      () => contentContext!.onPointerGraceIntentChange(null),
+    contentContext.pointerGraceTimerRef.value = window.setTimeout(
+      () => contentContext.onPointerGraceIntentChange(null),
       300,
     )
   }
   else {
-    contentContext!.onTriggerLeave(event)
+    contentContext.onTriggerLeave(event)
     if (event.defaultPrevented)
       return
 
     // There's 100ms where the user may leave an item before the submenu was opened.
-    contentContext!.onPointerGraceIntentChange(null)
+    contentContext.onPointerGraceIntentChange(null)
   }
 }
 
 async function handleKeyDown(event: KeyboardEvent) {
-  const isTypingAhead = contentContext!.searchRef.value !== ''
+  const isTypingAhead = contentContext.searchRef.value !== ''
   if (props.disabled || (isTypingAhead && event.key === ' '))
     return
-  if (SUB_OPEN_KEYS[rootContext!.dir.value].includes(event.key)) {
-    context!.onOpenChange(true)
+  if (SUB_OPEN_KEYS[rootContext.dir.value].includes(event.key)) {
+    menuContext.onOpenChange(true)
 
     await nextTick()
     // The trigger may hold focus if opened via pointer interaction
     // so we ensure content is given focus again when switching to keyboard.
-    context!.content.value?.focus()
+    menuContext.content.value?.focus()
     // prevent window from scrolling
     event.preventDefault()
   }
@@ -119,7 +119,7 @@ async function handleKeyDown(event: KeyboardEvent) {
 <template>
   <MenuAnchor as-child>
     <MenuItemImpl
-      :id="subContext!.triggerId"
+      :id="subContext.triggerId"
       :ref="
         (vnode) => {
           // @ts-ignore
@@ -127,9 +127,9 @@ async function handleKeyDown(event: KeyboardEvent) {
         }
       "
       aria-haspopup="menu"
-      :aria-expanded="context!.open.value"
-      :aria-controls="subContext?.contentId"
-      :data-state="getOpenState(context!.open.value)"
+      :aria-expanded="menuContext.open.value"
+      :aria-controls="subContext.contentId"
+      :data-state="getOpenState(menuContext.open.value)"
       @click="
         async (event) => {
           if (props.disabled || event.defaultPrevented) return;
@@ -139,7 +139,7 @@ async function handleKeyDown(event: KeyboardEvent) {
            * between separate submenus.
            */
           event.currentTarget.focus();
-          if (!context!.open.value) context!.onOpenChange(true);
+          if (!menuContext.open.value) menuContext.onOpenChange(true);
         }
       "
       @pointermove="handlePointerMove"
diff --git a/packages/radix-vue/src/Menubar/MenubarContent.vue b/packages/radix-vue/src/Menubar/MenubarContent.vue
index 5492ea1f5..cb2678ceb 100644
--- a/packages/radix-vue/src/Menubar/MenubarContent.vue
+++ b/packages/radix-vue/src/Menubar/MenubarContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { MENUBAR_INJECTION_KEY } from './MenubarRoot.vue'
-import { MENUBAR_MENU_INJECTION_KEY } from './MenubarMenu.vue'
+import { ref } from 'vue'
+import { injectMenubarRootContext } from './MenubarRoot.vue'
+import { injectMenubarMenuContext } from './MenubarMenu.vue'
 import { MenuContent, type MenuContentEmits, type MenuContentProps } from '@/Menu'
 import { useCollection, useForwardPropsEmits } from '@/shared'
 import { wrapArray } from '@/shared/useTypeahead'
@@ -15,8 +15,8 @@ const props = withDefaults(defineProps<MenubarContentProps>(), {
 const emits = defineEmits<MenubarContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(MENUBAR_INJECTION_KEY)
-const menuContext = inject(MENUBAR_MENU_INJECTION_KEY)
+const rootContext = injectMenubarRootContext()
+const menuContext = injectMenubarMenuContext()
 
 const { injectCollection } = useCollection('menubar')
 const collections = injectCollection()
@@ -29,7 +29,7 @@ function handleArrowNavigation(event: KeyboardEvent) {
     'data-radix-menubar-subtrigger',
   )
 
-  const prevMenuKey = context?.dir.value === 'rtl' ? 'ArrowRight' : 'ArrowLeft'
+  const prevMenuKey = rootContext.dir.value === 'rtl' ? 'ArrowRight' : 'ArrowLeft'
   const isPrevKey = prevMenuKey === event.key
   const isNextKey = !isPrevKey
 
@@ -41,22 +41,22 @@ function handleArrowNavigation(event: KeyboardEvent) {
   if (isPrevKey)
     candidateValues.reverse()
 
-  const currentIndex = candidateValues.indexOf(menuContext?.value)
+  const currentIndex = candidateValues.indexOf(menuContext.value)
 
-  candidateValues = context?.loop.value
+  candidateValues = rootContext.loop.value
     ? wrapArray(candidateValues, currentIndex + 1)
     : candidateValues.slice(currentIndex + 1)
 
   const [nextValue] = candidateValues
   if (nextValue)
-    context?.onMenuOpen(nextValue)
+    rootContext.onMenuOpen(nextValue)
 }
 </script>
 
 <template>
   <MenuContent
-    :id="menuContext?.contentId"
-    :aria-labelledby="menuContext?.triggerId"
+    :id="menuContext.contentId"
+    :aria-labelledby="menuContext.triggerId"
     data-radix-menubar-content=""
     v-bind="forwarded"
     :style="{
@@ -70,9 +70,9 @@ function handleArrowNavigation(event: KeyboardEvent) {
       '--radix-menubar-trigger-height': 'var(--radix-popper-anchor-height)',
     }"
     @close-auto-focus="(event) => {
-      const menubarOpen = Boolean(context?.modelValue.value);
+      const menubarOpen = Boolean(rootContext.modelValue.value);
       if (!menubarOpen && !hasInteractedOutsideRef) {
-        menuContext!.triggerElement.value?.focus();
+        menuContext.triggerElement.value?.focus();
       }
 
       hasInteractedOutsideRef = false;
@@ -91,12 +91,12 @@ function handleArrowNavigation(event: KeyboardEvent) {
     "
     @open-auto-focus="
       (event) => {
-        if (!menuContext?.wasKeyboardTriggerOpenRef.value)
+        if (!menuContext.wasKeyboardTriggerOpenRef.value)
           event.preventDefault();
       }
     "
     @entry-focus="(event) => {
-      if (!menuContext?.wasKeyboardTriggerOpenRef.value) event.preventDefault()
+      if (!menuContext.wasKeyboardTriggerOpenRef.value) event.preventDefault()
     }"
     @keydown.arrow-right.arrow-left="handleArrowNavigation"
   >
diff --git a/packages/radix-vue/src/Menubar/MenubarMenu.vue b/packages/radix-vue/src/Menubar/MenubarMenu.vue
index 2f433542b..37fe214a4 100644
--- a/packages/radix-vue/src/Menubar/MenubarMenu.vue
+++ b/packages/radix-vue/src/Menubar/MenubarMenu.vue
@@ -1,44 +1,44 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext, useId } from '@/shared'
 
 export interface MenubarMenuProps {
   value?: string
 }
 
-export const MENUBAR_MENU_INJECTION_KEY
-  = Symbol() as InjectionKey<MenubarMenuProvideValue>
-
-interface MenubarMenuProvideValue {
+type MenubarMenuContext = {
   value: string
   triggerId: string
   triggerElement: Ref<HTMLElement | undefined>
   contentId: string
   wasKeyboardTriggerOpenRef: Ref<boolean>
 }
+
+export const [injectMenubarMenuContext, provideMenubarMenuContext]
+  = createContext<MenubarMenuContext>('MenubarMenu')
 </script>
 
 <script setup lang="ts">
-import { computed, inject, provide, ref, watch } from 'vue'
-import { MENUBAR_INJECTION_KEY } from './MenubarRoot.vue'
-import { useId } from '@/shared'
+import { computed, ref, watch } from 'vue'
+import { injectMenubarRootContext } from './MenubarRoot.vue'
 import { MenuRoot } from '@/Menu'
 
 const props = defineProps<MenubarMenuProps>()
 
 const value = props.value ?? useId()
-const context = inject(MENUBAR_INJECTION_KEY)
+const rootContext = injectMenubarRootContext()
 
 const triggerElement = ref<HTMLElement>()
 const wasKeyboardTriggerOpenRef = ref(false)
 
-const open = computed(() => context?.modelValue.value === value)
+const open = computed(() => rootContext.modelValue.value === value)
 
 watch(open, () => {
   if (!open.value)
     wasKeyboardTriggerOpenRef.value = false
 })
 
-provide(MENUBAR_MENU_INJECTION_KEY, {
+provideMenubarMenuContext({
   value,
   triggerElement,
   triggerId: value,
@@ -51,12 +51,12 @@ provide(MENUBAR_MENU_INJECTION_KEY, {
   <MenuRoot
     :open="open"
     :modal="false"
-    :dir="context?.dir.value"
+    :dir="rootContext.dir.value"
     @update:open="
       (value) => {
         // Menu only calls `@update:open` when dismissing so we
         // want to close our MenuBar based on the same events.
-        if (!value) context?.onMenuClose();
+        if (!value) rootContext.onMenuClose();
       }
     "
   >
diff --git a/packages/radix-vue/src/Menubar/MenubarRoot.vue b/packages/radix-vue/src/Menubar/MenubarRoot.vue
index 12c7f497a..53a068bd7 100644
--- a/packages/radix-vue/src/Menubar/MenubarRoot.vue
+++ b/packages/radix-vue/src/Menubar/MenubarRoot.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { Direction } from '../shared/types'
-import { useCollection } from '@/shared'
+import { createContext, useCollection } from '@/shared'
 
 export interface MenubarRootProps {
   modelValue?: string
@@ -13,10 +13,7 @@ export type MenubarRootEmits = {
   'update:modelValue': [value: boolean]
 }
 
-export const MENUBAR_INJECTION_KEY
-  = Symbol() as InjectionKey<MenubarContextValue>
-
-export interface MenubarContextValue {
+export interface MenubarRootContext {
   modelValue: Ref<string>
   dir: Ref<Direction>
   loop: Ref<boolean>
@@ -24,10 +21,13 @@ export interface MenubarContextValue {
   onMenuClose(): void
   onMenuToggle(value: string): void
 }
+
+export const [injectMenubarRootContext, provideMenubarRootContext]
+  = createContext<MenubarRootContext>('MenubarRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { RovingFocusGroup } from '@/RovingFocus'
 import { useVModel } from '@vueuse/core'
@@ -50,7 +50,7 @@ const modelValue = useVModel(props, 'modelValue', emit, {
 const currentTabStopId = ref<string | null>(null)
 
 const { dir, loop } = toRefs(props)
-provide(MENUBAR_INJECTION_KEY, {
+provideMenubarRootContext({
   modelValue,
   dir,
   loop,
diff --git a/packages/radix-vue/src/Menubar/MenubarSubContent.vue b/packages/radix-vue/src/Menubar/MenubarSubContent.vue
index af1629ae2..6a53ced48 100644
--- a/packages/radix-vue/src/Menubar/MenubarSubContent.vue
+++ b/packages/radix-vue/src/Menubar/MenubarSubContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { MENUBAR_INJECTION_KEY } from './MenubarRoot.vue'
-import { MENUBAR_MENU_INJECTION_KEY } from './MenubarMenu.vue'
+import { injectMenubarRootContext } from './MenubarRoot.vue'
+import { injectMenubarMenuContext } from './MenubarMenu.vue'
 import {
   MenuSubContent,
   type MenuSubContentEmits,
@@ -19,8 +18,8 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 const { injectCollection } = useCollection('menubar')
 
-const context = inject(MENUBAR_INJECTION_KEY)
-const menuContext = inject(MENUBAR_MENU_INJECTION_KEY)
+const rootContext = injectMenubarRootContext()
+const menuContext = injectMenubarMenuContext()
 const collections = injectCollection()
 
 function handleArrowNavigation(event: KeyboardEvent) {
@@ -35,15 +34,15 @@ function handleArrowNavigation(event: KeyboardEvent) {
 
   let candidateValues = collections.value.map(i => i.dataset.value)
 
-  const currentIndex = candidateValues.indexOf(menuContext?.value)
+  const currentIndex = candidateValues.indexOf(menuContext.value)
 
-  candidateValues = context?.loop.value
+  candidateValues = rootContext.loop.value
     ? wrapArray(candidateValues, currentIndex + 1)
     : candidateValues.slice(currentIndex + 1)
 
   const [nextValue] = candidateValues
   if (nextValue)
-    context?.onMenuOpen(nextValue)
+    rootContext.onMenuOpen(nextValue)
 }
 </script>
 
diff --git a/packages/radix-vue/src/Menubar/MenubarTrigger.vue b/packages/radix-vue/src/Menubar/MenubarTrigger.vue
index 980169b4f..e0f7a1a3e 100644
--- a/packages/radix-vue/src/Menubar/MenubarTrigger.vue
+++ b/packages/radix-vue/src/Menubar/MenubarTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue'
-import { MENUBAR_INJECTION_KEY } from './MenubarRoot.vue'
-import { MENUBAR_MENU_INJECTION_KEY } from './MenubarMenu.vue'
+import { computed, onMounted, ref } from 'vue'
+import { injectMenubarRootContext } from './MenubarRoot.vue'
+import { injectMenubarMenuContext } from './MenubarMenu.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -17,18 +17,18 @@ export interface MenubarTriggerProps extends PrimitiveProps {
 withDefaults(defineProps<MenubarTriggerProps>(), {
   as: 'button',
 })
-const context = inject(MENUBAR_INJECTION_KEY)
-const menuContext = inject(MENUBAR_MENU_INJECTION_KEY)
+const rootContext = injectMenubarRootContext()
+const menuContext = injectMenubarMenuContext()
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
 
 const isFocused = ref(false)
 
-const open = computed(() => context?.modelValue.value === menuContext?.value)
+const open = computed(() => rootContext.modelValue.value === menuContext.value)
 
 onMounted(() => {
-  menuContext!.triggerElement = triggerElement
+  menuContext.triggerElement = triggerElement
 })
 </script>
 
@@ -36,49 +36,49 @@ onMounted(() => {
   <RovingFocusItem
     as-child
     :focusable="!disabled"
-    :tab-stop-id="menuContext?.value"
+    :tab-stop-id="menuContext.value"
   >
     <MenuAnchor as-child>
       <Primitive
-        :id="menuContext?.triggerId"
+        :id="menuContext.triggerId"
         ref="primitiveElement"
         :as="as"
         :type="as === 'button' ? 'button' : undefined"
         role="menuitem"
         aria-haspopup="menu"
         :aria-expanded="open"
-        :aria-controls="open ? menuContext?.contentId : undefined"
+        :aria-controls="open ? menuContext.contentId : undefined"
         :data-highlighted="isFocused ? '' : undefined"
         :data-state="open ? 'open' : 'closed'"
         :data-disabled="disabled ? '' : undefined"
         :disabled="disabled"
-        :data-value="menuContext?.value"
+        :data-value="menuContext.value"
         data-radix-vue-collection-item
         @pointerdown="(event) => {
           // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
           // but not when the control key is pressed (avoiding MacOS right click)
           if (!disabled && event.button === 0 && event.ctrlKey === false) {
-            context!.onMenuOpen(menuContext!.value);
+            rootContext.onMenuOpen(menuContext.value);
             // prevent trigger focusing when opening
             // this allows the content to be given focus without competition
             if (!open) event.preventDefault();
           }
         }"
         @pointerenter="() => {
-          const menubarOpen = Boolean(context!.modelValue.value);
+          const menubarOpen = Boolean(rootContext.modelValue.value);
           if (menubarOpen && !open) {
-            context!.onMenuOpen(menuContext!.value);
+            rootContext.onMenuOpen(menuContext.value);
             triggerElement?.focus()
           }
         }"
         @keydown.enter.space.arrow-down="(event) => {
           if (disabled) return;
-          if (['Enter', ' '].includes(event.key)) context?.onMenuToggle(menuContext!.value);
-          if (event.key === 'ArrowDown') context?.onMenuOpen(menuContext!.value);
+          if (['Enter', ' '].includes(event.key)) rootContext.onMenuToggle(menuContext.value);
+          if (event.key === 'ArrowDown') rootContext.onMenuOpen(menuContext.value);
           // prevent keydown from scrolling window / first focused item to execute
           // that keydown (inadvertently closing the menu)
           if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {
-            menuContext!.wasKeyboardTriggerOpenRef.value = true;
+            menuContext.wasKeyboardTriggerOpenRef.value = true;
             event.preventDefault();
           }
         }"
diff --git a/packages/radix-vue/src/Pagination/PaginationFirst.vue b/packages/radix-vue/src/Pagination/PaginationFirst.vue
index 23d0ff6ce..059afd820 100644
--- a/packages/radix-vue/src/Pagination/PaginationFirst.vue
+++ b/packages/radix-vue/src/Pagination/PaginationFirst.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationFirstProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<PaginationFirstProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 </script>
 
 <template>
@@ -14,8 +13,8 @@ const context = inject(PAGINATION_CONTEXT_VALUE)
     v-bind="props"
     aria-label="First Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="context?.page.value === 1 || context?.disabled?.value"
-    @click="context?.onPageChange(1)"
+    :disabled="rootContext.page.value === 1 || rootContext.disabled.value"
+    @click="rootContext.onPageChange(1)"
   >
     <slot>First page</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationLast.vue b/packages/radix-vue/src/Pagination/PaginationLast.vue
index 49d7a309e..e549ad928 100644
--- a/packages/radix-vue/src/Pagination/PaginationLast.vue
+++ b/packages/radix-vue/src/Pagination/PaginationLast.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationLastProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<PaginationLastProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 </script>
 
 <template>
@@ -14,8 +13,8 @@ const context = inject(PAGINATION_CONTEXT_VALUE)
     v-bind="props"
     aria-label="Last Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="context?.page.value === context?.pageCount.value || context?.disabled?.value"
-    @click="context?.onPageChange(context.pageCount.value)"
+    :disabled="rootContext.page.value === rootContext.pageCount.value || rootContext.disabled.value"
+    @click="rootContext.onPageChange(rootContext.pageCount.value)"
   >
     <slot>Last page</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationList.vue b/packages/radix-vue/src/Pagination/PaginationList.vue
index 0fe508fd1..18dd5c965 100644
--- a/packages/radix-vue/src/Pagination/PaginationList.vue
+++ b/packages/radix-vue/src/Pagination/PaginationList.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { computed, inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { computed } from 'vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 import { getRange, transform } from './utils'
 
 export interface PaginationListProps extends PrimitiveProps { }
 const props = defineProps<PaginationListProps>()
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 
 const transformedRange = computed(() => {
   return transform(
     getRange(
-      context!.page.value, context!.pageCount.value, context!.siblingCount.value, context!.showEdges.value,
+      rootContext.page.value, rootContext.pageCount.value, rootContext.siblingCount.value, rootContext.showEdges.value,
     ),
   )
 })
diff --git a/packages/radix-vue/src/Pagination/PaginationListItem.vue b/packages/radix-vue/src/Pagination/PaginationListItem.vue
index 7c1864a8a..e429958f5 100644
--- a/packages/radix-vue/src/Pagination/PaginationListItem.vue
+++ b/packages/radix-vue/src/Pagination/PaginationListItem.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { computed, inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { computed } from 'vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationListItemProps extends PrimitiveProps {
   value: number
 }
 const props = withDefaults(defineProps<PaginationListItemProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
-const isSelected = computed(() => context?.page.value === props.value)
+const rootContext = injectPaginationRootContext()
+const isSelected = computed(() => rootContext.page.value === props.value)
 </script>
 
 <template>
@@ -19,9 +19,9 @@ const isSelected = computed(() => context?.page.value === props.value)
     :aria-label="`Page ${value}`"
     :aria-current="isSelected ? 'page' : undefined"
     :data-selected="isSelected ? 'true' : undefined"
-    :disabled="context?.disabled?.value"
+    :disabled="rootContext.disabled.value"
     :type="as === 'button' ? 'button' : undefined"
-    @click="context?.onPageChange(value)"
+    @click="rootContext.onPageChange(value)"
   >
     <slot>{{ value }}</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationNext.vue b/packages/radix-vue/src/Pagination/PaginationNext.vue
index 7c52d8da9..9efb9ae93 100644
--- a/packages/radix-vue/src/Pagination/PaginationNext.vue
+++ b/packages/radix-vue/src/Pagination/PaginationNext.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationNextProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<PaginationNextProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 </script>
 
 <template>
@@ -14,8 +13,8 @@ const context = inject(PAGINATION_CONTEXT_VALUE)
     v-bind="props"
     aria-label="Next Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="context?.page.value === context?.pageCount.value || context?.disabled?.value"
-    @click="context?.onPageChange(context.page.value + 1)"
+    :disabled="rootContext.page.value === rootContext.pageCount.value || rootContext.disabled.value"
+    @click="rootContext.onPageChange(rootContext.page.value + 1)"
   >
     <slot>Next page</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationPrev.vue b/packages/radix-vue/src/Pagination/PaginationPrev.vue
index aa874b454..467c2f1cf 100644
--- a/packages/radix-vue/src/Pagination/PaginationPrev.vue
+++ b/packages/radix-vue/src/Pagination/PaginationPrev.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationPrevProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<PaginationPrevProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 </script>
 
 <template>
@@ -14,8 +13,8 @@ const context = inject(PAGINATION_CONTEXT_VALUE)
     v-bind="props"
     aria-label="Previous Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="context?.page.value === 1 || context?.disabled?.value"
-    @click="context?.onPageChange(context.page.value - 1)"
+    :disabled="rootContext.page.value === 1 || rootContext.disabled?.value"
+    @click="rootContext.onPageChange(rootContext.page.value - 1)"
   >
     <slot>Prev page</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationRoot.vue b/packages/radix-vue/src/Pagination/PaginationRoot.vue
index 1c36017f3..e61a7083e 100644
--- a/packages/radix-vue/src/Pagination/PaginationRoot.vue
+++ b/packages/radix-vue/src/Pagination/PaginationRoot.vue
@@ -1,5 +1,7 @@
 <script lang="ts">
-interface PaginationRootContextValue {
+import { createContext } from '@/shared'
+
+type PaginationRootContext = {
   page: Ref<number>
   onPageChange: (value: number) => void
   pageCount: Ref<number>
@@ -8,14 +10,15 @@ interface PaginationRootContextValue {
   showEdges: Ref<boolean>
 }
 
-export const PAGINATION_CONTEXT_VALUE = Symbol() as InjectionKey<PaginationRootContextValue>
+export const [injectPaginationRootContext, providePaginationRootContext]
+  = createContext<PaginationRootContext>('PaginationRoot')
 </script>
 
 <script setup lang="ts">
 import { Primitive } from '@/Primitive'
 import type { PrimitiveProps } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
-import { type InjectionKey, type Ref, computed, provide, toRefs } from 'vue'
+import { type Ref, computed, toRefs } from 'vue'
 
 export interface PaginationRootProps extends PrimitiveProps {
   page?: number
@@ -49,7 +52,7 @@ const page = useVModel(props, 'page', emits, {
 
 const pageCount = computed(() => Math.ceil(props.total / props.itemsPerPage))
 
-provide(PAGINATION_CONTEXT_VALUE, {
+providePaginationRootContext({
   page,
   onPageChange(value) {
     page.value = value
diff --git a/packages/radix-vue/src/Popover/PopoverAnchor.vue b/packages/radix-vue/src/Popover/PopoverAnchor.vue
index 221e25e4d..d4ff7e0a7 100644
--- a/packages/radix-vue/src/Popover/PopoverAnchor.vue
+++ b/packages/radix-vue/src/Popover/PopoverAnchor.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { inject, onBeforeMount, onUnmounted } from 'vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { onBeforeMount, onUnmounted } from 'vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { PopperAnchor, type PopperAnchorProps } from '@/Popper'
 
 export interface PopoverAnchorProps extends PopperAnchorProps {}
 const props = defineProps<PopoverAnchorProps>()
 
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 
 onBeforeMount(() => {
-  context!.hasCustomAnchor.value = true
+  rootContext.hasCustomAnchor.value = true
 })
 onUnmounted(() => {
-  context!.hasCustomAnchor.value = false
+  rootContext.hasCustomAnchor.value = false
 })
 </script>
 
diff --git a/packages/radix-vue/src/Popover/PopoverClose.vue b/packages/radix-vue/src/Popover/PopoverClose.vue
index e3a094786..cb9aafe75 100644
--- a/packages/radix-vue/src/Popover/PopoverClose.vue
+++ b/packages/radix-vue/src/Popover/PopoverClose.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import {
-  POPOVER_INJECTION_KEY,
-  type PopoverProvideValue,
+  injectPopoverRootContext,
 } from './PopoverRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
@@ -10,7 +8,7 @@ const props = withDefaults(defineProps<PopoverCloseProps>(), {
   as: 'button',
 })
 
-const context = inject<PopoverProvideValue>(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 
 export interface PopoverCloseProps extends PrimitiveProps {}
 </script>
@@ -20,7 +18,7 @@ export interface PopoverCloseProps extends PrimitiveProps {}
     :type="as === 'button' ? 'button' : undefined"
     :as="as"
     :as-child="props.asChild"
-    @click="context?.onOpenChange(false)"
+    @click="rootContext.onOpenChange(false)"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Popover/PopoverContent.vue b/packages/radix-vue/src/Popover/PopoverContent.vue
index 844bc938d..bbd727e45 100644
--- a/packages/radix-vue/src/Popover/PopoverContent.vue
+++ b/packages/radix-vue/src/Popover/PopoverContent.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import PopoverContentModal from './PopoverContentModal.vue'
 import PopoverContentNonModal from './PopoverContentNonModal.vue'
 import {
   type PopoverContentImplEmits,
   type PopoverContentImplProps,
 } from './PopoverContentImpl.vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { useForwardPropsEmits } from '@/shared'
 import { Presence } from '@/Presence'
 
@@ -22,15 +21,15 @@ export type PopoverContentEmits = PopoverContentImplEmits
 const props = defineProps<PopoverContentProps>()
 const emits = defineEmits<PopoverContentEmits>()
 
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 
 const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <Presence :present="forceMount || context!.open.value">
+  <Presence :present="forceMount || rootContext.open.value">
     <PopoverContentModal
-      v-if="context?.modal.value"
+      v-if="rootContext.modal.value"
       v-bind="forwarded"
     >
       <slot />
diff --git a/packages/radix-vue/src/Popover/PopoverContentImpl.vue b/packages/radix-vue/src/Popover/PopoverContentImpl.vue
index ae714de72..e057c0ea9 100644
--- a/packages/radix-vue/src/Popover/PopoverContentImpl.vue
+++ b/packages/radix-vue/src/Popover/PopoverContentImpl.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { PopperContent, type PopperContentProps } from '@/Popper'
 import {
   DismissableLayer,
@@ -38,7 +37,7 @@ const emits = defineEmits<PopoverContentImplEmits>()
 
 const forwarded = useForwardProps(props)
 
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 useFocusGuards()
 </script>
 
@@ -57,12 +56,12 @@ useFocusGuards()
       @interact-outside="emits('interactOutside', $event)"
       @escape-key-down="emits('escapeKeyDown', $event)"
       @focus-outside="emits('focusOutside', $event)"
-      @dismiss="context?.onOpenChange(false)"
+      @dismiss="rootContext.onOpenChange(false)"
     >
       <PopperContent
         v-bind="forwarded"
-        :id="context?.contentId"
-        :data-state="context?.open.value ? 'open' : 'closed'"
+        :id="rootContext.contentId"
+        :data-state="rootContext.open.value ? 'open' : 'closed'"
         role="dialog"
         :style="{
           '--radix-popover-content-transform-origin':
diff --git a/packages/radix-vue/src/Popover/PopoverContentModal.vue b/packages/radix-vue/src/Popover/PopoverContentModal.vue
index c2743476a..d80bf6489 100644
--- a/packages/radix-vue/src/Popover/PopoverContentModal.vue
+++ b/packages/radix-vue/src/Popover/PopoverContentModal.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { ref } from 'vue'
 import PopoverContentImpl, {
   type PopoverContentImplEmits,
   type PopoverContentImplProps,
 } from './PopoverContentImpl.vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { useBodyScrollLock, useForwardPropsEmits, useHideOthers } from '@/shared'
 import { usePrimitiveElement } from '@/Primitive'
 
 const props = defineProps<PopoverContentImplProps>()
 const emits = defineEmits<PopoverContentImplEmits>()
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 const isRightClickOutsideRef = ref(false)
 
 useBodyScrollLock(true)
@@ -25,13 +25,13 @@ useHideOthers(currentElement)
   <PopoverContentImpl
     ref="primitiveElement"
     v-bind="forwarded"
-    :trap-focus="context?.open.value"
+    :trap-focus="rootContext.open.value"
     disable-outside-pointer-events
     @close-auto-focus.prevent="
       (event) => {
         emits('closeAutoFocus', event);
 
-        if (!isRightClickOutsideRef) context?.triggerElement.value?.focus();
+        if (!isRightClickOutsideRef) rootContext.triggerElement.value?.focus();
       }
     "
     @pointer-down-outside="
diff --git a/packages/radix-vue/src/Popover/PopoverContentNonModal.vue b/packages/radix-vue/src/Popover/PopoverContentNonModal.vue
index 424589f7f..170fef002 100644
--- a/packages/radix-vue/src/Popover/PopoverContentNonModal.vue
+++ b/packages/radix-vue/src/Popover/PopoverContentNonModal.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { ref } from 'vue'
 import PopoverContentImpl, {
   type PopoverContentImplEmits,
   type PopoverContentImplProps,
 } from './PopoverContentImpl.vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { useForwardPropsEmits } from '@/shared'
 
 const props = defineProps<PopoverContentImplProps>()
 const emits = defineEmits<PopoverContentImplEmits>()
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 const hasInteractedOutsideRef = ref(false)
 const hasPointerDownOutsideRef = ref(false)
 
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(props, emits)
         emits('closeAutoFocus', event);
 
         if (!event.defaultPrevented) {
-          if (!hasInteractedOutsideRef) context?.triggerElement.value?.focus();
+          if (!hasInteractedOutsideRef) rootContext.triggerElement.value?.focus();
           // Always prevent auto focus because we either focus manually or want user agent focus
           event.preventDefault();
         }
@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(props, emits)
         // As the trigger is already setup to close, without doing so would
         // cause it to close and immediately open.
         const target = event.target as HTMLElement;
-        const targetIsTrigger = context?.triggerElement.value?.contains(target);
+        const targetIsTrigger = rootContext.triggerElement.value?.contains(target);
         if (targetIsTrigger) event.preventDefault();
 
         // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
diff --git a/packages/radix-vue/src/Popover/PopoverRoot.vue b/packages/radix-vue/src/Popover/PopoverRoot.vue
index b7be4cba1..994fc2da7 100644
--- a/packages/radix-vue/src/Popover/PopoverRoot.vue
+++ b/packages/radix-vue/src/Popover/PopoverRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
-import { useId } from '@/shared'
+import type { Ref } from 'vue'
+import { createContext, useId } from '@/shared'
 
 export interface PopoverRootProps {
   /**
@@ -22,10 +22,7 @@ export type PopoverRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const POPOVER_INJECTION_KEY
-  = Symbol() as InjectionKey<PopoverProvideValue>
-
-export interface PopoverProvideValue {
+export interface PopoverRootContext {
   triggerElement: Ref<HTMLElement | undefined>
   contentId: string
   open: Ref<boolean>
@@ -34,10 +31,13 @@ export interface PopoverProvideValue {
   onOpenToggle(): void
   hasCustomAnchor: Ref<boolean>
 }
+
+export const [injectPopoverRootContext, providePopoverRootContext]
+  = createContext<PopoverRootContext>('PopoverRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { PopperRoot } from '@/Popper'
 
@@ -56,7 +56,7 @@ const open = useVModel(props, 'open', emit, {
 const triggerElement = ref<HTMLElement>()
 const hasCustomAnchor = ref(false)
 
-provide<PopoverProvideValue>(POPOVER_INJECTION_KEY, {
+providePopoverRootContext({
   contentId: useId(),
   modal,
   open,
diff --git a/packages/radix-vue/src/Popover/PopoverTrigger.vue b/packages/radix-vue/src/Popover/PopoverTrigger.vue
index f94ebc189..5c399f418 100644
--- a/packages/radix-vue/src/Popover/PopoverTrigger.vue
+++ b/packages/radix-vue/src/Popover/PopoverTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { onMounted } from 'vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -13,13 +13,13 @@ const props = withDefaults(defineProps<PopoverTriggerProps>(), {
   as: 'button',
 })
 
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
 
 onMounted(() => {
-  context!.triggerElement.value = triggerElement.value
+  rootContext.triggerElement.value = triggerElement.value
 })
 
 defineExpose({ $el: triggerElement })
@@ -27,19 +27,19 @@ defineExpose({ $el: triggerElement })
 
 <template>
   <component
-    :is="context?.hasCustomAnchor.value ? Primitive : PopperAnchor"
+    :is="rootContext.hasCustomAnchor.value ? Primitive : PopperAnchor"
     as-child
   >
     <Primitive
       ref="primitiveElement"
       :type="as === 'button' ? 'button' : undefined"
       aria-haspopup="dialog"
-      :aria-expanded="context?.open.value"
-      :aria-controls="context?.contentId"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :aria-expanded="rootContext.open.value"
+      :aria-controls="rootContext.contentId"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       :as="as"
       :as-child="props.asChild"
-      @click="context!.onOpenToggle"
+      @click="rootContext.onOpenToggle"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Popper/PopperAnchor.vue b/packages/radix-vue/src/Popper/PopperAnchor.vue
index 76f4d6033..660ef77e5 100644
--- a/packages/radix-vue/src/Popper/PopperAnchor.vue
+++ b/packages/radix-vue/src/Popper/PopperAnchor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, watch } from 'vue'
-import { type Measurable, POPPER_ROOT_KEY } from './PopperRoot.vue'
+import { watch } from 'vue'
+import { type Measurable, injectPopperRootContext } from './PopperRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -15,10 +15,10 @@ const props = defineProps<PopperAnchorProps>()
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(POPPER_ROOT_KEY)
+const rootContext = injectPopperRootContext()
 
 watch(currentElement, () => {
-  context?.onAnchorChange(props.element ?? currentElement.value)
+  rootContext.onAnchorChange(props.element ?? currentElement.value)
 })
 </script>
 
diff --git a/packages/radix-vue/src/Popper/PopperArrow.vue b/packages/radix-vue/src/Popper/PopperArrow.vue
index d37d73ead..4b942e8a7 100644
--- a/packages/radix-vue/src/Popper/PopperArrow.vue
+++ b/packages/radix-vue/src/Popper/PopperArrow.vue
@@ -17,51 +17,47 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import {
-  POPPER_CONTENT_KEY,
-  type PopperContentContextValue,
+  injectPopperContentContext,
 } from './PopperContent.vue'
 import Arrow from '@/shared/component/Arrow.vue'
 import { type ArrowProps } from '@/shared/component/Arrow.vue'
 
-const props = withDefaults(defineProps<PopperArrowProps>(), {
-  as: 'svg',
-})
+withDefaults(
+  defineProps<PopperArrowProps>(),
+  { as: 'svg' },
+)
 
-const contentContext = inject<PopperContentContextValue>(POPPER_CONTENT_KEY)
+const contentContext = injectPopperContentContext()
 
-const baseSide = computed(() =>
-  contentContext?.placedSide
-    ? OPPOSITE_SIDE[contentContext?.placedSide.value]
-    : '',
-)
+const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value])
 </script>
 
 <template>
   <span
     :ref="(el: HTMLElement) => {
-      contentContext!.onArrowChange(el)
+      contentContext.onArrowChange(el)
       return undefined
     }"
     :style="{
       position: 'absolute',
-      left: contentContext!.arrowX?.value ? `${contentContext!.arrowX?.value}px` : undefined,
-      top: contentContext!.arrowY?.value ? `${contentContext!.arrowY?.value}px` : undefined,
+      left: contentContext.arrowX?.value ? `${contentContext.arrowX?.value}px` : undefined,
+      top: contentContext.arrowY?.value ? `${contentContext.arrowY?.value}px` : undefined,
       [baseSide]: 0,
       transformOrigin: {
         top: '',
         right: '0 0',
         bottom: 'center 0',
         left: '100% 0',
-      }[contentContext!.placedSide.value],
+      }[contentContext.placedSide.value],
       transform: {
         top: 'translateY(100%)',
         right: 'translateY(50%) rotate(90deg) translateX(-50%)',
         bottom: `rotate(180deg)`,
         left: 'translateY(50%) rotate(-90deg) translateX(50%)',
-      }[contentContext!.placedSide.value],
-      visibility: contentContext!.shouldHideArrow.value ? 'hidden' : undefined,
+      }[contentContext.placedSide.value],
+      visibility: contentContext.shouldHideArrow.value ? 'hidden' : undefined,
     }"
   >
     <Arrow
diff --git a/packages/radix-vue/src/Popper/PopperContent.vue b/packages/radix-vue/src/Popper/PopperContent.vue
index 19f59fcda..1bc7299c9 100644
--- a/packages/radix-vue/src/Popper/PopperContent.vue
+++ b/packages/radix-vue/src/Popper/PopperContent.vue
@@ -1,13 +1,6 @@
 <script lang="ts">
-import type { ComponentPublicInstance, InjectionKey, Ref } from 'vue'
-
-export interface PopperContentContextValue {
-  placedSide: Ref<Side>
-  onArrowChange(arrow: HTMLElement | undefined): void
-  arrowX?: Ref<number>
-  arrowY?: Ref<number>
-  shouldHideArrow: Ref<boolean>
-}
+import type { ComponentPublicInstance, Ref } from 'vue'
+import { createContext, useForwardRef, useSize } from '@/shared'
 
 export const PopperContentPropsDefaultValue = {
   side: 'bottom' as Side,
@@ -113,8 +106,16 @@ export interface PopperContentProps extends PrimitiveProps {
   prioritizePosition?: boolean
 }
 
-export const POPPER_CONTENT_KEY
-  = Symbol() as InjectionKey<PopperContentContextValue>
+export interface PopperContentContext {
+  placedSide: Ref<Side>
+  onArrowChange(arrow: HTMLElement | undefined): void
+  arrowX?: Ref<number>
+  arrowY?: Ref<number>
+  shouldHideArrow: Ref<boolean>
+}
+
+export const [injectPopperContentContext, providePopperContentContext]
+  = createContext<PopperContentContext>('PopperContent')
 
 export default {
   inheritAttrs: false,
@@ -122,7 +123,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, provide, ref, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { computedEager } from '@vueuse/core'
 import {
   type Middleware,
@@ -137,7 +138,7 @@ import {
   size,
   useFloating,
 } from '@floating-ui/vue'
-import { POPPER_ROOT_KEY } from './PopperRoot.vue'
+import { injectPopperRootContext } from './PopperRoot.vue'
 import {
   type Align,
   type Side,
@@ -150,12 +151,11 @@ import {
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
-import { useForwardRef, useSize } from '@/shared'
 
 const props = withDefaults(defineProps<PopperContentProps>(), {
   ...PopperContentPropsDefaultValue,
 })
-const context = inject(POPPER_ROOT_KEY)
+const rootContext = injectPopperRootContext()
 
 const forwardRef = useForwardRef()
 const { primitiveElement, currentElement: contentElement }
@@ -250,7 +250,7 @@ const computedMiddleware = computedEager(() => {
 })
 
 const { floatingStyles, placement, isPositioned, middlewareData } = useFloating(
-  context!.anchor,
+  rootContext.anchor,
   floatingRef,
   {
     strategy: 'fixed',
@@ -290,11 +290,9 @@ watchEffect(() => {
 const arrowX = computed(() => middlewareData.value.arrow?.x ?? 0)
 const arrowY = computed(() => middlewareData.value.arrow?.y ?? 0)
 
-provide(POPPER_CONTENT_KEY, {
+providePopperContentContext({
   placedSide,
-  onArrowChange: (element: HTMLElement | undefined) => {
-    arrow.value = element
-  },
+  onArrowChange: element => arrow.value = element,
   arrowX,
   arrowY,
   shouldHideArrow: cannotCenterArrow,
diff --git a/packages/radix-vue/src/Popper/PopperRoot.vue b/packages/radix-vue/src/Popper/PopperRoot.vue
index dc4b801d0..52afc9dea 100644
--- a/packages/radix-vue/src/Popper/PopperRoot.vue
+++ b/packages/radix-vue/src/Popper/PopperRoot.vue
@@ -1,28 +1,28 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from '@/shared'
 
 export interface Measurable {
   getBoundingClientRect(): DOMRect
 }
 
-interface PopperContextValue {
+interface PopperRootContext {
   anchor: Ref<Measurable | HTMLElement | undefined>
   onAnchorChange(element: Measurable | HTMLElement | undefined): void
 }
 
-export const POPPER_ROOT_KEY = Symbol() as InjectionKey<PopperContextValue>
+export const [injectPopperRootContext, providePopperRootContext]
+  = createContext<PopperRootContext>('PopperRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { ref } from 'vue'
 
 const anchor = ref<Measurable | HTMLElement>()
 
-provide(POPPER_ROOT_KEY, {
+providePopperRootContext({
   anchor,
-  onAnchorChange: (element: Measurable | HTMLElement | undefined) => {
-    anchor.value = element
-  },
+  onAnchorChange: element => anchor.value = element,
 })
 </script>
 
diff --git a/packages/radix-vue/src/Progress/ProgressIndicator.vue b/packages/radix-vue/src/Progress/ProgressIndicator.vue
index 867e6bd93..4e846cea2 100644
--- a/packages/radix-vue/src/Progress/ProgressIndicator.vue
+++ b/packages/radix-vue/src/Progress/ProgressIndicator.vue
@@ -3,21 +3,20 @@ export interface ProgressIndicatorProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { PROGRESS_INJECTION_KEY } from './ProgressRoot.vue'
+import { injectProgressRootContext } from './ProgressRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 const props = defineProps<ProgressIndicatorProps>()
 
-const injectedValue = inject(PROGRESS_INJECTION_KEY)
+const rootContext = injectProgressRootContext()
 </script>
 
 <template>
   <Primitive
     v-bind="props"
-    :data-state="injectedValue?.progressState.value"
-    :data-value="injectedValue?.modelValue?.value ?? undefined"
-    :data-max="injectedValue?.max.value"
+    :data-state="rootContext.progressState.value"
+    :data-value="rootContext.modelValue?.value ?? undefined"
+    :data-max="rootContext.max.value"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Progress/ProgressRoot.vue b/packages/radix-vue/src/Progress/ProgressRoot.vue
index 6c71c0204..dc10d565c 100644
--- a/packages/radix-vue/src/Progress/ProgressRoot.vue
+++ b/packages/radix-vue/src/Progress/ProgressRoot.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from '@/shared'
 
 export interface ProgressRootProps extends PrimitiveProps {
   modelValue?: number | null
@@ -13,15 +14,15 @@ export type ProgressRootEmits = {
 
 const DEFAULT_MAX = 100
 
-export const PROGRESS_INJECTION_KEY
-  = Symbol() as InjectionKey<ProgressProvideValue>
-
-interface ProgressProvideValue {
+interface ProgressRootContext {
   modelValue?: Readonly<Ref<ProgressRootProps['modelValue']>>
   max: Readonly<Ref<number>>
   progressState: ComputedRef<ProgressState>
 }
 
+export const [injectProgressRootContext, provideProgressRootContext]
+  = createContext<ProgressRootContext>('ProgressRoot')
+
 export type ProgressState = 'indeterminate' | 'loading' | 'complete'
 
 const isNumber = (v: any): v is number => typeof v === 'number'
@@ -58,7 +59,7 @@ function validateMax(max: number): number {
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { computed, nextTick, provide, watch } from 'vue'
+import { computed, nextTick, watch } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 const props = withDefaults(defineProps<ProgressRootProps>(), {
@@ -109,7 +110,7 @@ const progressState = computed<ProgressState>(() => {
   return 'loading'
 })
 
-provide(PROGRESS_INJECTION_KEY, {
+provideProgressRootContext({
   modelValue,
   max,
   progressState,
diff --git a/packages/radix-vue/src/RadioGroup/Radio.vue b/packages/radix-vue/src/RadioGroup/Radio.vue
index 909c12d7d..c6a563c1d 100644
--- a/packages/radix-vue/src/RadioGroup/Radio.vue
+++ b/packages/radix-vue/src/RadioGroup/Radio.vue
@@ -11,11 +11,10 @@ export interface RadioProps extends PrimitiveProps {
 <script setup lang="ts">
 import {
   computed,
-  inject,
   ref,
   toRefs,
 } from 'vue'
-import { RADIO_GROUP_INJECTION_KEY } from './RadioGroupRoot.vue'
+import { injectRadioGroupRootContext } from './RadioGroupRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -29,7 +28,7 @@ const props = withDefaults(defineProps<RadioProps>(), {
 const { value, checked } = toRefs(props)
 const { primitiveElement, currentElement: triggerElement } = usePrimitiveElement()
 
-const context = inject(RADIO_GROUP_INJECTION_KEY)
+const rootContext = injectRadioGroupRootContext()
 
 // We set this to true by default so that events bubble to forms without JS (SSR)
 const isFormControl = computed(() =>
@@ -40,7 +39,7 @@ const ariaLabel = computed(() => props.id && triggerElement.value ? (document.qu
 const hasConsumerStoppedPropagationRef = ref(false)
 
 function handleClick(event: MouseEvent) {
-  context?.changeModelValue(value?.value)
+  rootContext.changeModelValue(value?.value)
 
   if (isFormControl.value && 'isPropagationStopped' in event) {
     // hasConsumerStoppedPropagationRef.value = event.isPropagationStopped() as boolean
@@ -69,7 +68,7 @@ function handleClick(event: MouseEvent) {
     :data-disabled="disabled ? '' : undefined"
     :value="value"
     :required="required"
-    :name="context?.name"
+    :name="rootContext.name"
     @click="handleClick"
   >
     <slot />
diff --git a/packages/radix-vue/src/RadioGroup/RadioGroupIndicator.vue b/packages/radix-vue/src/RadioGroup/RadioGroupIndicator.vue
index 930977f3c..beb86d03e 100644
--- a/packages/radix-vue/src/RadioGroup/RadioGroupIndicator.vue
+++ b/packages/radix-vue/src/RadioGroup/RadioGroupIndicator.vue
@@ -3,22 +3,21 @@ export interface RadioGroupIndicatorProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { RADIO_GROUP_ITEM_INJECTION_KEY } from './RadioGroupItem.vue'
+import { injectRadioGroupItemContext } from './RadioGroupItem.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 withDefaults(defineProps<RadioGroupIndicatorProps>(), {
   as: 'span',
 })
 
-const itemContext = inject(RADIO_GROUP_ITEM_INJECTION_KEY)
+const itemContext = injectRadioGroupItemContext()
 </script>
 
 <template>
   <Primitive
-    v-if="itemContext?.checked.value"
-    :data-state="itemContext?.checked.value ? 'checked' : 'unchecked'"
-    :data-disabled="itemContext?.disabled.value ? '' : undefined"
+    v-if="itemContext.checked.value"
+    :data-state="itemContext.checked.value ? 'checked' : 'unchecked'"
+    :data-disabled="itemContext.disabled.value ? '' : undefined"
     :as-child="asChild"
     :as="as"
   >
diff --git a/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue b/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue
index 3410ffce3..815d5c6fa 100644
--- a/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue
+++ b/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue
@@ -1,13 +1,15 @@
 <script lang="ts">
+import { createContext } from '@/shared'
+
 export interface RadioGroupItemProps extends Omit<RadioProps, 'checked'> {}
 
-interface RadioItemProvideValue {
+interface RadioGroupItemContext {
   disabled: ComputedRef<boolean>
   checked: ComputedRef<boolean>
 }
 
-export const RADIO_GROUP_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<RadioItemProvideValue>
+export const [injectRadioGroupItemContext, provideRadiogroupItemContext]
+  = createContext<RadioGroupItemContext>('RadioGroupItem')
 
 export default {
   inheritAttrs: false,
@@ -17,14 +19,11 @@ export default {
 <script setup lang="ts">
 import {
   type ComputedRef,
-  type InjectionKey,
   computed,
-  inject,
-  provide,
   ref,
   toRefs,
 } from 'vue'
-import { RADIO_GROUP_INJECTION_KEY } from './RadioGroupRoot.vue'
+import { injectRadioGroupRootContext } from './RadioGroupRoot.vue'
 import {
   usePrimitiveElement,
 } from '@/Primitive'
@@ -39,13 +38,13 @@ const props = withDefaults(defineProps<RadioGroupItemProps>(), {
 const { value } = toRefs(props)
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(RADIO_GROUP_INJECTION_KEY)
+const rootContext = injectRadioGroupRootContext()
 
-const disabled = computed(() => context?.disabled.value || props.disabled)
-const required = computed(() => context?.required.value || props.required)
-const checked = computed(() => context?.modelValue?.value === props.value)
+const disabled = computed(() => rootContext.disabled.value || props.disabled)
+const required = computed(() => rootContext.required.value || props.required)
+const checked = computed(() => rootContext.modelValue?.value === props.value)
 
-provide(RADIO_GROUP_ITEM_INJECTION_KEY, { disabled, checked })
+provideRadiogroupItemContext({ disabled, checked })
 
 const isArrowKeyPressed = ref(false)
 const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
diff --git a/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue b/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue
index 72dd3c22a..19c1f9457 100644
--- a/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue
+++ b/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue
@@ -5,7 +5,8 @@ import {
 } from '@/Primitive'
 import type { DataOrientation, Direction } from '@/shared/types'
 import { useVModel } from '@vueuse/core'
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from '@/shared'
 
 export interface RadioGroupRootProps extends PrimitiveProps {
   modelValue?: string
@@ -21,7 +22,7 @@ export type RadioGroupRootEmits = {
   'update:modelValue': [payload: string]
 }
 
-interface RadioGroupProvideValue {
+interface RadioGroupRootContext {
   modelValue?: Readonly<Ref<string | undefined>>
   changeModelValue: (value?: string) => void
   disabled: Ref<boolean>
@@ -31,12 +32,12 @@ interface RadioGroupProvideValue {
   required: Ref<boolean>
 }
 
-export const RADIO_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<RadioGroupProvideValue>
+export const [injectRadioGroupRootContext, provideRadioGroupRootContext]
+  = createContext<RadioGroupRootContext>('RadioGroupRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { RovingFocusGroup } from '@/RovingFocus'
 
 const props = withDefaults(defineProps<RadioGroupRootProps>(), {
@@ -55,9 +56,9 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 })
 
 const { disabled, loop, orientation, name, required } = toRefs(props)
-provide<RadioGroupProvideValue>(RADIO_GROUP_INJECTION_KEY, {
+provideRadioGroupRootContext({
   modelValue,
-  changeModelValue: (value?: string) => {
+  changeModelValue: (value) => {
     modelValue.value = value
   },
   disabled,
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
index 6a8ab2145..cbd3fd660 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { createContext, useCollection } from '@/shared'
+
 export interface RovingFocusGroupProps extends PrimitiveProps {
   /**
    * The orientation of the group.
@@ -23,7 +25,7 @@ export type RovingFocusGroupEmits = {
   'update:currentTabStopId': [value: string | null | undefined]
 }
 
-interface RovingContextValue {
+interface RovingContext {
   orientation: Ref<Orientation | undefined>
   dir: Ref<Direction>
   loop: Ref<boolean>
@@ -34,12 +36,12 @@ interface RovingContextValue {
   onFocusableItemRemove(): void
 }
 
-export const ROVING_FOCUS_INJECTION_KEY
-  = Symbol() as InjectionKey<RovingContextValue>
+export const [injectRovingFocusGroupContext, provideRovingFocusGroupContext]
+  = createContext<RovingContext>('RovingFocusGroup')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, provide, ref, toRefs } from 'vue'
+import { type Ref, ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import {
   type Direction,
@@ -48,7 +50,6 @@ import {
   type Orientation,
 } from './utils'
 import { focusFirst } from './utils'
-import { useCollection } from '@/shared'
 import {
   Primitive,
   type PrimitiveProps,
@@ -107,7 +108,7 @@ function handleFocus(event: FocusEvent) {
   isClickFocus.value = false
 }
 
-provide(ROVING_FOCUS_INJECTION_KEY, {
+provideRovingFocusGroupContext({
   loop,
   dir,
   orientation,
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
index f605c1908..bcd1d2968 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, onUnmounted } from 'vue'
-import { ROVING_FOCUS_INJECTION_KEY } from './RovingFocusGroup.vue'
+import { computed, nextTick, onMounted, onUnmounted } from 'vue'
+import { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'
 import { focusFirst, getFocusIntent, wrapArray } from './utils'
 import { useCollection, useId } from '@/shared'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
@@ -17,30 +17,28 @@ const props = withDefaults(defineProps<RovingFocusItemProps>(), {
   as: 'span',
 })
 
-const context = inject(ROVING_FOCUS_INJECTION_KEY)
+const context = injectRovingFocusGroupContext()
 const autoId = useId()
 const id = computed(() => props.tabStopId || autoId)
 const isCurrentTabStop = computed(
-  () => context?.currentTabStopId.value === id.value,
+  () => context.currentTabStopId.value === id.value,
 )
 
 const { injectCollection } = useCollection('rovingFocus')
 const collections = injectCollection()
 
-const { onFocusableItemAdd, onFocusableItemRemove } = context!
-
 onMounted(() => {
   if (props.focusable)
-    onFocusableItemAdd()
+    context.onFocusableItemAdd()
 })
 onUnmounted(() => {
   if (props.focusable)
-    onFocusableItemRemove()
+    context.onFocusableItemRemove()
 })
 
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === 'Tab' && event.shiftKey) {
-    context?.onItemShiftTab()
+    context.onItemShiftTab()
     return
   }
 
@@ -49,8 +47,8 @@ function handleKeydown(event: KeyboardEvent) {
 
   const focusIntent = getFocusIntent(
     event,
-    context?.orientation.value,
-    context?.dir.value,
+    context.orientation.value,
+    context.dir.value,
   )
 
   if (focusIntent !== undefined) {
@@ -67,7 +65,7 @@ function handleKeydown(event: KeyboardEvent) {
         event.currentTarget as HTMLElement,
       )
 
-      candidateNodes = context?.loop.value
+      candidateNodes = context.loop.value
         ? wrapArray(candidateNodes, currentIndex + 1)
         : candidateNodes.slice(currentIndex + 1)
     }
@@ -81,7 +79,7 @@ function handleKeydown(event: KeyboardEvent) {
   <Primitive
     data-radix-vue-collection-item
     :tabindex="isCurrentTabStop ? 0 : -1"
-    :data-orientation="context?.orientation.value"
+    :data-orientation="context.orientation.value"
     :data-active="active"
     :data-disabled="!focusable || undefined"
     :as="as"
@@ -92,10 +90,10 @@ function handleKeydown(event: KeyboardEvent) {
         // 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);
+        else context.onItemFocus(id);
       }
     "
-    @focus="context?.onItemFocus(id)"
+    @focus="context.onItemFocus(id)"
     @keydown="handleKeydown"
   >
     <slot />
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaCorner.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaCorner.vue
index ad28cf30d..db342e6eb 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaCorner.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaCorner.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { computed } from 'vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaCornerImpl from './ScrollAreaCornerImpl.vue'
 import { type PrimitiveProps } from '@/Primitive'
 
 export interface ScrollAreaCornerProps extends PrimitiveProps {}
 const props = defineProps<ScrollAreaCornerProps>()
 
-const context = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 const hasBothScrollbarsVisible = computed(
-  () => !!context?.scrollbarX.value && !!context.scrollbarY.value,
+  () => !!rootContext.scrollbarX.value && !!rootContext.scrollbarY.value,
 )
 const hasCorner = computed(
-  () => context?.type.value !== 'scroll' && hasBothScrollbarsVisible.value,
+  () => rootContext.type.value !== 'scroll' && hasBothScrollbarsVisible.value,
 )
 </script>
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaCornerImpl.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaCornerImpl.vue
index 0b16e143a..2bdec16d6 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaCornerImpl.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaCornerImpl.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { Primitive } from '@/Primitive'
 
-const context = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 const width = ref(0)
 const height = ref(0)
@@ -12,22 +12,22 @@ const height = ref(0)
 const hasSize = computed(() => !!width.value && !!height.value)
 
 function setCornerHeight() {
-  const offsetHeight = context?.scrollbarX.value?.offsetHeight || 0
-  context?.onCornerHeightChange(offsetHeight)
+  const offsetHeight = rootContext.scrollbarX.value?.offsetHeight || 0
+  rootContext.onCornerHeightChange(offsetHeight)
   height.value = offsetHeight
 }
 function setCornerWidth() {
-  const offsetWidth = context?.scrollbarY.value?.offsetWidth || 0
-  context?.onCornerWidthChange(offsetWidth)
+  const offsetWidth = rootContext.scrollbarY.value?.offsetWidth || 0
+  rootContext.onCornerWidthChange(offsetWidth)
   width.value = offsetWidth
 }
 
-useResizeObserver(context?.scrollbarX.value, setCornerHeight)
-useResizeObserver(context?.scrollbarY.value, setCornerWidth)
+useResizeObserver(rootContext.scrollbarX.value, setCornerHeight)
+useResizeObserver(rootContext.scrollbarY.value, setCornerWidth)
 
 // because we are not remounting the component, useResizeObserver doesn't trigger, thus using watcher here
-watch(() => context?.scrollbarX.value, setCornerHeight)
-watch(() => context?.scrollbarY.value, setCornerWidth)
+watch(() => rootContext.scrollbarX.value, setCornerHeight)
+watch(() => rootContext.scrollbarY.value, setCornerWidth)
 </script>
 
 <template>
@@ -37,8 +37,8 @@ watch(() => context?.scrollbarY.value, setCornerWidth)
       width: `${width}px`,
       height: `${height}px`,
       position: 'absolute',
-      right: context!.dir.value === 'ltr' ? 0 : undefined,
-      left: context!.dir.value === 'rtl' ? 0 : undefined,
+      right: rootContext.dir.value === 'ltr' ? 0 : undefined,
+      left: rootContext.dir.value === 'rtl' ? 0 : undefined,
       bottom: 0,
     }"
     v-bind="$parent?.$props"
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaRoot.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaRoot.vue
index e1db1865f..9ac50e5a2 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaRoot.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaRoot.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { Direction, ScrollType } from './types'
+import { createContext } from '@/shared'
 
-export interface ScrollAreaProvideValue {
+export interface ScrollAreaRootContext {
   type: Ref<ScrollType>
   dir: Ref<Direction>
   scrollHideDelay: Ref<number>
@@ -23,18 +24,18 @@ export interface ScrollAreaProvideValue {
   onCornerHeightChange(height: number): void
 }
 
+export const [injectScrollAreaRootContext, provideScrollAreaRootContext]
+  = createContext<ScrollAreaRootContext>('ScrollAreaRoot')
+
 export interface ScrollAreaRootProps extends PrimitiveProps {
   type?: ScrollType
   dir?: Direction
   scrollHideDelay?: number
 }
-
-export const SCROLL_AREA_INJECTION_KEY
-  = Symbol() as InjectionKey<ScrollAreaProvideValue>
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -58,54 +59,42 @@ const scrollbarY = ref<HTMLElement>()
 const scrollbarXEnabled = ref(false)
 const scrollbarYEnabled = ref(false)
 
-function onViewportChange(el: HTMLElement) {
-  viewport.value = el
-}
-function onContentChange(el: HTMLElement) {
-  content.value = el
-}
-
-function onScrollbarXChange(scrollbar: HTMLElement) {
-  scrollbarX.value = scrollbar
-}
-function onScrollbarYChange(scrollbar: HTMLElement) {
-  scrollbarY.value = scrollbar
-}
-
-function onScrollbarXEnabledChange(rendered: boolean) {
-  scrollbarXEnabled.value = rendered
-}
-function onScrollbarYEnabledChange(rendered: boolean) {
-  scrollbarYEnabled.value = rendered
-}
-
-function onCornerWidthChange(width: number) {
-  cornerWidth.value = width
-}
-function onCornerHeightChange(height: number) {
-  cornerHeight.value = height
-}
-
 const { type, dir, scrollHideDelay } = toRefs(props)
-provide<ScrollAreaProvideValue>(SCROLL_AREA_INJECTION_KEY, {
+provideScrollAreaRootContext({
   type,
   dir,
   scrollHideDelay,
   scrollArea,
   viewport,
-  onViewportChange,
+  onViewportChange: (el) => {
+    viewport.value = el || undefined
+  },
   content,
-  onContentChange,
+  onContentChange: (el) => {
+    content.value = el
+  },
   scrollbarX,
   scrollbarXEnabled,
   scrollbarY,
   scrollbarYEnabled,
-  onScrollbarXChange,
-  onScrollbarYChange,
-  onScrollbarXEnabledChange,
-  onScrollbarYEnabledChange,
-  onCornerWidthChange,
-  onCornerHeightChange,
+  onScrollbarXChange: (scrollbar) => {
+    scrollbarX.value = scrollbar || undefined
+  },
+  onScrollbarYChange: (scrollbar) => {
+    scrollbarY.value = scrollbar || undefined
+  },
+  onScrollbarXEnabledChange: (rendered) => {
+    scrollbarXEnabled.value = rendered
+  },
+  onScrollbarYEnabledChange: (rendered) => {
+    scrollbarYEnabled.value = rendered
+  },
+  onCornerWidthChange: (width) => {
+    cornerWidth.value = width
+  },
+  onCornerHeightChange: (height) => {
+    cornerHeight.value = height
+  },
 })
 </script>
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
index b6aac62bc..db49fb921 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
@@ -1,21 +1,19 @@
 <script lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
   onUnmounted,
-  provide,
   toRefs,
   watch,
 } from 'vue'
+import { createContext } from '@/shared'
 
 export interface ScrollAreaScrollbarProps extends PrimitiveProps {
   orientation?: 'vertical' | 'horizontal'
   forceMount?: boolean
 }
 
-export interface ScrollAreaScollbarProvideValue {
+export interface ScrollAreaScollbarContext {
   as: Ref<AsTag>
   orientation: Ref<'vertical' | 'horizontal'>
   forceMount?: Ref<boolean>
@@ -23,8 +21,8 @@ export interface ScrollAreaScollbarProvideValue {
   asChild: Ref<boolean>
 }
 
-export const SCROLL_AREA_SCROLLBAR_INJECTION_KEY
-  = Symbol() as InjectionKey<ScrollAreaScollbarProvideValue>
+export const [injectScrollAreaScrollbarContext, provideScrollAreaScrollbarContext]
+  = createContext<ScrollAreaScollbarContext>('ScrollAreaScrollbar')
 
 export default {
   inheritAttrs: false,
@@ -32,7 +30,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarHover from './ScrollAreaScrollbarHover.vue'
 import ScrollAreaScrollbarScroll from './ScrollAreaScrollbarScroll.vue'
 import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
@@ -45,7 +43,7 @@ const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
   as: 'div',
 })
 
-const injectedValue = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 const isHorizontal = computed(() => props.orientation === 'horizontal')
 
@@ -53,19 +51,19 @@ watch(
   isHorizontal,
   () => {
     if (isHorizontal.value)
-      injectedValue?.onScrollbarXEnabledChange(true)
-    else injectedValue?.onScrollbarYEnabledChange(true)
+      rootContext.onScrollbarXEnabledChange(true)
+    else rootContext.onScrollbarYEnabledChange(true)
   },
   { immediate: true },
 )
 
 onUnmounted(() => {
-  injectedValue?.onScrollbarXEnabledChange(false)
-  injectedValue?.onScrollbarYEnabledChange(false)
+  rootContext.onScrollbarXEnabledChange(false)
+  rootContext.onScrollbarYEnabledChange(false)
 })
 
 const { orientation, forceMount, asChild, as } = toRefs(props)
-provide<ScrollAreaScollbarProvideValue>(SCROLL_AREA_SCROLLBAR_INJECTION_KEY, {
+provideScrollAreaScrollbarContext({
   orientation,
   forceMount,
   isHorizontal,
@@ -76,28 +74,28 @@ provide<ScrollAreaScollbarProvideValue>(SCROLL_AREA_SCROLLBAR_INJECTION_KEY, {
 
 <template>
   <ScrollAreaScrollbarHover
-    v-if="injectedValue?.type.value === 'hover'"
+    v-if="rootContext.type.value === 'hover'"
     v-bind="$attrs"
     :force-mount="forceMount"
   >
     <slot />
   </ScrollAreaScrollbarHover>
   <ScrollAreaScrollbarScroll
-    v-else-if="injectedValue?.type.value === 'scroll'"
+    v-else-if="rootContext.type.value === 'scroll'"
     v-bind="$attrs"
     :force-mount="forceMount"
   >
     <slot />
   </ScrollAreaScrollbarScroll>
   <ScrollAreaScrollbarAuto
-    v-else-if="injectedValue?.type.value === 'auto'"
+    v-else-if="rootContext.type.value === 'auto'"
     v-bind="$attrs"
     :force-mount="forceMount"
   >
     <slot />
   </ScrollAreaScrollbarAuto>
   <ScrollAreaScrollbarVisible
-    v-else-if="injectedValue?.type.value === 'always'"
+    v-else-if="rootContext.type.value === 'always'"
     v-bind="$attrs"
     data-state="visible"
     :force-mount="forceMount"
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue
index e155e14de..9b3199f5d 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import { inject, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useDebounceFn, useResizeObserver } from '@vueuse/core'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_INJECTION_KEY } from './ScrollAreaScrollbar.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-const scrollbarContext = inject(SCROLL_AREA_SCROLLBAR_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
 
 const visible = ref(false)
 
 const handleResize = useDebounceFn(() => {
-  if (rootContext?.viewport.value) {
+  if (rootContext.viewport.value) {
     const isOverflowX
-      = rootContext?.viewport.value.offsetWidth
-      < rootContext?.viewport.value.scrollWidth
+      = rootContext.viewport.value.offsetWidth
+      < rootContext.viewport.value.scrollWidth
     const isOverflowY
-      = rootContext?.viewport.value.offsetHeight
-      < rootContext?.viewport.value.scrollHeight
+      = rootContext.viewport.value.offsetHeight
+      < rootContext.viewport.value.scrollHeight
 
-    visible.value = scrollbarContext?.isHorizontal.value
+    visible.value = scrollbarContext.isHorizontal.value
       ? isOverflowX
       : isOverflowY
   }
@@ -27,8 +27,8 @@ const handleResize = useDebounceFn(() => {
 
 onMounted(() => handleResize())
 
-useResizeObserver(rootContext?.viewport, handleResize)
-useResizeObserver(rootContext?.content, handleResize)
+useResizeObserver(rootContext.viewport, handleResize)
+useResizeObserver(rootContext.content, handleResize)
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
index a683f9ea2..5d46b5c20 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { inject, onMounted, onUnmounted, ref } from 'vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
 
-const injectedValue = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 let timeout: ReturnType<typeof setTimeout> | undefined | number
 const visible = ref(false)
@@ -15,11 +15,11 @@ function handlePointerEnter() {
 function handlePointerLeave() {
   timeout = window.setTimeout(() => {
     visible.value = false
-  }, injectedValue?.scrollHideDelay.value)
+  }, rootContext.scrollHideDelay.value)
 }
 
 onMounted(() => {
-  const scrollArea = injectedValue?.scrollArea.value
+  const scrollArea = rootContext.scrollArea.value
 
   if (scrollArea) {
     scrollArea.addEventListener('pointerenter', handlePointerEnter)
@@ -28,7 +28,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  const scrollArea = injectedValue?.scrollArea.value
+  const scrollArea = rootContext.scrollArea.value
   if (scrollArea) {
     window.clearTimeout(timeout)
     scrollArea.removeEventListener('pointerenter', handlePointerEnter)
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
index e979d2bfa..d0f2bbcf6 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { inject, onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY } from './ScrollAreaScrollbarVisible.vue'
-import { SCROLL_AREA_SCROLLBAR_INJECTION_KEY } from './ScrollAreaScrollbar.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import { toInt } from './utils'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 
@@ -13,12 +13,9 @@ const emit = defineEmits<{
   'onWheelScroll': [payload: { x: number; y: number }]
   'onThumbPointerDown': [payload: { x: number; y: number }]
 }>()
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-const scrollbarVisibleContext = inject(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-)
-
-const scrollbarContext = inject(SCROLL_AREA_SCROLLBAR_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
 
 export interface ScrollAreaScrollbarImplProps {
   isHorizontal: boolean
@@ -47,7 +44,7 @@ function handlePointerDown(event: PointerEvent) {
     // so we remove text selection manually when scrolling
     prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect
     document.body.style.webkitUserSelect = 'none'
-    if (rootContext?.viewport)
+    if (rootContext.viewport)
       rootContext.viewport.value!.style.scrollBehavior = 'auto'
 
     handleDragScroll(event)
@@ -64,15 +61,13 @@ function handlePointerUp(event: PointerEvent) {
     element.releasePointerCapture(event.pointerId)
 
   document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value
-  if (rootContext?.viewport)
+  if (rootContext.viewport)
     rootContext.viewport.value!.style.scrollBehavior = ''
 
   rectRef.value = undefined
 }
 
 function handleWheel(event: WheelEvent) {
-  if (!scrollbarVisibleContext)
-    return
   const element = event.target as HTMLElement
   const isScrollbarWheel = scrollbar.value?.contains(element)
   const maxScrollPos
@@ -93,20 +88,20 @@ function handleSizeChange() {
   if (!scrollbar.value)
     return
   if (props.isHorizontal) {
-    scrollbarVisibleContext?.handleSizeChange({
-      content: rootContext?.viewport.value?.scrollWidth ?? 0,
-      viewport: rootContext?.viewport.value?.offsetWidth ?? 0,
+    scrollbarVisibleContext.handleSizeChange({
+      content: rootContext.viewport.value?.scrollWidth ?? 0,
+      viewport: rootContext.viewport.value?.offsetWidth ?? 0,
       scrollbar: {
-        size: scrollbar.value?.clientWidth ?? 0,
-        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),
-        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),
+        size: scrollbar.value.clientWidth ?? 0,
+        paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),
+        paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight),
       },
     })
   }
   else {
-    scrollbarVisibleContext?.handleSizeChange({
-      content: rootContext?.viewport.value?.scrollHeight ?? 0,
-      viewport: rootContext?.viewport.value?.offsetHeight ?? 0,
+    scrollbarVisibleContext.handleSizeChange({
+      content: rootContext.viewport.value?.scrollHeight ?? 0,
+      viewport: rootContext.viewport.value?.offsetHeight ?? 0,
       scrollbar: {
         size: scrollbar.value?.clientHeight ?? 0,
         paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),
@@ -117,7 +112,7 @@ function handleSizeChange() {
 }
 
 useResizeObserver(scrollbar, handleSizeChange)
-useResizeObserver(rootContext?.content, handleSizeChange)
+useResizeObserver(rootContext.content, handleSizeChange)
 </script>
 
 <template>
@@ -125,8 +120,8 @@ useResizeObserver(rootContext?.content, handleSizeChange)
     ref="primitiveElement"
     style="position: absolute"
     data-scrollbarimpl
-    :as="scrollbarContext?.as.value"
-    :as-child="scrollbarContext?.asChild.value"
+    :as="scrollbarContext.as.value"
+    :as-child="scrollbarContext.asChild.value"
     @pointerdown="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
index 6e034dfc6..815ac8da8 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { inject, watchEffect } from 'vue'
+import { watchEffect } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import { useStateMachine } from '../shared/useStateMachine'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_INJECTION_KEY } from './ScrollAreaScrollbar.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-const scrollbarContext = inject(SCROLL_AREA_SCROLLBAR_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
 
 const { state, dispatch } = useStateMachine('hidden', {
   hidden: {
@@ -32,7 +32,7 @@ watchEffect(() => {
   if (state.value === 'idle') {
     window.setTimeout(
       () => dispatch('HIDE'),
-      rootContext?.scrollHideDelay.value,
+      rootContext.scrollHideDelay.value,
     )
   }
 })
@@ -40,8 +40,8 @@ watchEffect(() => {
 const debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)
 
 watchEffect(() => {
-  const viewport = rootContext?.viewport.value
-  const scrollDirection = scrollbarContext?.isHorizontal.value
+  const viewport = rootContext.viewport.value
+  const scrollDirection = scrollbarContext.isHorizontal.value
     ? 'scrollLeft'
     : 'scrollTop'
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue
index 28ce9a1eb..aabc7e81c 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue
@@ -1,5 +1,7 @@
 <script lang="ts">
-export interface ScrollAreaScrollbarVisibleProvideValue {
+import { createContext } from '@/shared'
+
+export interface ScrollAreaScrollbarVisibleContext {
   sizes: Ref<Sizes>
   hasThumb: Ref<boolean>
   handleWheelScroll: (event: WheelEvent, payload: number) => void
@@ -14,22 +16,19 @@ export interface ScrollAreaScrollbarVisibleProvideValue {
   onThumbChange: (element: HTMLElement) => void
 }
 
-export const SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY
-  = Symbol() as InjectionKey<ScrollAreaScrollbarVisibleProvideValue>
+export const [injectScrollAreaScrollbarVisibleContext, provideScrollAreaScrollbarVisibleContext]
+  = createContext<ScrollAreaScrollbarVisibleContext>('ScrollAreaScrollbarVisible')
 </script>
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
-  provide,
   ref,
 } from 'vue'
 import type { Direction, Sizes } from './types'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_INJECTION_KEY } from './ScrollAreaScrollbar.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import ScrollAreaScrollbarX from './ScrollAreaScrollbarX.vue'
 import ScrollAreaScrollbarY from './ScrollAreaScrollbarY.vue'
 import {
@@ -39,8 +38,8 @@ import {
   isScrollingWithinScrollbarBounds,
 } from './utils'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-const scrollbarContext = inject(SCROLL_AREA_SCROLLBAR_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
 
 const sizes = ref<Sizes>({
   content: 0,
@@ -58,17 +57,17 @@ const pointerOffset = ref(0)
 
 function handleWheelScroll(event: WheelEvent, payload: number) {
   if (isShowingScrollbarX.value) {
-    const scrollPos = rootContext!.viewport.value!.scrollLeft + event.deltaY
+    const scrollPos = rootContext.viewport.value!.scrollLeft + event.deltaY
 
-    rootContext!.viewport.value!.scrollLeft = scrollPos
+    rootContext.viewport.value!.scrollLeft = scrollPos
     // prevent window scroll when wheeling on scrollbar
     if (isScrollingWithinScrollbarBounds(scrollPos, payload))
       event.preventDefault()
   }
   else {
-    const scrollPos = rootContext!.viewport.value!.scrollTop + event.deltaY
+    const scrollPos = rootContext.viewport.value!.scrollTop + event.deltaY
 
-    rootContext!.viewport.value!.scrollTop = scrollPos
+    rootContext.viewport.value!.scrollTop = scrollPos
     // prevent window scroll when wheeling on scrollbar
     if (isScrollingWithinScrollbarBounds(scrollPos, payload))
       event.preventDefault()
@@ -98,36 +97,36 @@ function getScrollPosition(pointerPos: number, dir?: Direction) {
 }
 
 const isShowingScrollbarX = computed(
-  () => scrollbarContext?.isHorizontal.value,
+  () => scrollbarContext.isHorizontal.value,
 )
 
 function onDragScroll(payload: number) {
   if (isShowingScrollbarX.value) {
-    rootContext!.viewport.value!.scrollLeft = getScrollPosition(
+    rootContext.viewport.value!.scrollLeft = getScrollPosition(
       payload,
-      rootContext!.dir?.value,
+      rootContext.dir.value,
     )
   }
   else {
-    rootContext!.viewport.value!.scrollTop = getScrollPosition(payload)
+    rootContext.viewport.value!.scrollTop = getScrollPosition(payload)
   }
 }
 
 function onThumbPositionChange() {
   if (isShowingScrollbarX.value) {
-    if (rootContext?.viewport.value && thumbRef.value) {
-      const scrollPos = rootContext?.viewport.value.scrollLeft
+    if (rootContext.viewport.value && thumbRef.value) {
+      const scrollPos = rootContext.viewport.value.scrollLeft
       const offset = getThumbOffsetFromScroll(
         scrollPos,
         sizes.value,
-        rootContext?.dir?.value,
+        rootContext.dir.value,
       )
       thumbRef.value.style.transform = `translate3d(${offset}px, 0, 0)`
     }
   }
   else {
-    if (rootContext?.viewport.value && thumbRef.value) {
-      const scrollPos = rootContext?.viewport.value.scrollTop
+    if (rootContext.viewport.value && thumbRef.value) {
+      const scrollPos = rootContext.viewport.value.scrollTop
       const offset = getThumbOffsetFromScroll(scrollPos, sizes.value)
       thumbRef.value.style.transform = `translate3d(0, ${offset}px, 0)`
     }
@@ -137,20 +136,17 @@ function onThumbChange(element: HTMLElement) {
   thumbRef.value = element
 }
 
-provide<ScrollAreaScrollbarVisibleProvideValue>(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-  {
-    sizes,
-    hasThumb,
-    handleWheelScroll,
-    handleThumbDown,
-    handleThumbUp,
-    handleSizeChange,
-    onThumbPositionChange,
-    onThumbChange,
-    onDragScroll,
-  },
-)
+provideScrollAreaScrollbarVisibleContext({
+  sizes,
+  hasThumb,
+  handleWheelScroll,
+  handleThumbDown,
+  handleThumbUp,
+  handleSizeChange,
+  onThumbPositionChange,
+  onThumbChange,
+  onDragScroll,
+})
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue
index 953062e61..f5fd0cbe0 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue
@@ -1,25 +1,22 @@
 <script setup lang="ts">
-import { computed, inject, onMounted } from 'vue'
-import { SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY } from './ScrollAreaScrollbarVisible.vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { computed, onMounted } from 'vue'
+import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'
 import { getThumbSize } from './utils'
 import { usePrimitiveElement } from '@/Primitive'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-
-const scrollbarVisibleContext = inject(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()
 
 const { primitiveElement, currentElement: scrollbarElement }
   = usePrimitiveElement()
 
 onMounted(() => {
   if (scrollbarElement.value)
-    rootContext?.onScrollbarXChange(scrollbarElement.value)
+    rootContext.onScrollbarXChange(scrollbarElement.value)
 })
-const sizes = computed(() => scrollbarVisibleContext?.sizes.value)
+const sizes = computed(() => scrollbarVisibleContext.sizes.value)
 </script>
 
 <template>
@@ -29,11 +26,11 @@ const sizes = computed(() => scrollbarVisibleContext?.sizes.value)
     data-orientation="horizontal"
     :style="{
       bottom: 0,
-      left: rootContext?.dir?.value === 'rtl' ? 'var(--radix-scroll-area-corner-width)' : 0,
-      right: rootContext?.dir?.value === 'ltr' ? 'var(--radix-scroll-area-corner-width)' : 0,
+      left: rootContext.dir.value === 'rtl' ? 'var(--radix-scroll-area-corner-width)' : 0,
+      right: rootContext.dir.value === 'ltr' ? 'var(--radix-scroll-area-corner-width)' : 0,
       ['--radix-scroll-area-thumb-width' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,
     }"
-    @on-drag-scroll="scrollbarVisibleContext?.onDragScroll($event.x)"
+    @on-drag-scroll="scrollbarVisibleContext.onDragScroll($event.x)"
   >
     <slot />
   </ScrollAreaScrollbarImpl>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue
index 170310116..bc0d709dd 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue
@@ -1,26 +1,23 @@
 <script setup lang="ts">
-import { computed, inject, onMounted } from 'vue'
-import { SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY } from './ScrollAreaScrollbarVisible.vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { computed, onMounted } from 'vue'
+import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'
 import { getThumbSize } from './utils'
 import { usePrimitiveElement } from '@/Primitive'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-
-const scrollbarContextVisible = inject(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()
 
 const { primitiveElement, currentElement: scrollbarElement }
   = usePrimitiveElement()
 
 onMounted(() => {
   if (scrollbarElement.value)
-    rootContext?.onScrollbarYChange(scrollbarElement.value)
+    rootContext.onScrollbarYChange(scrollbarElement.value)
 })
 
-const sizes = computed(() => scrollbarContextVisible?.sizes.value)
+const sizes = computed(() => scrollbarVisibleContext.sizes.value)
 </script>
 
 <template>
@@ -30,12 +27,12 @@ const sizes = computed(() => scrollbarContextVisible?.sizes.value)
     data-orientation="vertical"
     :style="{
       top: 0,
-      right: rootContext?.dir?.value === 'ltr' ? 0 : undefined,
-      left: rootContext?.dir?.value === 'rtl' ? 0 : undefined,
+      right: rootContext.dir.value === 'ltr' ? 0 : undefined,
+      left: rootContext.dir.value === 'rtl' ? 0 : undefined,
       bottom: 'var(--radix-scroll-area-corner-height)',
       ['--radix-scroll-area-thumb-height' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,
     }"
-    @on-drag-scroll="scrollbarContextVisible?.onDragScroll($event.y)"
+    @on-drag-scroll="scrollbarVisibleContext.onDragScroll($event.y)"
   >
     <slot />
   </ScrollAreaScrollbarImpl>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
index 96d34113d..c7552f53b 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, onUnmounted, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import { watchOnce } from '@vueuse/core'
 import {
   Primitive,
@@ -7,50 +7,47 @@ import {
   usePrimitiveElement,
 } from '../Primitive'
 import { addUnlinkedScrollListener } from './utils'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY } from './ScrollAreaScrollbarVisible.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
 
 export interface ScrollAreaThumbProps extends PrimitiveProps {}
 const props = defineProps<ScrollAreaThumbProps>()
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-
-const scrollbarContextVisible = inject(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContextVisible = injectScrollAreaScrollbarVisibleContext()
 
 function handlePointerDown(event: MouseEvent) {
   const thumb = event.target as HTMLElement
   const thumbRect = thumb.getBoundingClientRect()
   const x = event.clientX - thumbRect.left
   const y = event.clientY - thumbRect.top
-  scrollbarContextVisible?.handleThumbDown(event, { x, y })
+  scrollbarContextVisible.handleThumbDown(event, { x, y })
 }
 
 function handlePointerUp(event: MouseEvent) {
-  scrollbarContextVisible?.handleThumbUp(event)
+  scrollbarContextVisible.handleThumbUp(event)
 }
 
 const { primitiveElement, currentElement: thumbElement }
   = usePrimitiveElement()
 const removeUnlinkedScrollListenerRef = ref<() => void>()
-const viewport = computed(() => rootContext?.viewport.value)
+const viewport = computed(() => rootContext.viewport.value)
 
 function handleScroll() {
   if (!removeUnlinkedScrollListenerRef.value) {
     const listener = addUnlinkedScrollListener(
       viewport.value!,
-      scrollbarContextVisible?.onThumbPositionChange,
+      scrollbarContextVisible.onThumbPositionChange,
     )
     removeUnlinkedScrollListenerRef.value = listener
-    scrollbarContextVisible?.onThumbPositionChange()
+    scrollbarContextVisible.onThumbPositionChange()
   }
 }
 
-const sizes = computed(() => scrollbarContextVisible?.sizes.value)
+const sizes = computed(() => scrollbarContextVisible.sizes.value)
 
 watchOnce(sizes, () => {
-  scrollbarContextVisible?.onThumbChange(thumbElement.value!)
+  scrollbarContextVisible.onThumbChange(thumbElement.value!)
   if (viewport.value) {
     /**
      * We only bind to native scroll event so we know when scroll starts and ends.
@@ -59,21 +56,21 @@ watchOnce(sizes, () => {
      * when relevant to avoid scroll-linked effects. We cancel the loop when scroll ends.
      * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects
      */
-    scrollbarContextVisible?.onThumbPositionChange()
+    scrollbarContextVisible.onThumbPositionChange()
     viewport.value.addEventListener('scroll', handleScroll)
   }
 })
 
 onUnmounted(() => {
   viewport.value!.removeEventListener('scroll', handleScroll)
-  rootContext?.viewport.value?.removeEventListener('scroll', handleScroll)
+  rootContext.viewport.value?.removeEventListener('scroll', handleScroll)
 })
 </script>
 
 <template>
   <Primitive
     ref="primitiveElement"
-    :data-state="scrollbarContextVisible?.hasThumb ? 'visible' : 'hidden'"
+    :data-state="scrollbarContextVisible.hasThumb ? 'visible' : 'hidden'"
     :style="{
       width: 'var(--radix-scroll-area-thumb-width)',
       height: 'var(--radix-scroll-area-thumb-height)',
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaViewport.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaViewport.vue
index c7b2a3767..b26b4bed9 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaViewport.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaViewport.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onMounted, ref } from 'vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { onMounted, ref } from 'vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -10,7 +10,7 @@ import {
 export interface ScrollAreaViewportProps extends PrimitiveProps {}
 const props = defineProps<ScrollAreaViewportProps>()
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 const { primitiveElement, currentElement: contentElement }
   = usePrimitiveElement()
@@ -18,8 +18,8 @@ const { primitiveElement, currentElement: contentElement }
 const viewportElement = ref<HTMLElement>()
 
 onMounted(() => {
-  rootContext?.onViewportChange(viewportElement.value!)
-  rootContext?.onContentChange(contentElement.value!)
+  rootContext.onViewportChange(viewportElement.value!)
+  rootContext.onContentChange(contentElement.value!)
 })
 </script>
 
@@ -58,8 +58,8 @@ export default {
        * the browser from having to work out whether to render native scrollbars or not,
        * we tell it to with the intention of hiding them in CSS.
        */
-      overflowX: rootContext?.scrollbarXEnabled.value ? 'scroll' : 'hidden',
-      overflowY: rootContext?.scrollbarYEnabled.value ? 'scroll' : 'hidden',
+      overflowX: rootContext.scrollbarXEnabled.value ? 'scroll' : 'hidden',
+      overflowY: rootContext.scrollbarYEnabled.value ? 'scroll' : 'hidden',
     }"
     v-bind="$attrs"
     :tabindex="0"
diff --git a/packages/radix-vue/src/Select/SelectArrow.vue b/packages/radix-vue/src/Select/SelectArrow.vue
index c416d3da8..f91e60856 100644
--- a/packages/radix-vue/src/Select/SelectArrow.vue
+++ b/packages/radix-vue/src/Select/SelectArrow.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
-import { SELECT_CONTENT_INJECTION_KEY } from './SelectContentImpl.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
+import { injectSelectContentContext } from './SelectContentImpl.vue'
 import { PopperArrow, type PopperArrowProps } from '@/Popper'
 
 const props = defineProps<SelectArrowProps>()
-const context = inject(SELECT_INJECTION_KEY)
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
+const contentContext = injectSelectContentContext()
 
 export interface SelectArrowProps extends PopperArrowProps {}
 </script>
 
 <template>
   <PopperArrow
-    v-if="context?.open.value && contentContext?.position === 'popper'"
+    v-if="rootContext.open.value && contentContext.position === 'popper'"
     v-bind="props"
   >
     <slot />
diff --git a/packages/radix-vue/src/Select/SelectContent.vue b/packages/radix-vue/src/Select/SelectContent.vue
index 7ce4c11b7..285e7d352 100644
--- a/packages/radix-vue/src/Select/SelectContent.vue
+++ b/packages/radix-vue/src/Select/SelectContent.vue
@@ -5,12 +5,12 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import SelectContentImpl, {
   type SelectContentImplEmits,
   type SelectContentImplProps,
 } from './SelectContentImpl.vue'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
 import { Presence } from '@/Presence'
 import { useForwardPropsEmits } from '@/shared'
 import SelectProvider from './SelectProvider.vue'
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<SelectContentProps>(), {
 const emits = defineEmits<SelectContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(SELECT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
 
 const fragment = ref<DocumentFragment>()
 onMounted(() => {
@@ -36,14 +36,14 @@ const presenceRef = ref<InstanceType<typeof Presence>>()
 </script>
 
 <template>
-  <Presence ref="presenceRef" :present="context!.open.value">
+  <Presence ref="presenceRef" :present="rootContext.open.value">
     <SelectContentImpl v-bind="{ ...forwarded, ...$attrs }">
       <slot />
     </SelectContentImpl>
   </Presence>
 
   <Teleport v-if="!presenceRef?.present && fragment" :to="fragment">
-    <SelectProvider :context="context!">
+    <SelectProvider :context="rootContext">
       <div>
         <slot />
       </div>
diff --git a/packages/radix-vue/src/Select/SelectContentImpl.vue b/packages/radix-vue/src/Select/SelectContentImpl.vue
index a37cc32ab..4362b818a 100644
--- a/packages/radix-vue/src/Select/SelectContentImpl.vue
+++ b/packages/radix-vue/src/Select/SelectContentImpl.vue
@@ -1,5 +1,14 @@
 <script lang="ts">
-interface SelectContentContextValue {
+import {
+  createContext,
+  useBodyScrollLock,
+  useCollection,
+  useFocusGuards,
+  useHideOthers,
+  useTypeahead,
+} from '@/shared'
+
+interface SelectContentContext {
   content?: Ref<HTMLElement | undefined>
   viewport?: Ref<HTMLElement | undefined>
   onViewportChange: (node: HTMLElement | undefined) => void
@@ -22,14 +31,14 @@ interface SelectContentContextValue {
   searchRef?: Ref<string>
 }
 
-export const SelectContentDefaultContextValue: SelectContentContextValue = {
+export const SelectContentDefaultContextValue: SelectContentContext = {
   onViewportChange: () => {},
   itemTextRefCallback: () => {},
   itemRefCallback: () => {},
 }
 
-export const SELECT_CONTENT_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectContentContextValue>
+export const [injectSelectContentContext, provideSelectContentContext]
+  = createContext<SelectContentContext>('SelectContent')
 
 export interface SelectContentImplProps extends PopperContentProps {
   position?: 'item-aligned' | 'popper'
@@ -53,26 +62,16 @@ export type SelectContentImplEmits = {
 <script setup lang="ts">
 import {
   type ComponentPublicInstance,
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
-  provide,
   ref,
   watch,
   watchEffect,
 } from 'vue'
 import { unrefElement } from '@vueuse/core'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
 import SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'
 import SelectPopperPosition from './SelectPopperPosition.vue'
-import {
-  useBodyScrollLock,
-  useCollection,
-  useFocusGuards,
-  useHideOthers,
-  useTypeahead,
-} from '@/shared'
 import { FocusScope } from '@/FocusScope'
 import {
   DismissableLayer,
@@ -84,7 +83,7 @@ import type { PopperContentProps } from '@/Popper'
 const props = defineProps<SelectContentImplProps>()
 const emits = defineEmits<SelectContentImplEmits>()
 
-const context = inject(SELECT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
 
 useFocusGuards()
 useBodyScrollLock(true)
@@ -113,7 +112,7 @@ watch(isPositioned, () => {
 
 // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`
 // and close on `pointerup` outside.
-const { onOpenChange, triggerPointerDownPosRef } = context!
+const { onOpenChange, triggerPointerDownPosRef } = rootContext
 watchEffect((cleanupFn) => {
   if (!content.value)
     return
@@ -197,7 +196,7 @@ const pickedProps = computed(() => {
   else return {}
 })
 
-provide(SELECT_CONTENT_INJECTION_KEY, {
+provideSelectContentContext({
   content,
   viewport,
   onViewportChange: (node) => {
@@ -206,8 +205,8 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
   itemRefCallback: (node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.value && !disabled
     const isSelectedItem
-      = context?.modelValue?.value !== undefined
-      && context?.modelValue?.value === value
+      = rootContext.modelValue?.value !== undefined
+      && rootContext.modelValue?.value === value
     if (isSelectedItem || isFirstValidItem) {
       selectedItem.value = node
       if (isFirstValidItem)
@@ -222,8 +221,8 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
   itemTextRefCallback: (node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.value && !disabled
     const isSelectedItem
-      = context?.modelValue?.value !== undefined
-      && context?.modelValue?.value === value
+      = rootContext.modelValue?.value !== undefined
+      && rootContext.modelValue?.value === value
     if (isSelectedItem || isFirstValidItem)
       selectedItemText.value = node
   },
@@ -242,7 +241,7 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
       (event) => {
         emits('closeAutoFocus', event);
         if (event.defaultPrevented) return;
-        context?.triggerElement.value?.focus({ preventScroll: true });
+        rootContext.triggerElement.value?.focus({ preventScroll: true });
         event.preventDefault();
       }
     "
@@ -251,7 +250,7 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
       as-child
       disable-outside-pointer-events
       @focus-outside.prevent
-      @dismiss="context?.onOpenChange(false)"
+      @dismiss="rootContext.onOpenChange(false)"
       @escape-key-down="emits('escapeKeyDown', $event)"
       @pointer-down-outside="emits('pointerDownOutside', $event)"
     >
@@ -262,7 +261,7 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
             : SelectItemAlignedPosition
         "
         v-bind="{ ...$attrs, ...pickedProps }"
-        :id="context?.contentId"
+        :id="rootContext.contentId"
         :ref="
           (vnode: ComponentPublicInstance) => {
             content = unrefElement(vnode) as HTMLElement
@@ -270,8 +269,8 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
           }
         "
         role="listbox"
-        :data-state="context?.open.value ? 'open' : 'closed'"
-        :dir="context?.dir.value"
+        :data-state="rootContext.open.value ? 'open' : 'closed'"
+        :dir="rootContext.dir.value"
         :style="{
           // flex layout so we can place the scroll buttons properly
           display: 'flex',
@@ -281,7 +280,7 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
         }"
         @contextmenu.prevent
         @placed="isPositioned = true"
-        @keydown="handleKeyDown"
+        @keydown="(handleKeyDown as any)"
       >
         <slot />
       </component>
diff --git a/packages/radix-vue/src/Select/SelectGroup.vue b/packages/radix-vue/src/Select/SelectGroup.vue
index 217da22d1..f635e2b4e 100644
--- a/packages/radix-vue/src/Select/SelectGroup.vue
+++ b/packages/radix-vue/src/Select/SelectGroup.vue
@@ -1,24 +1,23 @@
 <script lang="ts">
+import { createContext, useId } from '@/shared'
+
 export interface SelectGroupProps extends PrimitiveProps {}
 
-interface SelectGroupContextValue {
+interface SelectGroupContext {
   id: string
 }
-export const SELECT_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectGroupContextValue>
+
+export const [injectSelectGroupContext, provideSelectGroupContext]
+  = createContext<SelectGroupContext>('SelectGroup')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, provide } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { useId } from '@/shared'
 
 const props = defineProps<SelectGroupProps>()
 
 const id = useId()
-provide(SELECT_GROUP_INJECTION_KEY, {
-  id,
-})
+provideSelectGroupContext({ id })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Select/SelectItem.vue b/packages/radix-vue/src/Select/SelectItem.vue
index c5f81cd65..cd543a5b9 100644
--- a/packages/radix-vue/src/Select/SelectItem.vue
+++ b/packages/radix-vue/src/Select/SelectItem.vue
@@ -1,5 +1,7 @@
 <script lang="ts">
-interface SelectItemContextValue {
+import { createContext, useId } from '@/shared'
+
+interface SelectItemContext {
   value: string
   textId: string
   disabled: Ref<boolean>
@@ -7,8 +9,8 @@ interface SelectItemContextValue {
   onItemTextChange(node: HTMLElement | undefined): void
 }
 
-export const SELECT_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectItemContextValue>
+export const [injectSelectItemContext, provideSelectItemContext]
+  = createContext<SelectItemContext>('SelectItem')
 
 export interface SelectItemProps extends PrimitiveProps {
   value: string
@@ -19,34 +21,30 @@ export interface SelectItemProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
   nextTick,
   onMounted,
-  provide,
   ref,
   toRefs,
 } from 'vue'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { SELECTION_KEYS } from './utils'
 import {
   Primitive,
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
-import { useId } from '@/shared'
 
 const props = defineProps<SelectItemProps>()
 const { disabled } = toRefs(props)
 
-const context = inject(SELECT_INJECTION_KEY)
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
+const rootContext = injectSelectRootContext()
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const isSelected = computed(() => context?.modelValue?.value === props.value)
+const isSelected = computed(() => rootContext.modelValue?.value === props.value)
 const isFocused = ref(false)
 const textValue = ref(props.textValue ?? '')
 const textId = useId()
@@ -57,8 +55,8 @@ async function handleSelect(ev?: PointerEvent) {
     return
 
   if (!disabled.value) {
-    context!.onValueChange(props.value)
-    context!.onOpenChange(false)
+    rootContext.onValueChange(props.value)
+    rootContext.onOpenChange(false)
   }
 }
 
@@ -67,7 +65,7 @@ async function handlePointerMove(event: PointerEvent) {
   if (event.defaultPrevented)
     return
   if (disabled.value) {
-    contentContext!.onItemLeave?.()
+    contentContext.onItemLeave?.()
   }
   else {
     // even though safari doesn't support this option, it's acceptable
@@ -81,14 +79,14 @@ async function handlePointerLeave(event: PointerEvent) {
   if (event.defaultPrevented)
     return
   if (event.currentTarget === document.activeElement)
-    contentContext!.onItemLeave?.()
+    contentContext.onItemLeave?.()
 }
 
 async function handleKeyDown(event: KeyboardEvent) {
   await nextTick()
   if (event.defaultPrevented)
     return
-  const isTypingAhead = contentContext!.searchRef?.value !== ''
+  const isTypingAhead = contentContext.searchRef?.value !== ''
   if (isTypingAhead && event.key === ' ')
     return
   if (SELECTION_KEYS.includes(event.key))
@@ -107,14 +105,14 @@ if (props.value === '') {
 onMounted(() => {
   if (!currentElement.value)
     return
-  contentContext?.itemRefCallback(
+  contentContext.itemRefCallback(
     currentElement.value,
     props.value,
     props.disabled,
   )
 })
 
-provide(SELECT_ITEM_INJECTION_KEY, {
+provideSelectItemContext({
   value: props.value,
   disabled,
   textId,
diff --git a/packages/radix-vue/src/Select/SelectItemAlignedPosition.vue b/packages/radix-vue/src/Select/SelectItemAlignedPosition.vue
index 70e39184d..0fabfb2cd 100644
--- a/packages/radix-vue/src/Select/SelectItemAlignedPosition.vue
+++ b/packages/radix-vue/src/Select/SelectItemAlignedPosition.vue
@@ -1,11 +1,26 @@
+<script lang="ts">
+import { createContext, useCollection } from '@/shared'
+
+interface SelectItemAlignedPositionContext {
+  contentWrapper?: Ref<HTMLElement | undefined>
+  shouldExpandOnScrollRef?: Ref<boolean>
+  onScrollButtonChange: (node: HTMLElement | undefined) => void
+}
+
+export const [injectSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext]
+  = createContext<SelectItemAlignedPositionContext>('SelectItemAlignedPosition')
+
+export default {
+  inheritAttrs: false,
+}
+</script>
+
 <script setup lang="ts">
-import { inject, onMounted, provide, ref } from 'vue'
+import { type Ref, onMounted, ref } from 'vue'
 import { clamp } from '@vueuse/shared'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
-import { SELECT_CONTENT_INJECTION_KEY } from './SelectContentImpl.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
+import { injectSelectContentContext } from './SelectContentImpl.vue'
 import { CONTENT_MARGIN } from './utils'
-import { SELECT_VIEWPORT_INJECTION_KEY } from './SelectViewport.vue'
-import { useCollection } from '@/shared'
 import {
   Primitive,
   type PrimitiveProps,
@@ -20,8 +35,8 @@ const emits = defineEmits<{
 }>()
 
 const { injectCollection } = useCollection()
-const context = inject(SELECT_INJECTION_KEY)
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
+const contentContext = injectSelectContentContext()
 const collectionItems = injectCollection()
 
 const shouldExpandOnScrollRef = ref(false)
@@ -36,25 +51,24 @@ const { viewport, selectedItem, selectedItemText, focusSelectedItem }
 
 function position() {
   if (
-    context
-    && context.triggerElement.value
-    && context.valueElement.value
+    rootContext.triggerElement.value
+    && rootContext.valueElement.value
     && contentWrapperElement.value
     && contentElement.value
     && viewport?.value
     && selectedItem?.value
     && selectedItemText?.value
   ) {
-    const triggerRect = context.triggerElement.value.getBoundingClientRect()
+    const triggerRect = rootContext.triggerElement.value.getBoundingClientRect()
 
     // -----------------------------------------------------------------------------------------
     //  Horizontal positioning
     // -----------------------------------------------------------------------------------------
     const contentRect = contentElement.value.getBoundingClientRect()
-    const valueNodeRect = context.valueElement.value.getBoundingClientRect()
+    const valueNodeRect = rootContext.valueElement.value.getBoundingClientRect()
     const itemTextRect = selectedItemText.value.getBoundingClientRect()
 
-    if (context.dir.value !== 'rtl') {
+    if (rootContext.dir.value !== 'rtl') {
       const itemTextOffset = itemTextRect.left - contentRect.left
       const left = valueNodeRect.left - itemTextOffset
       const leftDelta = triggerRect.left - left
@@ -204,19 +218,13 @@ function handleScrollButtonChange(node: HTMLElement | undefined) {
   }
 }
 
-provide(SELECT_VIEWPORT_INJECTION_KEY, {
+provideSelectItemAlignedPositionContext({
   contentWrapper: contentWrapperElement,
   shouldExpandOnScrollRef,
   onScrollButtonChange: handleScrollButtonChange,
 })
 </script>
 
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
 <template>
   <div
     ref="contentWrapperElement"
diff --git a/packages/radix-vue/src/Select/SelectItemIndicator.vue b/packages/radix-vue/src/Select/SelectItemIndicator.vue
index ce9133ddd..dc5215715 100644
--- a/packages/radix-vue/src/Select/SelectItemIndicator.vue
+++ b/packages/radix-vue/src/Select/SelectItemIndicator.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { SELECT_ITEM_INJECTION_KEY } from './SelectItem.vue'
+import { injectSelectItemContext } from './SelectItem.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface SelectItemIndicatorProps extends PrimitiveProps {}
@@ -8,11 +7,11 @@ const props = withDefaults(defineProps<SelectItemIndicatorProps>(), {
   as: 'span',
 })
 
-const itemContext = inject(SELECT_ITEM_INJECTION_KEY)
+const itemContext = injectSelectItemContext()
 </script>
 
 <template>
-  <Primitive v-if="itemContext?.isSelected.value" aria-hidden v-bind="props">
+  <Primitive v-if="itemContext.isSelected.value" aria-hidden v-bind="props">
     <slot />
   </Primitive>
 </template>
diff --git a/packages/radix-vue/src/Select/SelectItemText.vue b/packages/radix-vue/src/Select/SelectItemText.vue
index 8e4a7209d..381a5f551 100644
--- a/packages/radix-vue/src/Select/SelectItemText.vue
+++ b/packages/radix-vue/src/Select/SelectItemText.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed, h, inject, onMounted } from 'vue'
-import { SELECT_INJECTION_KEY, SELECT_NATIVE_OPTIONS_INJECTION_KEY } from './SelectRoot.vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
-import { SELECT_ITEM_INJECTION_KEY } from './SelectItem.vue'
+import { computed, h, onMounted } from 'vue'
+import { injectSelectNativeOptionsContext, injectSelectRootContext } from './SelectRoot.vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import {
   Primitive,
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
+import { injectSelectItemContext } from './SelectItem.vue'
 
 export interface SelectItemTextProps extends PrimitiveProps {}
 
@@ -15,34 +15,33 @@ const props = withDefaults(defineProps<SelectItemTextProps>(), {
   as: 'span',
 })
 
-const context = inject(SELECT_INJECTION_KEY)
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
-const nativeOptionContext = inject(SELECT_NATIVE_OPTIONS_INJECTION_KEY)
-const itemContext = inject(SELECT_ITEM_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
+const nativeOptionContext = injectSelectNativeOptionsContext()
+const itemContext = injectSelectItemContext()
 
 const { primitiveElement, currentElement: itemTextElement }
   = usePrimitiveElement()
 
 const nativeOption = computed(() => {
   return h('option', {
-    key: itemContext?.value,
-    value: itemContext?.value,
-    disabled: itemContext?.disabled.value,
+    key: itemContext.value,
+    value: itemContext.value,
+    disabled: itemContext.disabled.value,
     innerHTML: itemTextElement.value?.textContent,
   })
 })
 
-const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionContext!
 onMounted(() => {
   if (!itemTextElement.value)
     return
-  itemContext?.onItemTextChange(itemTextElement.value)
-  contentContext?.itemTextRefCallback(
+  itemContext.onItemTextChange(itemTextElement.value)
+  contentContext.itemTextRefCallback(
     itemTextElement.value,
-    itemContext!.value,
-    itemContext!.disabled.value,
+    itemContext.value,
+    itemContext.disabled.value,
   )
-  onNativeOptionAdd(nativeOption.value)
+  nativeOptionContext.onNativeOptionAdd(nativeOption.value)
 })
 
 // onBeforeUnmount(() => {
@@ -57,12 +56,12 @@ export default {
 </script>
 
 <template>
-  <Primitive :id="itemContext?.textId" ref="primitiveElement" v-bind="{ ...props, ...$attrs }">
+  <Primitive :id="itemContext.textId" ref="primitiveElement" v-bind="{ ...props, ...$attrs }">
     <slot />
   </Primitive>
 
   <!-- Portal the select item text into the trigger value node -->
-  <Teleport v-if="itemContext?.isSelected.value && context?.valueElement.value && !context.valueElementHasChildren.value" :to="context?.valueElement.value">
+  <Teleport v-if="itemContext.isSelected.value && rootContext.valueElement.value && !rootContext.valueElementHasChildren.value" :to="rootContext.valueElement.value">
     <slot />
   </Teleport>
 </template>
diff --git a/packages/radix-vue/src/Select/SelectLabel.vue b/packages/radix-vue/src/Select/SelectLabel.vue
index 0728e118c..c5ea31c10 100644
--- a/packages/radix-vue/src/Select/SelectLabel.vue
+++ b/packages/radix-vue/src/Select/SelectLabel.vue
@@ -7,16 +7,13 @@ export interface SelectLabelProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { SELECT_GROUP_INJECTION_KEY } from './SelectGroup.vue'
+import { injectSelectGroupContext } from './SelectGroup.vue'
 
 const props = withDefaults(defineProps<SelectLabelProps>(), {
   as: 'label',
 })
 
-const groupContext = inject(SELECT_GROUP_INJECTION_KEY, {
-  id: '',
-})
+const groupContext = injectSelectGroupContext({ id: '' })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Select/SelectProvider.vue b/packages/radix-vue/src/Select/SelectProvider.vue
index 4cdb5cea6..fe6e3ded0 100644
--- a/packages/radix-vue/src/Select/SelectProvider.vue
+++ b/packages/radix-vue/src/Select/SelectProvider.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { provide } from 'vue'
-import { SELECT_INJECTION_KEY, type SelectProvideValue } from './SelectRoot.vue'
+import type { SelectRootContext } from './SelectRoot.vue'
+import { provideSelectRootContext } from './SelectRoot.vue'
 
 const props = defineProps<{
-  context: SelectProvideValue
+  context: SelectRootContext
 }>()
 
-provide(SELECT_INJECTION_KEY, props.context)
+provideSelectRootContext(props.context)
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Select/SelectRoot.vue b/packages/radix-vue/src/Select/SelectRoot.vue
index 2334e24dc..167bd4607 100644
--- a/packages/radix-vue/src/Select/SelectRoot.vue
+++ b/packages/radix-vue/src/Select/SelectRoot.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
-import type { InjectionKey, Ref, VNode } from 'vue'
+import type { Ref, VNode } from 'vue'
 import type { DataOrientation, Direction } from '../shared/types'
 import BubbleSelect from './BubbleSelect.vue'
-import { useId } from '@/shared'
+import { createContext, useId } from '@/shared'
 
 export interface SelectRootProps {
   open?: boolean
@@ -21,10 +21,7 @@ export type SelectRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const SELECT_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectProvideValue>
-
-export interface SelectProvideValue {
+export interface SelectRootContext {
   triggerElement: Ref<HTMLElement | undefined>
   onTriggerChange(node: HTMLElement | undefined): void
   valueElement: Ref<HTMLElement | undefined>
@@ -42,17 +39,20 @@ export interface SelectProvideValue {
   disabled?: Ref<boolean>
 }
 
-export interface SelectNativeOptionsContextValue {
+export const [injectSelectRootContext, provideSelectRootContext]
+  = createContext<SelectRootContext>('SelectRoot')
+
+export interface SelectNativeOptionsContext {
   onNativeOptionAdd(option: VNode): void
   onNativeOptionRemove(option: VNode): void
 }
 
-export const SELECT_NATIVE_OPTIONS_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectNativeOptionsContextValue>
+export const [injectSelectNativeOptionsContext, provideSelectNativeOptionsContext]
+  = createContext<SelectNativeOptionsContext>('SelectRoot')
 </script>
 
 <script setup lang="ts">
-import { computed, provide, ref, toRefs } from 'vue'
+import { computed, ref, toRefs } from 'vue'
 import { PopperRoot } from '@/Popper'
 import { useVModel } from '@vueuse/core'
 
@@ -85,27 +85,27 @@ const triggerPointerDownPosRef = ref({
 const valueElementHasChildren = ref(false)
 
 const { required, disabled, dir } = toRefs(props)
-provide<SelectProvideValue>(SELECT_INJECTION_KEY, {
+provideSelectRootContext({
   triggerElement,
-  onTriggerChange: (node: HTMLElement | undefined) => {
+  onTriggerChange: (node) => {
     triggerElement.value = node
   },
   valueElement,
-  onValueElementChange: (node: HTMLElement | undefined) => {
+  onValueElementChange: (node) => {
     valueElement.value = node
   },
   valueElementHasChildren,
-  onValueElementHasChildrenChange: (hasChildren: boolean) => {
+  onValueElementHasChildrenChange: (hasChildren) => {
     valueElementHasChildren.value = hasChildren
   },
   contentId: useId(),
   modelValue,
-  onValueChange: (value: string) => {
+  onValueChange: (value) => {
     modelValue.value = value
   },
   open,
   required,
-  onOpenChange: (value: boolean) => {
+  onOpenChange: (value) => {
     open.value = value
   },
   dir,
@@ -130,7 +130,7 @@ const nativeSelectKey = computed(() => {
     .join(';')
 })
 
-provide(SELECT_NATIVE_OPTIONS_INJECTION_KEY, {
+provideSelectNativeOptionsContext({
   onNativeOptionAdd: (option) => {
     nativeOptionsSet.value.add(option)
   },
diff --git a/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue b/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue
index ec2e0b56e..e3cda7cdc 100644
--- a/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue
+++ b/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onBeforeUnmount, ref, watchEffect } from 'vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
+import { onBeforeUnmount, ref, watchEffect } from 'vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { Primitive } from '@/Primitive'
 import { useCollection } from '@/shared'
 
@@ -12,7 +12,7 @@ const emits = defineEmits<SelectScrollButtonImplEmits>()
 const { injectCollection } = useCollection()
 
 const collectionItems = injectCollection()
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
 const autoScrollTimerRef = ref<number | null>(null)
 
 function clearAutoScrollTimer() {
@@ -38,7 +38,7 @@ function handlePointerDown() {
 }
 
 function handlePointerMove() {
-  contentContext!.onItemLeave?.()
+  contentContext.onItemLeave?.()
   if (autoScrollTimerRef.value === null) {
     autoScrollTimerRef.value = window.setInterval(() => {
       emits('autoScroll')
diff --git a/packages/radix-vue/src/Select/SelectScrollDownButton.vue b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
index dc6fe080b..75b64d0dd 100644
--- a/packages/radix-vue/src/Select/SelectScrollDownButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { inject, ref, watch, watchEffect } from 'vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
-import { SELECT_VIEWPORT_INJECTION_KEY } from './SelectViewport.vue'
+import { ref, watch, watchEffect } from 'vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'
 import { type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
+import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
 
 export interface SelectScrollDownButtonProps extends PrimitiveProps {}
 defineProps<SelectScrollDownButtonProps>()
 
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
-const viewportContext
-  = contentContext!.position === 'item-aligned'
-    ? inject(SELECT_VIEWPORT_INJECTION_KEY)
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
+const alignedPositionContext
+  = contentContext.position === 'item-aligned'
+    ? injectSelectItemAlignedPositionContext()
     : undefined
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
@@ -19,8 +19,8 @@ const { primitiveElement, currentElement } = usePrimitiveElement()
 const canScrollDown = ref(false)
 
 watchEffect((cleanupFn) => {
-  if (contentContext!.viewport?.value && contentContext!.isPositioned?.value) {
-    const viewport = contentContext!.viewport.value
+  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
+    const viewport = contentContext.viewport.value
 
     function handleScroll() {
       const maxScroll = viewport.scrollHeight - viewport.clientHeight
@@ -37,7 +37,7 @@ watchEffect((cleanupFn) => {
 
 watch(currentElement, () => {
   if (currentElement.value)
-    viewportContext?.onScrollButtonChange(currentElement.value)
+    alignedPositionContext?.onScrollButtonChange(currentElement.value)
 })
 </script>
 
@@ -47,7 +47,7 @@ watch(currentElement, () => {
     ref="primitiveElement"
     @auto-scroll="
       () => {
-        const { viewport, selectedItem } = contentContext!;
+        const { viewport, selectedItem } = contentContext;
         if (viewport?.value && selectedItem?.value) {
           viewport.value.scrollTop = viewport.value.scrollTop + selectedItem.value.offsetHeight;
         }
diff --git a/packages/radix-vue/src/Select/SelectScrollUpButton.vue b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
index dd03a2669..70a902a13 100644
--- a/packages/radix-vue/src/Select/SelectScrollUpButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { inject, ref, watch, watchEffect } from 'vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
-import { SELECT_VIEWPORT_INJECTION_KEY } from './SelectViewport.vue'
+import { ref, watch, watchEffect } from 'vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'
 import { type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
+import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
 
 export interface SelectScrollUpButtonProps extends PrimitiveProps {}
 defineProps<SelectScrollUpButtonProps>()
 
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
-const viewportContext
-  = contentContext!.position === 'item-aligned'
-    ? inject(SELECT_VIEWPORT_INJECTION_KEY)
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
+const alignedPositionContext
+  = contentContext.position === 'item-aligned'
+    ? injectSelectItemAlignedPositionContext()
     : undefined
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
@@ -19,8 +19,8 @@ const { primitiveElement, currentElement } = usePrimitiveElement()
 const canScrollUp = ref(false)
 
 watchEffect((cleanupFn) => {
-  if (contentContext!.viewport?.value && contentContext!.isPositioned?.value) {
-    const viewport = contentContext!.viewport.value
+  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
+    const viewport = contentContext.viewport.value
 
     function handleScroll() {
       canScrollUp.value = viewport.scrollTop > 0
@@ -34,7 +34,7 @@ watchEffect((cleanupFn) => {
 
 watch(currentElement, () => {
   if (currentElement.value)
-    viewportContext?.onScrollButtonChange(currentElement.value)
+    alignedPositionContext?.onScrollButtonChange(currentElement.value)
 })
 </script>
 
@@ -43,7 +43,7 @@ watch(currentElement, () => {
     v-if="canScrollUp"
     ref="primitiveElement"
     @auto-scroll="() => {
-      const { viewport, selectedItem } = contentContext!;
+      const { viewport, selectedItem } = contentContext;
       if (viewport?.value && selectedItem?.value) {
         viewport.value.scrollTop = viewport.value.scrollTop - selectedItem.value.offsetHeight;
       }
diff --git a/packages/radix-vue/src/Select/SelectTrigger.vue b/packages/radix-vue/src/Select/SelectTrigger.vue
index 3557a347e..15efdef24 100644
--- a/packages/radix-vue/src/Select/SelectTrigger.vue
+++ b/packages/radix-vue/src/Select/SelectTrigger.vue
@@ -5,10 +5,9 @@ export interface SelectTriggerProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 import {
-  SELECT_INJECTION_KEY,
-  type SelectProvideValue,
+  injectSelectRootContext,
 } from './SelectRoot.vue'
 import { OPEN_KEYS, shouldShowPlaceholder } from './utils'
 import {
@@ -22,15 +21,15 @@ import { useCollection, useTypeahead } from '@/shared'
 const props = withDefaults(defineProps<SelectTriggerProps>(), {
   as: 'button',
 })
-const context = inject<SelectProvideValue>(SELECT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
 
-const isDisabled = computed(() => context?.disabled?.value || props.disabled)
+const isDisabled = computed(() => rootContext.disabled?.value || props.disabled)
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
 
 onMounted(() => {
-  context!.triggerElement = triggerElement
+  rootContext.triggerElement = triggerElement
 })
 
 const { injectCollection } = useCollection()
@@ -40,7 +39,7 @@ const { search, handleTypeaheadSearch, resetTypeahead }
   = useTypeahead(collectionItems)
 function handleOpen() {
   if (!isDisabled.value) {
-    context!.onOpenChange(true)
+    rootContext.onOpenChange(true)
     // reset typeahead when we open
     resetTypeahead()
   }
@@ -53,15 +52,15 @@ function handleOpen() {
       ref="primitiveElement"
       role="combobox"
       :type="as === 'button' ? 'button' : undefined"
-      :aria-controls="context?.contentId"
-      :aria-expanded="context?.open.value || false"
-      :aria-required="context?.required?.value"
+      :aria-controls="rootContext.contentId"
+      :aria-expanded="rootContext.open.value || false"
+      :aria-required="rootContext.required?.value"
       aria-autocomplete="none"
-      :dir="context?.dir.value"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :dir="rootContext.dir.value"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       :data-disabled="isDisabled ? '' : undefined"
       :data-placeholder="
-        shouldShowPlaceholder(context?.modelValue?.value) ? '' : undefined
+        shouldShowPlaceholder(rootContext.modelValue?.value) ? '' : undefined
       "
       :as-child="asChild"
       :as="as"
@@ -88,7 +87,7 @@ function handleOpen() {
           // but not when the control key is pressed (avoiding MacOS right click)
           if (event.button === 0 && event.ctrlKey === false) {
             handleOpen();
-            context!.triggerPointerDownPosRef.value = {
+            rootContext.triggerPointerDownPosRef.value = {
               x: Math.round(event.pageX),
               y: Math.round(event.pageY),
             };
diff --git a/packages/radix-vue/src/Select/SelectValue.vue b/packages/radix-vue/src/Select/SelectValue.vue
index 521a6dc5f..aab2ae963 100644
--- a/packages/radix-vue/src/Select/SelectValue.vue
+++ b/packages/radix-vue/src/Select/SelectValue.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { inject, onBeforeMount, onMounted, useSlots } from 'vue'
+import { onBeforeMount, onMounted, useSlots } from 'vue'
 import { shouldShowPlaceholder } from './utils'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -20,16 +20,16 @@ withDefaults(defineProps<SelectValueProps>(), {
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(SELECT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
 const slots = useSlots()
 
 onBeforeMount(() => {
   const hasChildren = !!renderSlotFragments(slots?.default?.()).length
-  context!.onValueElementHasChildrenChange(hasChildren)
+  rootContext.onValueElementHasChildrenChange(hasChildren)
 })
 
 onMounted(() => {
-  context!.valueElement = currentElement
+  rootContext.valueElement = currentElement
 })
 </script>
 
@@ -40,7 +40,7 @@ onMounted(() => {
     :as-child="asChild"
     :style="{ pointerEvents: 'none' }"
   >
-    <template v-if="shouldShowPlaceholder(context?.modelValue?.value)">
+    <template v-if="shouldShowPlaceholder(rootContext.modelValue?.value)">
       {{ placeholder }}
     </template>
 
diff --git a/packages/radix-vue/src/Select/SelectViewport.vue b/packages/radix-vue/src/Select/SelectViewport.vue
index 7ed6777c2..6bb56629a 100644
--- a/packages/radix-vue/src/Select/SelectViewport.vue
+++ b/packages/radix-vue/src/Select/SelectViewport.vue
@@ -1,32 +1,24 @@
 <script lang="ts">
-interface SelectViewportContextValue {
-  contentWrapper?: Ref<HTMLElement | undefined>
-  shouldExpandOnScrollRef?: Ref<boolean>
-  onScrollButtonChange: (node: HTMLElement | undefined) => void
-}
-
-export const SELECT_VIEWPORT_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectViewportContextValue>
-
 export interface SelectViewportProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, inject, onMounted, ref } from 'vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
+import { onMounted, ref } from 'vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { CONTENT_MARGIN } from './utils'
 import {
   Primitive,
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
+import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
 
 const props = defineProps<SelectViewportProps>()
 
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
-const viewportContext
-  = contentContext?.position === 'item-aligned'
-    ? inject(SELECT_VIEWPORT_INJECTION_KEY)
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
+const alignedPositionContext
+  = contentContext.position === 'item-aligned'
+    ? injectSelectItemAlignedPositionContext()
     : undefined
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
@@ -39,7 +31,7 @@ const prevScrollTopRef = ref(0)
 
 function handleScroll(event: WheelEvent) {
   const viewport = event.currentTarget as HTMLElement
-  const { shouldExpandOnScrollRef, contentWrapper } = viewportContext ?? {}
+  const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {}
   if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {
     const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop)
     if (scrolledBy > 0) {
diff --git a/packages/radix-vue/src/Slider/SliderHorizontal.vue b/packages/radix-vue/src/Slider/SliderHorizontal.vue
index 1d46f4f68..8387cf4c3 100644
--- a/packages/radix-vue/src/Slider/SliderHorizontal.vue
+++ b/packages/radix-vue/src/Slider/SliderHorizontal.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { usePrimitiveElement } from '@/Primitive'
 import SliderImpl from './SliderImpl.vue'
-import { computed, provide, ref, toRefs } from 'vue'
+import { computed, ref, toRefs } from 'vue'
 import type { Direction, SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'
-import { BACK_KEYS, SLIDER_ORIENTATION_INJECTION_KEY, linearScale } from './utils'
+import { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'
 
 interface SliderHorizontalProps extends SliderOrientationPrivateProps {
   dir?: Direction
@@ -28,7 +28,7 @@ function getValueFromPointer(pointerPosition: number) {
   return value(pointerPosition - rect.left)
 }
 
-provide(SLIDER_ORIENTATION_INJECTION_KEY, {
+provideSliderOrientationContext({
   startEdge: isSlidingFromLeft.value ? 'left' : 'right',
   endEdge: isSlidingFromLeft.value ? 'right' : 'left',
   direction: isSlidingFromLeft.value ? 1 : -1,
diff --git a/packages/radix-vue/src/Slider/SliderImpl.vue b/packages/radix-vue/src/Slider/SliderImpl.vue
index 8cecc1468..dd0567347 100644
--- a/packages/radix-vue/src/Slider/SliderImpl.vue
+++ b/packages/radix-vue/src/Slider/SliderImpl.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { SLIDER_INJECTION_KEY } from './SliderRoot.vue'
+import { injectSliderRootContext } from './SliderRoot.vue'
 import { ARROW_KEYS, PAGE_KEYS } from './utils'
 
 export type SliderImplEmits = {
@@ -19,7 +18,7 @@ const props = withDefaults(defineProps<SliderImplProps>(), {
   as: 'span',
 })
 const emits = defineEmits<SliderImplEmits>()
-const context = inject(SLIDER_INJECTION_KEY)
+const rootContext = injectSliderRootContext()
 </script>
 
 <template>
@@ -49,7 +48,7 @@ const context = inject(SLIDER_INJECTION_KEY)
       event.preventDefault();
       // Touch devices have a delay before focusing so won't focus if touch immediately moves
       // away from target (sliding). We want thumb to focus regardless.
-      if (context!.thumbElements.value.includes(target)) {
+      if (rootContext.thumbElements.value.includes(target)) {
         target.focus();
       }
       else {
diff --git a/packages/radix-vue/src/Slider/SliderRange.vue b/packages/radix-vue/src/Slider/SliderRange.vue
index ea9895fbe..0dbbbc71f 100644
--- a/packages/radix-vue/src/Slider/SliderRange.vue
+++ b/packages/radix-vue/src/Slider/SliderRange.vue
@@ -3,27 +3,27 @@ export interface SliderRangeProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { SLIDER_INJECTION_KEY } from './SliderRoot.vue'
-import { SLIDER_ORIENTATION_INJECTION_KEY, convertValueToPercentage } from './utils'
+import { injectSliderRootContext } from './SliderRoot.vue'
+import { convertValueToPercentage, injectSliderOrientationContext } from './utils'
 
 withDefaults(defineProps<SliderRangeProps>(), { as: 'span' })
-const context = inject(SLIDER_INJECTION_KEY)
-const orientation = inject(SLIDER_ORIENTATION_INJECTION_KEY)
+const rootContext = injectSliderRootContext()
+const orientation = injectSliderOrientationContext()
 
-const percentages = computed(() => context?.modelValue?.value?.map(value =>
-  convertValueToPercentage(value, context.min.value, context.max.value),
+const percentages = computed(() => rootContext.modelValue?.value?.map(value =>
+  convertValueToPercentage(value, rootContext.min.value, rootContext.max.value),
 ))
 
-const offsetStart = computed(() => context!.modelValue!.value!.length > 1 ? Math.min(...percentages.value!) : 0)
+const offsetStart = computed(() => rootContext.modelValue!.value!.length > 1 ? Math.min(...percentages.value!) : 0)
 const offsetEnd = computed(() => 100 - Math.max(...percentages.value!))
 </script>
 
 <template>
   <Primitive
-    :data-disabled="context?.disabled.value"
-    :data-orientation="context?.orientation.value"
+    :data-disabled="rootContext.disabled.value"
+    :data-orientation="rootContext.orientation.value"
     :as-child="asChild"
     :as="as"
     :style="{
diff --git a/packages/radix-vue/src/Slider/SliderRoot.vue b/packages/radix-vue/src/Slider/SliderRoot.vue
index f2c678ae7..6bbc7f786 100644
--- a/packages/radix-vue/src/Slider/SliderRoot.vue
+++ b/packages/radix-vue/src/Slider/SliderRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { DataOrientation, Direction } from '../shared/types'
-import { useCollection } from '@/shared'
+import { createContext, useCollection } from '@/shared'
 
 export interface SliderRootProps extends PrimitiveProps {
   name?: string
@@ -16,7 +16,12 @@ export interface SliderRootProps extends PrimitiveProps {
   minStepsBetweenThumbs?: number
 }
 
-export interface SliderProvideValue {
+export type SliderRootEmits = {
+  'update:modelValue': [payload: number[] | undefined]
+  'valueCommit': [payload: number[]]
+}
+
+export interface SliderRootContext {
   orientation: Ref<DataOrientation>
   disabled: Ref<boolean>
   min: Ref<number>
@@ -26,13 +31,8 @@ export interface SliderProvideValue {
   thumbElements: Ref<HTMLElement[]>
 }
 
-export type SliderRootEmits = {
-  'update:modelValue': [payload: number[] | undefined]
-  'valueCommit': [payload: number[]]
-}
-
-export const SLIDER_INJECTION_KEY
-  = Symbol() as InjectionKey<SliderProvideValue>
+export const [injectSliderRootContext, provideSliderRootContext]
+  = createContext<SliderRootContext>('SliderRoot')
 
 export default {
   inheritAttrs: false,
@@ -42,7 +42,7 @@ export default {
 <script setup lang="ts">
 import SliderHorizontal from './SliderHorizontal.vue'
 import SliderVertical from './SliderVertical.vue'
-import { type InjectionKey, type Ref, provide, ref, toRefs } from 'vue'
+import { type Ref, ref, toRefs } from 'vue'
 import {
   type PrimitiveProps,
   usePrimitiveElement,
@@ -114,7 +114,7 @@ function updateValues(value: number, atIndex: number, { commit } = { commit: fal
 }
 
 const thumbElements = ref<HTMLElement[]>([])
-provide(SLIDER_INJECTION_KEY, {
+provideSliderRootContext({
   modelValue,
   valueIndexToChangeRef,
   thumbElements,
diff --git a/packages/radix-vue/src/Slider/SliderThumbImpl.vue b/packages/radix-vue/src/Slider/SliderThumbImpl.vue
index 4f7b90764..38325f12a 100644
--- a/packages/radix-vue/src/Slider/SliderThumbImpl.vue
+++ b/packages/radix-vue/src/Slider/SliderThumbImpl.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
-import { computed, inject, onMounted, onUnmounted } from 'vue'
-import { SLIDER_INJECTION_KEY } from './SliderRoot.vue'
-import { SLIDER_ORIENTATION_INJECTION_KEY, convertValueToPercentage, getLabel, getThumbInBoundsOffset } from './utils'
+import { computed, onMounted, onUnmounted } from 'vue'
+import { injectSliderRootContext } from './SliderRoot.vue'
+import { convertValueToPercentage, getLabel, getThumbInBoundsOffset, injectSliderOrientationContext } from './utils'
 import { useSize } from '@/shared'
 import { useMounted } from '@vueuse/core'
 
@@ -12,14 +12,14 @@ export interface SliderThumbImplProps extends PrimitiveProps {
 
 const props = defineProps<SliderThumbImplProps>()
 
-const context = inject(SLIDER_INJECTION_KEY)
-const orientation = inject(SLIDER_ORIENTATION_INJECTION_KEY)
+const rootContext = injectSliderRootContext()
+const orientation = injectSliderOrientationContext()
 
 const { primitiveElement, currentElement: thumbElement } = usePrimitiveElement()
 
-const value = computed(() => context?.modelValue?.value?.[props.index])
-const percent = computed(() => value.value === undefined ? 0 : convertValueToPercentage(value.value, context?.min.value ?? 0, context?.max.value ?? 100))
-const label = computed(() => getLabel(props.index, context?.modelValue?.value?.length ?? 0))
+const value = computed(() => rootContext.modelValue?.value?.[props.index])
+const percent = computed(() => value.value === undefined ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100))
+const label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0))
 const size = useSize(thumbElement)
 const orientationSize = computed(() => size[orientation!.size].value)
 const thumbInBoundsOffset = computed(() => orientationSize.value
@@ -28,11 +28,11 @@ const thumbInBoundsOffset = computed(() => orientationSize.value
 
 const isMounted = useMounted()
 onMounted(() => {
-  context?.thumbElements.value.push(thumbElement.value)
+  rootContext.thumbElements.value.push(thumbElement.value)
 })
 onUnmounted(() => {
-  const i = context?.thumbElements.value.findIndex(i => i === thumbElement.value) ?? -1
-  context?.thumbElements.value.splice(i, 1)
+  const i = rootContext.thumbElements.value.findIndex(i => i === thumbElement.value) ?? -1
+  rootContext.thumbElements.value.splice(i, 1)
 })
 
 defineExpose({
@@ -52,14 +52,14 @@ export default {
     ref="primitiveElement"
     role="slider"
     data-radix-vue-collection-item
-    :tabindex="context?.disabled.value ? undefined : 0"
+    :tabindex="rootContext.disabled.value ? undefined : 0"
     :aria-label="$attrs['aria-label'] || label"
-    :data-disabled="context?.disabled.value"
-    :data-orientation="context?.orientation.value"
+    :data-disabled="rootContext.disabled.value"
+    :data-orientation="rootContext.orientation.value"
     :aria-valuenow="value"
-    :aria-valuemin="context?.min.value"
-    :aria-valuemax="context?.max.value"
-    :aria-orientation="context?.orientation.value"
+    :aria-valuemin="rootContext.min.value"
+    :aria-valuemax="rootContext.max.value"
+    :aria-orientation="rootContext.orientation.value"
     :as-child="asChild"
     :as="as"
     :style="{
@@ -75,7 +75,7 @@ export default {
       display: !isMounted && value === undefined ? 'none' : undefined,
     }"
     @focus="() => {
-      context!.valueIndexToChangeRef.value = index
+      rootContext.valueIndexToChangeRef.value = index
     }"
   >
     <slot />
diff --git a/packages/radix-vue/src/Slider/SliderTrack.vue b/packages/radix-vue/src/Slider/SliderTrack.vue
index 589fa996d..b0e669f7e 100644
--- a/packages/radix-vue/src/Slider/SliderTrack.vue
+++ b/packages/radix-vue/src/Slider/SliderTrack.vue
@@ -3,21 +3,20 @@ export interface SliderTrackProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { SLIDER_INJECTION_KEY } from './SliderRoot.vue'
+import { injectSliderRootContext } from './SliderRoot.vue'
 
 const props = withDefaults(defineProps<SliderTrackProps>(), { as: 'span' })
 
-const context = inject(SLIDER_INJECTION_KEY)
+const rootContext = injectSliderRootContext()
 </script>
 
 <template>
   <Primitive
     :as-child="props.asChild"
     :as="as"
-    :data-disabled="context?.disabled.value"
-    :data-orientation="context?.orientation.value"
+    :data-disabled="rootContext.disabled.value"
+    :data-orientation="rootContext.orientation.value"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Slider/SliderVertical.vue b/packages/radix-vue/src/Slider/SliderVertical.vue
index 81561be28..16857ed3a 100644
--- a/packages/radix-vue/src/Slider/SliderVertical.vue
+++ b/packages/radix-vue/src/Slider/SliderVertical.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { usePrimitiveElement } from '@/Primitive'
 import SliderImpl from './SliderImpl.vue'
-import { computed, provide, ref, toRefs } from 'vue'
+import { computed, ref, toRefs } from 'vue'
 import type { SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'
-import { BACK_KEYS, SLIDER_ORIENTATION_INJECTION_KEY, linearScale } from './utils'
+import { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'
 
 interface SliderVerticalProps extends SliderOrientationPrivateProps {}
 const props = defineProps<SliderVerticalProps>()
@@ -25,7 +25,7 @@ function getValueFromPointer(pointerPosition: number) {
   return value(pointerPosition - rect.top)
 }
 
-provide(SLIDER_ORIENTATION_INJECTION_KEY, {
+provideSliderOrientationContext({
   startEdge: isSlidingFromBottom.value ? 'bottom' : 'top',
   endEdge: isSlidingFromBottom.value ? 'top' : 'bottom',
   size: 'height',
diff --git a/packages/radix-vue/src/Slider/utils.ts b/packages/radix-vue/src/Slider/utils.ts
index d82c3dcef..a9249f74f 100644
--- a/packages/radix-vue/src/Slider/utils.ts
+++ b/packages/radix-vue/src/Slider/utils.ts
@@ -1,4 +1,4 @@
-import type { InjectionKey } from 'vue'
+import { createContext } from '@/shared'
 
 export interface SliderOrientationPrivateProps {
   min: number
@@ -153,4 +153,5 @@ interface SliderOrientation {
   direction: number
 }
 
-export const SLIDER_ORIENTATION_INJECTION_KEY = Symbol() as InjectionKey<SliderOrientation>
+export const [injectSliderOrientationContext, provideSliderOrientationContext]
+  = createContext<SliderOrientation>(['SliderVertical', 'SliderHorizontal'])
diff --git a/packages/radix-vue/src/Switch/SwitchRoot.vue b/packages/radix-vue/src/Switch/SwitchRoot.vue
index f9ec0284f..ab736ec09 100644
--- a/packages/radix-vue/src/Switch/SwitchRoot.vue
+++ b/packages/radix-vue/src/Switch/SwitchRoot.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from '@/shared'
 
 export interface SwitchRootProps extends PrimitiveProps {
   defaultChecked?: boolean
@@ -15,18 +16,18 @@ export type SwitchRootEmits = {
   'update:checked': [payload: boolean]
 }
 
-export const SWITCH_INJECTION_KEY
-  = Symbol() as InjectionKey<SwitchProvideValue>
-
-export interface SwitchProvideValue {
+export interface SwitchRootContext {
   checked?: Ref<boolean>
   toggleCheck: () => void
   disabled: Ref<boolean>
 }
+
+export const [injectSwitchRootContext, provideSwitchRootContext]
+  = createContext<SwitchRootContext>('SwitchRoot')
 </script>
 
 <script setup lang="ts">
-import { computed, provide, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
 
@@ -57,7 +58,7 @@ const { primitiveElement, currentElement } = usePrimitiveElement()
 const isFormControl = computed(() => currentElement.value ? Boolean(currentElement.value.closest('form')) : true)
 const ariaLabel = computed(() => props.id && currentElement.value ? (document.querySelector(`[for="${props.id}"]`) as HTMLLabelElement)?.innerText : undefined)
 
-provide<SwitchProvideValue>(SWITCH_INJECTION_KEY, {
+provideSwitchRootContext({
   checked,
   toggleCheck,
   disabled,
diff --git a/packages/radix-vue/src/Switch/SwitchThumb.vue b/packages/radix-vue/src/Switch/SwitchThumb.vue
index d18c67312..47905c2ab 100644
--- a/packages/radix-vue/src/Switch/SwitchThumb.vue
+++ b/packages/radix-vue/src/Switch/SwitchThumb.vue
@@ -3,21 +3,19 @@ export interface SwitchThumbProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
 import {
-  SWITCH_INJECTION_KEY,
-  type SwitchProvideValue,
+  injectSwitchRootContext,
 } from './SwitchRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 withDefaults(defineProps<SwitchThumbProps>(), { as: 'span' })
-const injectedValue = inject<SwitchProvideValue>(SWITCH_INJECTION_KEY)
+const rootContext = injectSwitchRootContext()
 </script>
 
 <template>
   <Primitive
-    :data-state="injectedValue?.checked?.value ? 'checked' : 'unchecked'"
-    :data-disabled="injectedValue?.disabled.value ? '' : undefined"
+    :data-state="rootContext.checked?.value ? 'checked' : 'unchecked'"
+    :data-disabled="rootContext.disabled.value ? '' : undefined"
     :as-child="asChild"
     :as="as"
   >
diff --git a/packages/radix-vue/src/Tabs/TabsContent.vue b/packages/radix-vue/src/Tabs/TabsContent.vue
index 0bf4db6a1..f81b8beb4 100644
--- a/packages/radix-vue/src/Tabs/TabsContent.vue
+++ b/packages/radix-vue/src/Tabs/TabsContent.vue
@@ -6,19 +6,19 @@ export interface TabsContentProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue'
-import { TABS_INJECTION_KEY } from './TabsRoot.vue'
+import { computed, onMounted, ref } from 'vue'
+import { injectTabsRootContext } from './TabsRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { makeContentId, makeTriggerId } from './utils'
 import { Presence } from '@/Presence'
 
 const props = defineProps<TabsContentProps>()
 
-const context = inject(TABS_INJECTION_KEY)
-const triggerId = computed(() => makeTriggerId(context!.baseId, props.value))
-const contentId = computed(() => makeContentId(context!.baseId, props.value))
+const rootContext = injectTabsRootContext()
+const triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value))
+const contentId = computed(() => makeContentId(rootContext.baseId, props.value))
 
-const isSelected = computed(() => props.value === context?.modelValue.value)
+const isSelected = computed(() => props.value === rootContext.modelValue.value)
 const isMountAnimationPreventedRef = ref(isSelected.value)
 
 onMounted(() => {
@@ -36,7 +36,7 @@ const presenceRef = ref<InstanceType<typeof Presence>>()
       :as="as"
       role="tabpanel"
       :data-state="isSelected ? 'active' : 'inactive'"
-      :data-orientation="context?.orientation.value"
+      :data-orientation="rootContext.orientation.value"
       :aria-labelledby="triggerId"
       :hidden="!presenceRef?.present"
       tabindex="0"
diff --git a/packages/radix-vue/src/Tabs/TabsList.vue b/packages/radix-vue/src/Tabs/TabsList.vue
index bc3800939..0a2fb06f7 100644
--- a/packages/radix-vue/src/Tabs/TabsList.vue
+++ b/packages/radix-vue/src/Tabs/TabsList.vue
@@ -5,8 +5,8 @@ export interface TabsListProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject, toRefs } from 'vue'
-import { TABS_INJECTION_KEY } from './TabsRoot.vue'
+import { toRefs } from 'vue'
+import { injectTabsRootContext } from './TabsRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -18,16 +18,16 @@ const props = withDefaults(defineProps<TabsListProps>(), {
 })
 const { loop } = toRefs(props)
 
-const context = inject(TABS_INJECTION_KEY)
+const rootContext = injectTabsRootContext()
 </script>
 
 <template>
-  <RovingFocusGroup as-child :orientation="context?.orientation.value" :dir="context?.dir.value" :loop="loop">
+  <RovingFocusGroup as-child :orientation="rootContext.orientation.value" :dir="rootContext.dir.value" :loop="loop">
     <Primitive
       role="tablist"
       :as-child="asChild"
       :as="as"
-      :aria-orientation="context?.orientation.value"
+      :aria-orientation="rootContext.orientation.value"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Tabs/TabsRoot.vue b/packages/radix-vue/src/Tabs/TabsRoot.vue
index cd65bf16b..01da7ef3f 100644
--- a/packages/radix-vue/src/Tabs/TabsRoot.vue
+++ b/packages/radix-vue/src/Tabs/TabsRoot.vue
@@ -1,11 +1,21 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { provide, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import type { DataOrientation, Direction } from '../shared/types'
-import { useId } from '@/shared'
+import { createContext, useId } from '@/shared'
 
-export const TABS_INJECTION_KEY = Symbol() as InjectionKey<TabsProvideValue>
+export interface TabsRootContext {
+  modelValue: Ref<string | undefined>
+  changeModelValue: (value: string) => void
+  orientation: Ref<DataOrientation>
+  dir: Ref<Direction>
+  activationMode: 'automatic' | 'manual'
+  baseId: string
+}
+
+export const [injectTabsRootContext, provideTabsRootContext]
+  = createContext<TabsRootContext>('TabsRoot')
 </script>
 
 <script setup lang="ts">
@@ -34,15 +44,6 @@ export type TabsRootEmits = {
   'update:modelValue': [payload: string]
 }
 
-export interface TabsProvideValue {
-  modelValue: Ref<string | undefined>
-  changeModelValue: (value: string) => void
-  orientation: Ref<DataOrientation>
-  dir: Ref<Direction>
-  activationMode: 'automatic' | 'manual'
-  baseId: string
-}
-
 const props = withDefaults(defineProps<TabsRootProps>(), {
   orientation: 'horizontal',
   dir: 'ltr',
@@ -56,7 +57,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
 })
 
-provide<TabsProvideValue>(TABS_INJECTION_KEY, {
+provideTabsRootContext({
   modelValue,
   changeModelValue: (value: string) => {
     modelValue.value = value
diff --git a/packages/radix-vue/src/Tabs/TabsTrigger.vue b/packages/radix-vue/src/Tabs/TabsTrigger.vue
index c35fdfdf0..2563ff0c8 100644
--- a/packages/radix-vue/src/Tabs/TabsTrigger.vue
+++ b/packages/radix-vue/src/Tabs/TabsTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
-import { TABS_INJECTION_KEY } from './TabsRoot.vue'
+import { computed } from 'vue'
+import { injectTabsRootContext } from './TabsRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -17,12 +17,12 @@ const props = withDefaults(defineProps<TabsTriggerProps>(), {
   disabled: false,
   as: 'button',
 })
-const context = inject(TABS_INJECTION_KEY)
+const rootContext = injectTabsRootContext()
 
-const triggerId = computed(() => makeTriggerId(context!.baseId, props.value))
-const contentId = computed(() => makeContentId(context!.baseId, props.value))
+const triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value))
+const contentId = computed(() => makeContentId(rootContext.baseId, props.value))
 
-const isSelected = computed(() => props.value === context?.modelValue.value)
+const isSelected = computed(() => props.value === rootContext.modelValue.value)
 </script>
 
 <template>
@@ -38,25 +38,25 @@ const isSelected = computed(() => props.value === context?.modelValue.value)
       :data-state="isSelected ? 'active' : 'inactive'"
       :disabled="disabled"
       :data-disabled="disabled ? '' : undefined"
-      :data-orientation="context?.orientation.value"
+      :data-orientation="rootContext.orientation.value"
       @mousedown.left="(event) => {
         // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
         // but not when the control key is pressed (avoiding MacOS right click)
         if (!disabled && event.ctrlKey === false) {
-          context?.changeModelValue(value);
+          rootContext.changeModelValue(value);
         }
         else {
           // prevent focus to avoid accidental activation
           event.preventDefault();
         }
       }"
-      @keydown.enter.space="context?.changeModelValue(value)"
+      @keydown.enter.space="rootContext.changeModelValue(value)"
       @focus="() => {
         // handle 'automatic' activation if necessary
         // ie. activate tab following focus
-        const isAutomaticActivation = context?.activationMode !== 'manual';
+        const isAutomaticActivation = rootContext.activationMode !== 'manual';
         if (!isSelected && !disabled && isAutomaticActivation) {
-          context?.changeModelValue(value);
+          rootContext.changeModelValue(value);
         }
       }"
     >
diff --git a/packages/radix-vue/src/Toggle/ToggleRoot.vue b/packages/radix-vue/src/Toggle/ToggleRoot.vue
index 156c9dd33..7e5e6d4cb 100644
--- a/packages/radix-vue/src/Toggle/ToggleRoot.vue
+++ b/packages/radix-vue/src/Toggle/ToggleRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type ComputedRef, type InjectionKey, type Ref, computed } from 'vue'
+import { computed } from 'vue'
 
 export interface ToggleProps extends PrimitiveProps {
   /**
@@ -20,14 +20,6 @@ export type ToggleEmits = {
   'update:pressed': [value: boolean]
 }
 
-export const TOGGLE_INJECTION_KEY
-  = Symbol() as InjectionKey<ToggleProvideValue>
-
-export interface ToggleProvideValue {
-  modelValue?: Readonly<Ref<ToggleProps['pressed']>>
-  dataState: ComputedRef<DataState>
-}
-
 export type DataState = 'on' | 'off'
 </script>
 
diff --git a/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue b/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue
index 6b48d4c81..773609183 100644
--- a/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue
+++ b/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue
@@ -8,8 +8,8 @@ export interface ToggleGroupItemProps extends ToggleProps {
 </script>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
-import { TOGGLE_GROUP_INJECTION_KEY } from './ToggleGroupRoot.vue'
+import { computed } from 'vue'
+import { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'
 import { Toggle, type ToggleProps } from '@/Toggle'
 import { RovingFocusItem } from '@/RovingFocus'
 import { Primitive } from '@/Primitive'
@@ -18,14 +18,14 @@ const props = withDefaults(defineProps<ToggleGroupItemProps>(), {
   as: 'button',
 })
 
-const context = inject(TOGGLE_GROUP_INJECTION_KEY)
-const disabled = computed(() => context?.disabled?.value || props.disabled)
-const pressed = computed(() => context?.modelValue.value?.includes(props.value))
+const rootContext = injectToggleGroupRootContext()
+const disabled = computed(() => rootContext.disabled?.value || props.disabled)
+const pressed = computed(() => rootContext.modelValue.value?.includes(props.value))
 </script>
 
 <template>
   <component
-    :is="context?.rovingFocus.value ? RovingFocusItem : Primitive"
+    :is="rootContext.rovingFocus.value ? RovingFocusItem : Primitive"
     as-child
     :focusable="!disabled"
     :active="pressed"
@@ -34,11 +34,11 @@ const pressed = computed(() => context?.modelValue.value?.includes(props.value))
       v-bind="props"
       :disabled="disabled"
       :pressed="
-        context?.type === 'single'
-          ? context?.modelValue.value === value
-          : context?.modelValue.value?.includes(value)
+        rootContext.type === 'single'
+          ? rootContext.modelValue.value === value
+          : rootContext.modelValue.value?.includes(value)
       "
-      @update:pressed="context?.changeModelValue(value)"
+      @update:pressed="rootContext.changeModelValue(value)"
     >
       <slot />
     </Toggle>
diff --git a/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue b/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue
index a5b308c59..f960a2d10 100644
--- a/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue
+++ b/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { DataOrientation, Direction } from '../shared/types'
 import { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'
 import { RovingFocusGroup } from '@/RovingFocus'
+import { createContext } from '@/shared'
 
 type TypeEnum = 'single' | 'multiple'
 
@@ -20,10 +21,7 @@ export type ToggleGroupRootEmits = {
   'update:modelValue': [payload: string]
 }
 
-export const TOGGLE_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<ToggleGroupProvideValue>
-
-interface ToggleGroupProvideValue {
+interface ToggleGroupRootContext {
   type: TypeEnum
   modelValue: Ref<string | string[] | undefined>
   changeModelValue: (value: string) => void
@@ -33,10 +31,13 @@ interface ToggleGroupProvideValue {
   rovingFocus: Ref<boolean>
   disabled?: Ref<boolean>
 }
+
+export const [injectToggleGroupRootContext, provideToggleGroupRootContext]
+  = createContext<ToggleGroupRootContext>('ToggleGroupRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 const props = withDefaults(defineProps<ToggleGroupRootProps>(), {
@@ -53,7 +54,7 @@ const { loop, rovingFocus, disabled, dir } = toRefs(props)
 
 const { modelValue, changeModelValue } = useSingleOrMultipleValue(props, emits)
 
-provide(TOGGLE_GROUP_INJECTION_KEY, {
+provideToggleGroupRootContext({
   type: props.type,
   modelValue,
   changeModelValue,
diff --git a/packages/radix-vue/src/Toolbar/ToolbarRoot.vue b/packages/radix-vue/src/Toolbar/ToolbarRoot.vue
index 730433799..b47b9dff6 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarRoot.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarRoot.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { DataOrientation, Direction } from '@/shared/types'
+import { createContext } from '@/shared'
 
 export interface ToolbarRootProps extends PrimitiveProps {
   orientation?: DataOrientation
@@ -8,17 +9,17 @@ export interface ToolbarRootProps extends PrimitiveProps {
   loop?: boolean
 }
 
-export const TOOLBAR_INJECTION_KEY
-  = Symbol() as InjectionKey<ToolbarProvideValue>
-
-export interface ToolbarProvideValue {
+export interface ToolbarRootContext {
   orientation: Ref<DataOrientation>
   dir: Ref<Direction>
 }
+
+export const [injectToolbarRootContext, provideToolbarRootContext]
+  = createContext<ToolbarRootContext>('ToolbarRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { RovingFocusGroup } from '@/RovingFocus'
 
@@ -28,7 +29,7 @@ const props = withDefaults(defineProps<ToolbarRootProps>(), {
 })
 const { orientation, dir } = toRefs(props)
 
-provide(TOOLBAR_INJECTION_KEY, { orientation, dir })
+provideToolbarRootContext({ orientation, dir })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue b/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue
index 19dd87589..f9713aaaf 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import BaseSeparator from '../shared/component/BaseSeparator.vue'
-import { TOOLBAR_INJECTION_KEY } from './ToolbarRoot.vue'
+import { injectToolbarRootContext } from './ToolbarRoot.vue'
 import { type PrimitiveProps } from '@/Primitive'
 
 export interface ToolbarSeparatorProps extends PrimitiveProps {}
 const props = defineProps<ToolbarSeparatorProps>()
 
-const context = inject(TOOLBAR_INJECTION_KEY)
+const rootContext = injectToolbarRootContext()
 </script>
 
 <template>
   <BaseSeparator
-    :orientation="context?.orientation.value"
+    :orientation="rootContext.orientation.value"
     :as-child="props.asChild"
     :as="as"
   >
diff --git a/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue b/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue
index b168054b4..977c4d4a9 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { TOOLBAR_INJECTION_KEY } from './ToolbarRoot.vue'
+import { injectToolbarRootContext } from './ToolbarRoot.vue'
 import {
   ToggleGroupRoot,
   type ToggleGroupRootEmits,
@@ -12,7 +11,7 @@ const props = defineProps<ToolbarToggleGroupProps>()
 
 const emits = defineEmits<ToolbarToggleGroupEmits>()
 
-const context = inject(TOOLBAR_INJECTION_KEY)
+const rootContext = injectToolbarRootContext()
 
 export interface ToolbarToggleGroupProps extends ToggleGroupRootProps {}
 export type ToolbarToggleGroupEmits = ToggleGroupRootEmits
@@ -23,8 +22,8 @@ const emitsAsProps = useEmitAsProps(emits)
 <template>
   <ToggleGroupRoot
     v-bind="{ ...props, ...emitsAsProps }"
-    :data-orientation="context?.orientation.value"
-    :dir="context?.dir.value"
+    :data-orientation="rootContext.orientation.value"
+    :dir="rootContext.dir.value"
     :roving-focus="false"
   >
     <slot />
diff --git a/packages/radix-vue/src/Tooltip/TooltipContent.vue b/packages/radix-vue/src/Tooltip/TooltipContent.vue
index a1858c737..8709b138f 100644
--- a/packages/radix-vue/src/Tooltip/TooltipContent.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import TooltipContentImpl, { type TooltipContentImplEmits, type TooltipContentImplProps } from './TooltipContentImpl.vue'
 import TooltipContentHoverable from './TooltipContentHoverable.vue'
-import { injectTooltipRootContent } from './TooltipRoot.vue'
+import { injectTooltipRootContext } from './TooltipRoot.vue'
 import { useForwardPropsEmits } from '@/shared'
 
 export interface TooltipContentProps extends TooltipContentImplProps {}
@@ -12,14 +12,14 @@ const props = withDefaults(defineProps<TooltipContentProps>(), {
 })
 const emits = defineEmits<TooltipContentEmits>()
 
-const context = injectTooltipRootContent()
+const rootContext = injectTooltipRootContext()
 const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <component
-    :is="context.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable"
-    v-if="context.open.value"
+    :is="rootContext.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable"
+    v-if="rootContext.open.value"
     v-bind="forwarded"
   >
     <slot />
diff --git a/packages/radix-vue/src/Tooltip/TooltipContentHoverable.vue b/packages/radix-vue/src/Tooltip/TooltipContentHoverable.vue
index 3fe6da59f..16887d3c8 100644
--- a/packages/radix-vue/src/Tooltip/TooltipContentHoverable.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipContentHoverable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import TooltipContentImpl, { type TooltipContentImplProps } from './TooltipContentImpl.vue'
-import { injectTooltipRootContent } from './TooltipRoot.vue'
+import { injectTooltipRootContext } from './TooltipRoot.vue'
 import { injectTooltipProviderContext } from './TooltipProvider.vue'
 import { usePrimitiveElement } from '@/Primitive'
 import { type Polygon, getExitSideFromRect, getHull, getPaddedExitPoints, getPointsFromRect, isPointInPolygon } from './utils'
@@ -9,7 +9,7 @@ import { type Polygon, getExitSideFromRect, getHull, getPaddedExitPoints, getPoi
 const props = defineProps<TooltipContentImplProps>()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const { trigger, onClose } = injectTooltipRootContent()
+const { trigger, onClose } = injectTooltipRootContext()
 const providerContext = injectTooltipProviderContext()
 
 const pointerGraceArea = ref<Polygon | null>(null)
diff --git a/packages/radix-vue/src/Tooltip/TooltipContentImpl.vue b/packages/radix-vue/src/Tooltip/TooltipContentImpl.vue
index 863af4415..1ffef8541 100644
--- a/packages/radix-vue/src/Tooltip/TooltipContentImpl.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipContentImpl.vue
@@ -40,7 +40,7 @@ import { PopperContent } from '@/Popper'
 import { type PrimitiveProps } from '@/Primitive'
 import { VisuallyHidden } from '@/VisuallyHidden'
 import { type VNode, computed, onMounted, ref, useSlots } from 'vue'
-import { injectTooltipRootContent } from './TooltipRoot.vue'
+import { injectTooltipRootContext } from './TooltipRoot.vue'
 import { DismissableLayer } from '@/DismissableLayer'
 
 const props = withDefaults(defineProps<TooltipContentImplProps>(), {
@@ -58,7 +58,7 @@ const props = withDefaults(defineProps<TooltipContentImplProps>(), {
 const emits = defineEmits<TooltipContentImplEmits>()
 
 const contentElement = ref<HTMLElement>()
-const context = injectTooltipRootContent()
+const rootContext = injectTooltipRootContext()
 
 const ariaLabel = computed(() => {
   if (props.ariaLabel)
@@ -86,11 +86,11 @@ onMounted(() => {
   // Close the tooltip if the trigger is scrolled
   useEventListener(window, 'scroll', (event) => {
     const target = event.target as HTMLElement
-    if (target?.contains(context.trigger.value!))
-      context.onClose()
+    if (target?.contains(rootContext.trigger.value!))
+      rootContext.onClose()
   })
   // Close this tooltip if another one opens
-  useEventListener(window, TOOLTIP_OPEN, context.onClose)
+  useEventListener(window, TOOLTIP_OPEN, rootContext.onClose)
 })
 </script>
 
@@ -101,11 +101,11 @@ onMounted(() => {
     @escape-key-down="emits('escapeKeyDown', $event)"
     @pointer-down-outside="emits('pointerDownOutside', $event)"
     @focus-outside.prevent
-    @dismiss="context.onClose()"
+    @dismiss="rootContext.onClose()"
   >
     <PopperContent
       ref="contentElement"
-      :data-state="context.stateAttribute.value"
+      :data-state="rootContext.stateAttribute.value"
       v-bind="{ ...$attrs, ...popperContentProps }"
       :style="{
         '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',
@@ -116,7 +116,7 @@ onMounted(() => {
       }"
     >
       <slot />
-      <VisuallyHidden :id="context.contentId" role="tooltip">
+      <VisuallyHidden :id="rootContext.contentId" role="tooltip">
         {{ ariaLabel }}
       </VisuallyHidden>
     </PopperContent>
diff --git a/packages/radix-vue/src/Tooltip/TooltipProvider.vue b/packages/radix-vue/src/Tooltip/TooltipProvider.vue
index c3d4a6414..0bcc2a387 100644
--- a/packages/radix-vue/src/Tooltip/TooltipProvider.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipProvider.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { createContext } from '@/shared'
 
-interface TooltipProviderContextValue {
+interface TooltipProviderContext {
   isOpenDelayed: Ref<boolean>
   delayDuration: Ref<number>
   onOpen(): void
@@ -12,7 +12,7 @@ interface TooltipProviderContextValue {
 }
 
 export const [injectTooltipProviderContext, provideTooltipProviderContext]
-  = createContext<TooltipProviderContextValue>('TooltipProvider')
+  = createContext<TooltipProviderContext>('TooltipProvider')
 
 export interface TooltipProviderProps {
   /**
diff --git a/packages/radix-vue/src/Tooltip/TooltipRoot.vue b/packages/radix-vue/src/Tooltip/TooltipRoot.vue
index 0b9d602f4..cd8a1649e 100644
--- a/packages/radix-vue/src/Tooltip/TooltipRoot.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipRoot.vue
@@ -31,7 +31,7 @@ export type TooltipRootEmits = {
   'update:open': [value: boolean]
 }
 
-export interface TooltipContextValue {
+export interface TooltipContext {
   contentId: string
   open: Ref<boolean>
   stateAttribute: Ref<'closed' | 'delayed-open' | 'instant-open'>
@@ -44,8 +44,8 @@ export interface TooltipContextValue {
   disableHoverableContent: Ref<boolean>
 }
 
-export const [injectTooltipRootContent, provideTooltipRootContext]
-  = createContext<TooltipContextValue>('TooltipRoot')
+export const [injectTooltipRootContext, provideTooltipRootContext]
+  = createContext<TooltipContext>('TooltipRoot')
 </script>
 
 <script setup lang="ts">
diff --git a/packages/radix-vue/src/Tooltip/TooltipTrigger.vue b/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
index e77265c61..b5d591062 100644
--- a/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
@@ -9,7 +9,7 @@ export interface TooltipTriggerProps extends PrimitiveProps {}
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { injectTooltipRootContent } from './TooltipRoot.vue'
+import { injectTooltipRootContext } from './TooltipRoot.vue'
 import { PopperAnchor } from '@/Popper'
 import {
   Primitive,
@@ -21,7 +21,7 @@ import { injectTooltipProviderContext } from './TooltipProvider.vue'
 const props = withDefaults(defineProps<TooltipTriggerProps>(), {
   as: 'button',
 })
-const context = injectTooltipRootContent()
+const rootContext = injectTooltipRootContext()
 const providerContext = injectTooltipProviderContext()
 
 const { primitiveElement, currentElement: triggerElement }
@@ -40,7 +40,7 @@ function handlePointerDown() {
 }
 
 onMounted(() => {
-  context.onTriggerChange(triggerElement.value)
+  rootContext.onTriggerChange(triggerElement.value)
 })
 </script>
 
@@ -49,9 +49,9 @@ onMounted(() => {
     <Primitive
       ref="primitiveElement"
       :aria-describedby="
-        context.open.value ? context.contentId : undefined
+        rootContext.open.value ? rootContext.contentId : undefined
       "
-      :data-state="context.stateAttribute.value"
+      :data-state="rootContext.stateAttribute.value"
       :as="as"
       :as-child="props.asChild"
       @pointermove="(event) => {
@@ -59,20 +59,20 @@ onMounted(() => {
         if (
           !hasPointerMoveOpened && !providerContext.isPointerInTransitRef.value
         ) {
-          context.onTriggerEnter();
+          rootContext.onTriggerEnter();
           hasPointerMoveOpened = true;
         }
       }"
       @pointerleave="(event) => {
-        context.onTriggerLeave();
+        rootContext.onTriggerLeave();
         hasPointerMoveOpened = false;
       }"
       @pointerdown="handlePointerDown"
       @focus="() => {
-        if (!isPointerDown) context.onOpen()
+        if (!isPointerDown) rootContext.onOpen()
       }"
-      @blur="context.onClose()"
-      @click="context.onClose()"
+      @blur="rootContext.onClose()"
+      @click="rootContext.onClose()"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/shared/createContext.ts b/packages/radix-vue/src/shared/createContext.ts
index 550f3c2db..6f5d68099 100644
--- a/packages/radix-vue/src/shared/createContext.ts
+++ b/packages/radix-vue/src/shared/createContext.ts
@@ -1,25 +1,50 @@
 import { type InjectionKey, inject, provide } from 'vue'
 
-export function createContext<ContextValue>(rootComponentName: string) {
-  const injectionKey: InjectionKey<ContextValue | null> = Symbol(
-    `${rootComponentName}Context`,
-  )
+/**
+ * @param providerComponentName - The name(s) of the component(s) providing the context.
+ *
+ * There are situations where context can come from multiple components. In such cases, you might need to give an array of component names to provide your context, instead of just a single string.
+ *
+ * @param contextName The description for injection key symbol.
+ */
+export function createContext<ContextValue>(
+  providerComponentName: string | string[],
+  contextName?: string,
+) {
+  const symbolDescription
+    = typeof providerComponentName === 'string' && !contextName
+      ? `${providerComponentName}Context`
+      : contextName
+
+  const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription)
 
   /**
-   * @throws When failed to inject context and fallback not specified.
+   * @param fallback The context value to return if the injection fails.
+   *
+   * @throws When context injection failed and no fallback is specified.
    * This happens when the component injecting the context is not a child of the root component providing the context.
    */
-  const injectContext = <T extends ContextValue | null | undefined = ContextValue>(
-    fallback?: T,
-  ): T extends null ? ContextValue | null : ContextValue => {
+  const injectContext = <
+    T extends ContextValue | null | undefined = ContextValue,
+  >(
+      fallback?: T,
+    ): T extends null ? ContextValue | null : ContextValue => {
     const context = inject(injectionKey, fallback)
     if (context)
       return context
 
     if (context === null)
-      return null as any
+      return context as any
 
-    throw new Error(`Component must be used within ${rootComponentName}`)
+    throw new Error(
+      `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${
+        Array.isArray(providerComponentName)
+          ? `one of the following components: ${providerComponentName.join(
+              ', ',
+            )}`
+          : `\`${providerComponentName}\``
+      }`,
+    )
   }
 
   const provideContext = (contextValue: ContextValue) => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index afe8199fd..504682d44 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10234,7 +10234,6 @@ packages:
     resolution: {directory: packages/radix-vue, type: directory}
     id: file:packages/radix-vue
     name: radix-vue
-    version: 0.4.1
     dependencies:
       '@floating-ui/dom': 1.4.2
       '@floating-ui/vue': 1.0.1(vue@3.3.4)