diff --git a/packages/vue/src/accordion/accordion.tsx b/packages/vue/src/accordion/accordion.tsx
index 1766f3c141..9708456448 100644
--- a/packages/vue/src/accordion/accordion.tsx
+++ b/packages/vue/src/accordion/accordion.tsx
@@ -1,40 +1,46 @@
+import { type Context } from '@zag-js/accordion'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { type ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { AccordionProvider } from './accordion-context'
-import { useAccordion, type UseAccordionContext } from './use-accordion'
+import { useAccordion } from './use-accordion'
 
-export type AccordionProps = Assign<HTMLArkProps<'div'>, UseAccordionContext>
+export type AccordionContext = Context & { modelValue?: AccordionContext['value'] }
 
-const VueAccordionProps = {
+export type UseAccordionProps = Assign<HTMLArkProps<'div'>, AccordionContext>
+
+const VueAccordionProps = createVueProps<UseAccordionProps>({
+  id: {
+    type: String as PropType<UseAccordionProps['id']>,
+  },
   modelValue: {
-    type: [String, Object] as PropType<AccordionProps['modelValue']>,
+    type: [String, Object] as PropType<UseAccordionProps['modelValue']>,
   },
   collapsible: {
-    type: Boolean as PropType<AccordionProps['collapsible']>,
+    type: Boolean as PropType<UseAccordionProps['collapsible']>,
     default: false,
   },
   multiple: {
-    type: Boolean as PropType<AccordionProps['multiple']>,
+    type: Boolean as PropType<UseAccordionProps['multiple']>,
     default: false,
   },
   disabled: {
-    type: Boolean as PropType<AccordionProps['disabled']>,
+    type: Boolean as PropType<UseAccordionProps['disabled']>,
     default: false,
   },
   ids: {
-    type: Object as PropType<AccordionProps['ids']>,
+    type: Object as PropType<UseAccordionProps['ids']>,
   },
   getRootNode: {
-    type: Function as PropType<AccordionProps['getRootNode']>,
+    type: Function as PropType<UseAccordionProps['getRootNode']>,
   },
   orientation: {
-    type: String as PropType<AccordionProps['orientation']>,
+    type: String as PropType<UseAccordionProps['orientation']>,
   },
-}
+})
 
-export const Accordion: ComponentWithProps<AccordionProps> = defineComponent({
+export const Accordion: ComponentWithProps<Partial<UseAccordionProps>> = defineComponent({
   name: 'Accordion',
   emits: ['change', 'update:modelValue'],
   props: VueAccordionProps,
@@ -45,8 +51,10 @@ export const Accordion: ComponentWithProps<AccordionProps> = defineComponent({
 
     return () => (
       <ark.div {...api.value.rootProps} {...attrs}>
-        {slots?.default?.()}
+        {slots?.default?.(api.value)}
       </ark.div>
     )
   },
 })
+
+export type AccordionProps = Optional<AccordionContext, 'id'>
diff --git a/packages/vue/src/accordion/docs/accordion.types.json b/packages/vue/src/accordion/docs/accordion.types.json
index c8cc49cc96..4b2b5fe384 100644
--- a/packages/vue/src/accordion/docs/accordion.types.json
+++ b/packages/vue/src/accordion/docs/accordion.types.json
@@ -16,10 +16,15 @@
       "description": "Whether the accordion items are disabled"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  item(value: string): string\n  content(value: string): string\n  trigger(value: string): string\n}>",
       "isRequired": false,
diff --git a/packages/vue/src/accordion/use-accordion.ts b/packages/vue/src/accordion/use-accordion.ts
index 9ef39e3334..068e5c9c71 100644
--- a/packages/vue/src/accordion/use-accordion.ts
+++ b/packages/vue/src/accordion/use-accordion.ts
@@ -1,20 +1,20 @@
-import { connect, machine, type Context as AccordionContext } from '@zag-js/accordion'
+import { connect, machine } from '@zag-js/accordion'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, watch, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { AccordionContext } from './accordion'
 
-export interface UseAccordionContext extends Omit<AccordionContext, 'id'> {
-  modelValue?: AccordionContext['value']
-}
-
-export const useAccordion = (emit: CallableFunction, context: UseAccordionContext) => {
+export const useAccordion = <T extends ExtractPropTypes<AccordionContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
       value: reactiveContext.modelValue ?? reactiveContext.value,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       onChange: (details) => {
         emit('change', details.value)
         emit(
@@ -37,5 +37,3 @@ export const useAccordion = (emit: CallableFunction, context: UseAccordionContex
 
   return { api }
 }
-
-export type UseAccordionReturn = ReturnType<typeof useAccordion>
diff --git a/packages/vue/src/checkbox/checkbox.tsx b/packages/vue/src/checkbox/checkbox.tsx
index 63489ccf11..bc91622426 100644
--- a/packages/vue/src/checkbox/checkbox.tsx
+++ b/packages/vue/src/checkbox/checkbox.tsx
@@ -1,51 +1,76 @@
+import { type Context } from '@zag-js/checkbox'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { type ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { CheckboxProvider } from './checkbox-context'
-import { useCheckbox, type UseCheckboxContext } from './use-checkbox'
+import { useCheckbox } from './use-checkbox'
 
-export type CheckboxProps = Assign<HTMLArkProps<'label'>, UseCheckboxContext>
+export type CheckboxContext = Context & {
+  modelValue?: Context['checked']
+}
+export type UseCheckboxProps = Assign<HTMLArkProps<'label'>, CheckboxContext>
 
-const VueCheckboxProps = {
+export const VueCheckboxProps = createVueProps<UseCheckboxProps>({
+  id: {
+    type: String as PropType<UseCheckboxProps['id']>,
+  },
+  'aria-describedby': {
+    type: String as PropType<UseCheckboxProps['aria-describedby']>,
+  },
+  'aria-label': {
+    type: String as PropType<UseCheckboxProps['aria-label']>,
+  },
+  'aria-labelledby': {
+    type: String as PropType<UseCheckboxProps['aria-labelledby']>,
+  },
   checked: {
-    type: Boolean as PropType<CheckboxProps['checked']>,
+    type: Boolean as PropType<UseCheckboxProps['checked']>,
     default: false,
   },
   dir: {
-    type: String as PropType<CheckboxProps['dir']>,
+    type: String as PropType<UseCheckboxProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<CheckboxProps['disabled']>,
+    type: Boolean as PropType<UseCheckboxProps['disabled']>,
+  },
+  focusable: {
+    type: Boolean as PropType<UseCheckboxProps['focusable']>,
   },
   form: {
-    type: String as PropType<CheckboxProps['form']>,
+    type: String as PropType<UseCheckboxProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<CheckboxProps['getRootNode']>,
+    type: Function as PropType<UseCheckboxProps['getRootNode']>,
   },
   ids: {
-    type: Object as PropType<CheckboxProps['ids']>,
+    type: Object as PropType<UseCheckboxProps['ids']>,
+  },
+  indeterminate: {
+    type: Boolean as PropType<UseCheckboxProps['indeterminate']>,
   },
   invalid: {
-    type: Boolean as PropType<CheckboxProps['invalid']>,
+    type: Boolean as PropType<UseCheckboxProps['invalid']>,
   },
   modelValue: {
-    type: Boolean as PropType<CheckboxProps['modelValue']>,
+    type: [Boolean, String] as PropType<UseCheckboxProps['modelValue']>,
     default: undefined,
   },
   name: {
-    type: String as PropType<CheckboxProps['name']>,
+    type: String as PropType<UseCheckboxProps['name']>,
+  },
+  readOnly: {
+    type: Boolean as PropType<UseCheckboxProps['readOnly']>,
   },
   required: {
-    type: Boolean as PropType<CheckboxProps['required']>,
+    type: Boolean as PropType<UseCheckboxProps['required']>,
   },
   value: {
-    type: String as PropType<CheckboxProps['value']>,
+    type: String as PropType<UseCheckboxProps['value']>,
   },
-}
+})
 
-export const Checkbox: ComponentWithProps<CheckboxProps> = defineComponent({
+export const Checkbox: ComponentWithProps<Partial<UseCheckboxProps>> = defineComponent({
   name: 'Checkbox',
   emits: ['change', 'update:modelValue'],
   props: VueCheckboxProps,
@@ -61,3 +86,5 @@ export const Checkbox: ComponentWithProps<CheckboxProps> = defineComponent({
     )
   },
 })
+
+export type CheckboxProps = Optional<CheckboxContext, 'id'>
diff --git a/packages/vue/src/checkbox/docs/checkbox.types.json b/packages/vue/src/checkbox/docs/checkbox.types.json
index ca9b1b454e..f2421b9d18 100644
--- a/packages/vue/src/checkbox/docs/checkbox.types.json
+++ b/packages/vue/src/checkbox/docs/checkbox.types.json
@@ -21,10 +21,15 @@
       "description": "The id of the form that the checkbox belongs to."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{ root: string; input: string; control: string; label: string }>",
       "isRequired": false,
diff --git a/packages/vue/src/checkbox/stories/basic.stories.vue b/packages/vue/src/checkbox/stories/basic.stories.vue
index 5fcf1e8249..85fecce547 100644
--- a/packages/vue/src/checkbox/stories/basic.stories.vue
+++ b/packages/vue/src/checkbox/stories/basic.stories.vue
@@ -3,7 +3,9 @@ import { ref } from 'vue'
 import { Checkbox, CheckboxControl, CheckboxInput, CheckboxLabel } from '..'
 import '../checkbox.css'
 
-const checkboxRef = ref(true)
+const props = defineProps(['modelValue'])
+
+const checkboxRef = ref(props.modelValue || true)
 </script>
 <template>
   <Checkbox v-model="checkboxRef">
diff --git a/packages/vue/src/checkbox/use-checkbox.ts b/packages/vue/src/checkbox/use-checkbox.ts
index 550878a9eb..724d0e65dc 100644
--- a/packages/vue/src/checkbox/use-checkbox.ts
+++ b/packages/vue/src/checkbox/use-checkbox.ts
@@ -1,19 +1,19 @@
-import { connect, machine, type Context as CheckboxContext } from '@zag-js/checkbox'
+import { connect, machine } from '@zag-js/checkbox'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, watch, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { CheckboxContext } from './checkbox'
 
-export interface UseCheckboxContext extends Omit<CheckboxContext, 'id'> {
-  modelValue?: CheckboxContext['checked']
-}
-
-export const useCheckbox = (emit: CallableFunction, context: UseCheckboxContext) => {
+export const useCheckbox = <T extends ExtractPropTypes<CheckboxContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       checked: reactiveContext.modelValue ?? reactiveContext.checked,
       onChange(details) {
         emit('change', details.checked)
@@ -30,12 +30,10 @@ export const useCheckbox = (emit: CallableFunction, context: UseCheckboxContext)
       if (value == undefined) return
 
       if (value !== api.value.isChecked) {
-        api.value.setChecked(value)
+        api.value.setChecked(value as boolean)
       }
     },
   )
 
   return api
 }
-
-export type UseCheckboxReturn = ReturnType<typeof useCheckbox>
diff --git a/packages/vue/src/color-picker/color-picker.stories.vue b/packages/vue/src/color-picker/color-picker.stories.vue
index 040f1a8f90..eec52c077c 100644
--- a/packages/vue/src/color-picker/color-picker.stories.vue
+++ b/packages/vue/src/color-picker/color-picker.stories.vue
@@ -51,7 +51,7 @@ const colorPickerValue = ref('hsl(10, 81%, 59%)')
       <ColorPickerChannelInput :channel="lightness" />
 
       <ColorPickerChannelInput channel="alpha" />
-      <ColorPickerChannelInput channel="hex" />
+      <ColorPickerChannelInput channel="hue" />
 
       <ColorPickerSwatchGroup>
         <ColorPickerSwatch value="#123123">
diff --git a/packages/vue/src/color-picker/color-picker.tsx b/packages/vue/src/color-picker/color-picker.tsx
index fdf98a276b..3777347338 100644
--- a/packages/vue/src/color-picker/color-picker.tsx
+++ b/packages/vue/src/color-picker/color-picker.tsx
@@ -1,41 +1,51 @@
+import { type Context } from '@zag-js/color-picker'
 import { defineComponent, type PropType } from 'vue'
-import type { ComponentWithProps } from '../utils'
+import type { HTMLArkProps } from '../factory'
+import type { Assign, Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { ColorPickerProvider } from './color-picker-context'
-import { useColorPicker, type UseColorPickerContext } from './use-color-picker'
+import { useColorPicker } from './use-color-picker'
 
-export type ColorPickerProps = UseColorPickerContext
+export type ColorPickerContext = Context & {
+  modelValue?: Context['value']
+}
+export type UseColorPickerProps = Assign<HTMLArkProps<'div'>, ColorPickerContext>
 
-export const ColorPicker: ComponentWithProps<ColorPickerProps> = defineComponent({
-  name: 'ColorPicker',
-  props: {
-    dir: {
-      type: String as PropType<ColorPickerProps['dir']>,
-    },
-    id: {
-      type: String as PropType<ColorPickerProps['id']>,
-    },
-    getRootNode: {
-      type: Function as PropType<ColorPickerProps['getRootNode']>,
-    },
-    modelValue: {
-      type: String as PropType<ColorPickerProps['modelValue']>,
-    },
-    value: {
-      type: String as PropType<ColorPickerProps['value']>,
-    },
-    disabled: {
-      type: Boolean as PropType<ColorPickerProps['disabled']>,
-    },
-    readOnly: {
-      type: Boolean as PropType<ColorPickerProps['readOnly']>,
-    },
+const VueColorPickerProps = createVueProps<UseColorPickerProps>({
+  dir: {
+    type: String as PropType<UseColorPickerProps['dir']>,
+  },
+  id: {
+    type: String as PropType<UseColorPickerProps['id']>,
+  },
+  getRootNode: {
+    type: Function as PropType<UseColorPickerProps['getRootNode']>,
+  },
+  modelValue: {
+    type: String as PropType<UseColorPickerProps['modelValue']>,
+  },
+  value: {
+    type: String as PropType<UseColorPickerProps['value']>,
+  },
+  disabled: {
+    type: Boolean as PropType<UseColorPickerProps['disabled']>,
   },
+  readOnly: {
+    type: Boolean as PropType<UseColorPickerProps['readOnly']>,
+  },
+})
+
+export const ColorPicker: ComponentWithProps<Partial<ColorPickerContext>> = defineComponent({
+  name: 'ColorPicker',
+  props: VueColorPickerProps,
   emits: ['change', 'change-end', 'update:modelValue'],
   setup(props, { slots, emit }) {
     const api = useColorPicker(emit, props)
 
     ColorPickerProvider(api)
 
-    return () => slots.default?.({ ...api.value })
+    return () => slots.default?.(api.value)
   },
 })
+
+export type ColorPickerProps = Optional<ColorPickerContext, 'id'>
diff --git a/packages/vue/src/color-picker/docs/color-picker.types.json b/packages/vue/src/color-picker/docs/color-picker.types.json
index c70b65fd4f..5ae3f39a7b 100644
--- a/packages/vue/src/color-picker/docs/color-picker.types.json
+++ b/packages/vue/src/color-picker/docs/color-picker.types.json
@@ -11,7 +11,7 @@
       "description": "Whether the color picker is disabled"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
@@ -48,79 +48,48 @@
     "yChannel": { "type": "ColorChannel", "isRequired": true }
   },
   "ColorPickerContext": {
-    "channels": {
-      "type": "[ColorChannel, ColorChannel, ColorChannel]",
+    "id": {
+      "type": "string",
       "isRequired": true,
-      "description": "The current color channels of the color"
-    },
-    "contentProps": { "type": "Attrs<HTMLAttributes>", "isRequired": true },
-    "eyeDropperTriggerProps": { "type": "ElementAttrs<ButtonHTMLAttributes>", "isRequired": true },
-    "getAreaGradientProps": {
-      "type": "(props: ColorAreaProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
-    },
-    "getAreaProps": {
-      "type": "(props: ColorAreaProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
-    },
-    "getAreaThumbProps": {
-      "type": "(props: ColorAreaProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+      "description": "The unique identifier of the machine."
     },
-    "getChannelInputProps": {
-      "type": "(props: ColorChannelInputProps) => ElementAttrs<InputHTMLAttributes>",
-      "isRequired": true
+    "dir": {
+      "type": "'ltr' | 'rtl'",
+      "isRequired": false,
+      "description": "The direction of the color picker"
     },
-    "getChannelSliderBackgroundProps": {
-      "type": "(props: ColorChannelProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "disabled": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether the color picker is disabled"
     },
-    "getChannelSliderThumbProps": {
-      "type": "(props: ColorChannelProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "getRootNode": {
+      "type": "() => ShadowRoot | Node | Document",
+      "isRequired": false,
+      "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
-    "getChannelSliderTrackProps": {
-      "type": "(props: ColorChannelProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "ids": {
+      "type": "Partial<{\n  content: string\n  area: string\n  areaGradient: string\n  areaThumb: string\n  channelInput(id: string): string\n  channelSliderTrack(id: ColorChannel): string\n  channelSliderThumb(id: ColorChannel): string\n}>",
+      "isRequired": false,
+      "description": "The ids of the elements in the color picker. Useful for composition."
     },
-    "getSwatchBackgroundProps": {
-      "type": "(props: ColorSwatchProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "modelValue": { "type": "string", "isRequired": false },
+    "onChange": {
+      "type": "(details: ChangeDetails) => void",
+      "isRequired": false,
+      "description": "Handler that is called when the value changes, as the user drags."
     },
-    "getSwatchProps": {
-      "type": "(props: ColorSwatchProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "onChangeEnd": {
+      "type": "(details: ChangeDetails) => void",
+      "isRequired": false,
+      "description": "Handler that is called when the user stops dragging."
     },
-    "isDragging": {
+    "readOnly": {
       "type": "boolean",
-      "isRequired": true,
-      "description": "Whether the color picker is being dragged"
-    },
-    "setChannelValue": {
-      "type": "(channel: ColorChannel, value: number) => void",
-      "isRequired": true,
-      "description": "Function to set the color value of a specific channel"
-    },
-    "setColor": {
-      "type": "(value: string | Color) => void",
-      "isRequired": true,
-      "description": "Function to set the color value"
-    },
-    "setFormat": {
-      "type": "(format: ColorFormat) => void",
-      "isRequired": true,
-      "description": "Function to set the color format"
-    },
-    "value": {
-      "type": "string",
-      "isRequired": true,
-      "description": "The current color value (as a string)"
+      "isRequired": false,
+      "description": "Whether the color picker is read-only"
     },
-    "valueAsColor": {
-      "type": "Color",
-      "isRequired": true,
-      "description": "The current color value (as a Color object)"
-    }
+    "value": { "type": "string", "isRequired": false, "description": "The current color value" }
   },
   "ColorPickerSwatchProps": {
     "value": { "type": "string | Color", "isRequired": true },
diff --git a/packages/vue/src/color-picker/use-color-picker.ts b/packages/vue/src/color-picker/use-color-picker.ts
index 90bbfd603f..94825eb426 100644
--- a/packages/vue/src/color-picker/use-color-picker.ts
+++ b/packages/vue/src/color-picker/use-color-picker.ts
@@ -1,20 +1,19 @@
 import * as colorPicker from '@zag-js/color-picker'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive } from 'vue'
-import type { Optional } from '../types'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { ColorPickerContext } from './color-picker'
 
-export interface UseColorPickerContext extends Optional<colorPicker.Context, 'id'> {
-  modelValue?: colorPicker.Context['value']
-}
-
-export const useColorPicker = (emit: CallableFunction, context: UseColorPickerContext) => {
+export const useColorPicker = <T extends ExtractPropTypes<ColorPickerContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     colorPicker.machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       value: reactiveContext.modelValue ?? reactiveContext.value,
       onChange(details) {
         emit('change', details)
@@ -29,4 +28,4 @@ export const useColorPicker = (emit: CallableFunction, context: UseColorPickerCo
   return computed(() => colorPicker.connect(state.value, send, normalizeProps))
 }
 
-export type UseColorPickerReturn = ReturnType<typeof useColorPicker>
+export type UseColorPickerReturn = ReturnType<typeof colorPicker.connect>
diff --git a/packages/vue/src/combobox/combobox.stories.vue b/packages/vue/src/combobox/combobox.stories.vue
index 65c02044a4..da638c4b88 100644
--- a/packages/vue/src/combobox/combobox.stories.vue
+++ b/packages/vue/src/combobox/combobox.stories.vue
@@ -13,7 +13,6 @@ import {
   ComboboxTrigger,
 } from './'
 import './combobox.css'
-import type { UseComboboxReturn } from './use-combobox'
 
 type ComboboxData = Pick<ComboboxOptionProps, 'label' | 'value' | 'disabled'>[]
 
@@ -26,8 +25,6 @@ const comboboxData: ComboboxData = [
 
 const options = ref(comboboxData)
 
-const comboboxRef = ref<UseComboboxReturn | null>(null)
-
 const handleInputChange: ComboboxProps['onInputChange'] = ({ value }) => {
   const filtered = comboboxData.filter((item) =>
     item.label.toLowerCase().includes(value.toLowerCase()),
@@ -45,10 +42,10 @@ const defaultVal = ref(comboboxData[0].label)
 </script>
 <template>
   <Combobox
-    ref="comboboxRef"
     @input-change="handleInputChange"
     @select="handleOnSelect"
     v-model="defaultVal"
+    v-slot="{ isInputValueEmpty, isOpen }"
   >
     <ComboboxLabel>JS Frameworks</ComboboxLabel>
     <ComboboxControl>
@@ -57,7 +54,7 @@ const defaultVal = ref(comboboxData[0].label)
         <button>▼</button>
       </ComboboxTrigger>
     </ComboboxControl>
-    <div v-show="comboboxRef?.isInputValueEmpty && !comboboxRef?.isOpen">
+    <div v-show="isInputValueEmpty && !isOpen">
       Give me you favorite framework!
     </div>
     <Teleport to="body">
diff --git a/packages/vue/src/combobox/combobox.tsx b/packages/vue/src/combobox/combobox.tsx
index d5017d56a7..1786c3a37f 100644
--- a/packages/vue/src/combobox/combobox.tsx
+++ b/packages/vue/src/combobox/combobox.tsx
@@ -1,108 +1,115 @@
+import { type Context } from '@zag-js/combobox'
 import { defineComponent, type PropType } from 'vue'
-import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { type ComponentWithProps } from '../utils'
+import { ark } from '../factory'
+import type { Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { ComboboxProvider } from './combobox-context'
-import { useCombobox, type UseComboboxContext } from './use-combobox'
+import { useCombobox } from './use-combobox'
 
-export type ComboboxProps = Assign<HTMLArkProps<'div'>, UseComboboxContext>
+export type ComboboxContext = Context & {
+  modelValue?: ComboboxContext['inputValue']
+}
+export type UseComboboxProps = ComboboxContext
 
-const VueComboboxProps = {
+const VueComboboxProps = createVueProps<UseComboboxProps>({
+  id: {
+    type: String as PropType<UseComboboxProps['id']>,
+  },
   modelValue: {
-    type: String as PropType<ComboboxProps['modelValue']>,
+    type: String as PropType<UseComboboxProps['modelValue']>,
   },
   allowCustomValue: {
-    type: Boolean as PropType<ComboboxProps['allowCustomValue']>,
+    type: Boolean as PropType<UseComboboxProps['allowCustomValue']>,
   },
   ariaHidden: {
-    type: Boolean as PropType<ComboboxProps['ariaHidden']>,
+    type: Boolean as PropType<UseComboboxProps['ariaHidden']>,
   },
   autoFocus: {
-    type: Boolean as PropType<ComboboxProps['autoFocus']>,
+    type: Boolean as PropType<UseComboboxProps['autoFocus']>,
   },
   blurOnSelect: {
-    type: Boolean as PropType<ComboboxProps['blurOnSelect']>,
+    type: Boolean as PropType<UseComboboxProps['blurOnSelect']>,
   },
   dir: {
-    type: String as PropType<ComboboxProps['dir']>,
+    type: String as PropType<UseComboboxProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<ComboboxProps['disabled']>,
+    type: Boolean as PropType<UseComboboxProps['disabled']>,
   },
   focusOnClear: {
-    type: Boolean as PropType<ComboboxProps['focusOnClear']>,
+    type: Boolean as PropType<UseComboboxProps['focusOnClear']>,
   },
   form: {
-    type: String as PropType<ComboboxProps['form']>,
+    type: String as PropType<UseComboboxProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<ComboboxProps['getRootNode']>,
+    type: Function as PropType<UseComboboxProps['getRootNode']>,
   },
   ids: {
-    type: Object as PropType<ComboboxProps['ids']>,
+    type: Object as PropType<UseComboboxProps['ids']>,
   },
   inputBehavior: {
-    type: String as PropType<ComboboxProps['inputBehavior']>,
+    type: String as PropType<UseComboboxProps['inputBehavior']>,
   },
   inputValue: {
-    type: String as PropType<ComboboxProps['inputValue']>,
+    type: String as PropType<UseComboboxProps['inputValue']>,
   },
   invalid: {
-    type: Boolean as PropType<ComboboxProps['invalid']>,
+    type: Boolean as PropType<UseComboboxProps['invalid']>,
   },
   isCustomValue: {
-    type: Function as PropType<ComboboxProps['isCustomValue']>,
+    type: Function as PropType<UseComboboxProps['isCustomValue']>,
   },
   loop: {
-    type: Boolean as PropType<ComboboxProps['loop']>,
+    type: Boolean as PropType<UseComboboxProps['loop']>,
   },
   name: {
-    type: String as PropType<ComboboxProps['name']>,
+    type: String as PropType<UseComboboxProps['name']>,
   },
   openOnClick: {
-    type: Boolean as PropType<ComboboxProps['openOnClick']>,
+    type: Boolean as PropType<UseComboboxProps['openOnClick']>,
   },
   placeholder: {
-    type: String as PropType<ComboboxProps['placeholder']>,
+    type: String as PropType<UseComboboxProps['placeholder']>,
   },
   positioning: {
-    type: String as PropType<ComboboxProps['positioning']>,
+    type: String as PropType<UseComboboxProps['positioning']>,
   },
   readOnly: {
-    type: Boolean as PropType<ComboboxProps['readOnly']>,
+    type: Boolean as PropType<UseComboboxProps['readOnly']>,
   },
-  selectInputOnfocus: {
-    type: Boolean as PropType<ComboboxProps['selectInputOnFocus']>,
+  selectInputOnFocus: {
+    type: Boolean as PropType<UseComboboxProps['selectInputOnFocus']>,
   },
   selectOnTab: {
-    type: Boolean as PropType<ComboboxProps['selectOnTab']>,
+    type: Boolean as PropType<UseComboboxProps['selectOnTab']>,
   },
   selectionBehavior: {
-    type: String as PropType<ComboboxProps['selectionBehavior']>,
+    type: String as PropType<UseComboboxProps['selectionBehavior']>,
   },
   selectionData: {
-    type: Object as PropType<ComboboxProps['selectionData']>,
+    type: Object as PropType<UseComboboxProps['selectionData']>,
   },
   translations: {
-    type: Object as PropType<ComboboxProps['translations']>,
+    type: Object as PropType<UseComboboxProps['translations']>,
   },
-}
+})
 
-export const Combobox: ComponentWithProps<ComboboxProps> = defineComponent({
+export const Combobox: ComponentWithProps<Partial<UseComboboxProps>> = defineComponent({
   name: 'Combobox',
   props: VueComboboxProps,
   emits: ['close', 'open', 'highlight', 'input-change', 'update:modelValue', 'select'],
-  setup(props, { slots, attrs, emit, expose }) {
-    const api = useCombobox(emit, props)
+  setup(props, { slots, attrs, emit }) {
+    const api = useCombobox(emit, props as UseComboboxProps)
 
     ComboboxProvider(api)
 
-    expose({ ...api.value })
-
     return () => (
       <ark.div {...api.value.rootProps} {...attrs}>
-        {() => slots.default?.()}
+        {() => slots.default?.(api.value)}
       </ark.div>
     )
   },
 })
+
+export type ComboboxProps = Optional<ComboboxContext, 'id'>
diff --git a/packages/vue/src/combobox/docs/combobox.types.json b/packages/vue/src/combobox/docs/combobox.types.json
index 1c8c730916..8770b23ff9 100644
--- a/packages/vue/src/combobox/docs/combobox.types.json
+++ b/packages/vue/src/combobox/docs/combobox.types.json
@@ -41,17 +41,22 @@
       "description": "The associate form of the combobox."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  label: string\n  control: string\n  input: string\n  content: string\n  trigger: string\n  clearTrigger: string\n  option(id: string, index?: number | undefined): string\n  positioner: string\n}>",
       "isRequired": false,
       "description": "The ids of the elements in the combobox. Useful for composition."
     },
     "inputBehavior": {
-      "type": "'none' | 'autohighlight' | 'autocomplete'",
+      "type": "'autohighlight' | 'autocomplete' | 'none'",
       "isRequired": false,
       "description": "Defines the auto-completion behavior of the combobox.\n\n- `autohighlight`: The first focused option is highlighted as the user types\n- `autocomplete`: Navigating the listbox with the arrow keys selects the option and the input is updated"
     },
diff --git a/packages/vue/src/combobox/use-combobox.ts b/packages/vue/src/combobox/use-combobox.ts
index 74fe3983a7..d7b4aeba03 100644
--- a/packages/vue/src/combobox/use-combobox.ts
+++ b/packages/vue/src/combobox/use-combobox.ts
@@ -1,19 +1,19 @@
-import { connect, machine, type Context as ComboboxContext } from '@zag-js/combobox'
+import { connect, machine } from '@zag-js/combobox'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, type UnwrapRef } from 'vue'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { ComboboxProps } from './combobox'
 
-export type UseComboboxContext = Omit<ComboboxContext, 'id'> & {
-  modelValue?: ComboboxContext['inputValue']
-}
-
-export const useCombobox = (emit: CallableFunction, context: UseComboboxContext) => {
+export const useCombobox = <T extends ExtractPropTypes<ComboboxProps>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       inputValue: reactiveContext.modelValue,
       onClose() {
         emit('close')
@@ -36,5 +36,3 @@ export const useCombobox = (emit: CallableFunction, context: UseComboboxContext)
 
   return computed(() => connect(state.value, send, normalizeProps))
 }
-
-export type UseComboboxReturn = UnwrapRef<ReturnType<typeof useCombobox>>
diff --git a/packages/vue/src/dialog/dialog.tsx b/packages/vue/src/dialog/dialog.tsx
index 8e7a15fd94..93fcb4960b 100644
--- a/packages/vue/src/dialog/dialog.tsx
+++ b/packages/vue/src/dialog/dialog.tsx
@@ -1,59 +1,66 @@
+import { type Context as DialogContext } from '@zag-js/dialog'
 import { defineComponent, type PropType } from 'vue'
-import { type ComponentWithProps } from '../utils'
+import type { Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { DialogProvider } from './dialog-context'
-import { useDialog, type UseDialogContext } from './use-dialog'
+import { useDialog } from './use-dialog'
 
-export type DialogProps = UseDialogContext
+export type UseDialogProps = DialogContext
 
-const VueDialogProps = {
+const VueDialogProps = createVueProps<UseDialogProps>({
+  id: {
+    type: String as PropType<UseDialogProps['id']>,
+  },
   ids: {
-    type: Object as PropType<DialogProps['ids']>,
+    type: Object as PropType<UseDialogProps['ids']>,
   },
   trapFocus: {
-    type: Boolean as PropType<DialogProps['trapFocus']>,
+    type: Boolean as PropType<UseDialogProps['trapFocus']>,
   },
   preventScroll: {
-    type: Boolean as PropType<DialogProps['preventScroll']>,
+    type: Boolean as PropType<UseDialogProps['preventScroll']>,
   },
   modal: {
-    type: Boolean as PropType<DialogProps['modal']>,
+    type: Boolean as PropType<UseDialogProps['modal']>,
   },
   initialFocusEl: {
-    type: Object as PropType<DialogProps['initialFocusEl']>,
+    type: Object as PropType<UseDialogProps['initialFocusEl']>,
   },
   finalFocusEl: {
-    type: Object as PropType<DialogProps['finalFocusEl']>,
+    type: Object as PropType<UseDialogProps['finalFocusEl']>,
   },
   restoreFocus: {
-    type: Boolean as PropType<DialogProps['restoreFocus']>,
+    type: Boolean as PropType<UseDialogProps['restoreFocus']>,
   },
   closeOnOutsideClick: {
-    type: Boolean as PropType<DialogProps['closeOnOutsideClick']>,
+    type: Boolean as PropType<UseDialogProps['closeOnOutsideClick']>,
     default: true,
   },
   closeOnEsc: {
-    type: Boolean as PropType<DialogProps['closeOnEsc']>,
+    type: Boolean as PropType<UseDialogProps['closeOnEsc']>,
   },
   'aria-label': {
-    type: String as PropType<DialogProps['aria-label']>,
+    type: String as PropType<UseDialogProps['aria-label']>,
   },
   role: {
-    type: String as PropType<DialogProps['role']>,
+    type: String as PropType<UseDialogProps['role']>,
   },
   open: {
-    type: Boolean as PropType<DialogProps['open']>,
+    type: Boolean as PropType<UseDialogProps['open']>,
   },
-}
+})
 
-export const Dialog: ComponentWithProps<DialogProps> = defineComponent({
+export const Dialog: ComponentWithProps<Partial<UseDialogProps>> = defineComponent({
   name: 'Dialog',
   props: VueDialogProps,
-  emits: ['close', 'outsideClick', 'esc', 'open', 'update:open'],
+  emits: ['close', 'outside-click', 'esc'],
   setup(props, { slots, emit }) {
-    const api = useDialog(emit, props)
+    const api = useDialog(emit, props as UseDialogProps)
 
     DialogProvider(api)
 
     return () => slots?.default?.(api.value)
   },
 })
+
+export type DialogProps = Optional<UseDialogProps, 'id'>
diff --git a/packages/vue/src/dialog/docs/dialog.types.json b/packages/vue/src/dialog/docs/dialog.types.json
index a4cedf5955..87c9e97c1b 100644
--- a/packages/vue/src/dialog/docs/dialog.types.json
+++ b/packages/vue/src/dialog/docs/dialog.types.json
@@ -26,10 +26,15 @@
       "description": "Element to receive focus when the dialog is closed"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  trigger: string\n  container: string\n  backdrop: string\n  content: string\n  closeTrigger: string\n  title: string\n  description: string\n}>",
       "isRequired": false,
diff --git a/packages/vue/src/dialog/use-dialog.ts b/packages/vue/src/dialog/use-dialog.ts
index 30129c99a8..42264f0f57 100644
--- a/packages/vue/src/dialog/use-dialog.ts
+++ b/packages/vue/src/dialog/use-dialog.ts
@@ -1,21 +1,19 @@
-import { connect, machine, type Context } from '@zag-js/dialog'
+import { connect, machine } from '@zag-js/dialog'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, watch, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { DialogProps } from './dialog'
 
-export type UseDialogContext = Omit<Context, 'id'>
-
-export const useDialog = (emit: CallableFunction, context: UseDialogContext) => {
+export const useDialog = <T extends ExtractPropTypes<DialogProps>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
-      onOpen() {
-        emit('open')
-        emit('update:open', true)
-      },
+      id: reactiveContext.id || useId().value,
       onClose() {
         emit('close')
         emit('update:open', false)
@@ -24,7 +22,7 @@ export const useDialog = (emit: CallableFunction, context: UseDialogContext) =>
         emit('esc')
       },
       onOutsideClick() {
-        emit('outsideClick')
+        emit('outside-click')
       },
     }),
   )
@@ -46,4 +44,4 @@ export const useDialog = (emit: CallableFunction, context: UseDialogContext) =>
   return api
 }
 
-export type UseDialogReturn = ReturnType<typeof useDialog>
+export type UseDialogReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/editable/docs/editable.types.json b/packages/vue/src/editable/docs/editable.types.json
index 0ba6603d2b..87271ba4f6 100644
--- a/packages/vue/src/editable/docs/editable.types.json
+++ b/packages/vue/src/editable/docs/editable.types.json
@@ -31,7 +31,7 @@
       "description": "The associate form of the underlying input."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
diff --git a/packages/vue/src/editable/editable.tsx b/packages/vue/src/editable/editable.tsx
index c97b7bf525..b67128dc40 100644
--- a/packages/vue/src/editable/editable.tsx
+++ b/packages/vue/src/editable/editable.tsx
@@ -1,99 +1,88 @@
-import {
-  defineComponent,
-  reactive,
-  watchEffect,
-  type ComponentObjectPropsOptions,
-  type PropType,
-} from 'vue'
-import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { getValidChildren, type ComponentWithProps } from '../utils'
+import { type Context } from '@zag-js/editable'
+import { defineComponent, type PropType } from 'vue'
+import { ark } from '../factory'
+import type { Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { EditableProvider } from './editable-context'
-import { useEditable, type UseEditableContext } from './use-editable'
+import { useEditable } from './use-editable'
 
-export type EditableProps = Assign<HTMLArkProps<'div'>, UseEditableContext>
+export type UseEditableProps = Context & { modelValue?: Context['value'] }
 
-const VueEditableProps: ComponentObjectPropsOptions = {
+const VueEditableProps = createVueProps<UseEditableProps>({
   activationMode: {
-    type: String as PropType<EditableProps['activationMode']>,
+    type: String as PropType<UseEditableProps['activationMode']>,
   },
   autoResize: {
-    type: Boolean as PropType<EditableProps['autoResize']>,
+    type: Boolean as PropType<UseEditableProps['autoResize']>,
   },
   dir: {
-    type: String as PropType<EditableProps['dir']>,
+    type: String as PropType<UseEditableProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<EditableProps['disabled']>,
+    type: Boolean as PropType<UseEditableProps['disabled']>,
   },
   form: {
-    type: String as PropType<EditableProps['form']>,
+    type: String as PropType<UseEditableProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<EditableProps['getRootNode']>,
+    type: Function as PropType<UseEditableProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<EditableProps['id']>,
+    type: String as PropType<UseEditableProps['id']>,
   },
   ids: {
-    type: Object as PropType<EditableProps['ids']>,
+    type: Object as PropType<UseEditableProps['ids']>,
   },
   invalid: {
-    type: Boolean as PropType<EditableProps['invalid']>,
+    type: Boolean as PropType<UseEditableProps['invalid']>,
   },
   maxLength: {
-    type: Number as PropType<EditableProps['maxLength']>,
+    type: Number as PropType<UseEditableProps['maxLength']>,
   },
   modelValue: {
-    type: String as PropType<EditableProps['value']>,
+    type: String as PropType<UseEditableProps['value']>,
   },
   name: {
-    type: String as PropType<EditableProps['name']>,
+    type: String as PropType<UseEditableProps['name']>,
   },
   placeholder: {
-    type: String as PropType<EditableProps['placeholder']>,
+    type: String as PropType<UseEditableProps['placeholder']>,
   },
   readOnly: {
-    type: Boolean as PropType<EditableProps['readOnly']>,
+    type: Boolean as PropType<UseEditableProps['readOnly']>,
   },
   selectOnFocus: {
-    type: Boolean as PropType<EditableProps['selectOnFocus']>,
+    type: Boolean as PropType<UseEditableProps['selectOnFocus']>,
   },
   startWithEditView: {
-    type: Boolean as PropType<EditableProps['startWithEditView']>,
+    type: Boolean as PropType<UseEditableProps['startWithEditView']>,
   },
   submitMode: {
-    type: String as PropType<EditableProps['submitMode']>,
+    type: String as PropType<UseEditableProps['submitMode']>,
   },
   translations: {
-    type: Object as PropType<EditableProps['translations']>,
+    type: Object as PropType<UseEditableProps['translations']>,
   },
   value: {
-    type: String as PropType<EditableProps['value']>,
+    type: String as PropType<UseEditableProps['value']>,
   },
-}
+})
 
-export const Editable: ComponentWithProps<EditableProps> = defineComponent({
+export const Editable: ComponentWithProps<Partial<UseEditableProps>> = defineComponent({
   name: 'Editable',
   props: VueEditableProps,
   emits: ['cancel', 'change', 'update:modelValue', 'edit', 'submit'],
-  setup(props, { slots, attrs, emit, expose }) {
-    const api = useEditable(emit, props)
+  setup(props, { slots, attrs, emit }) {
+    const api = useEditable(emit, props as UseEditableProps)
 
     EditableProvider(api)
 
-    const exposeApi = reactive({ api: {} })
-
-    watchEffect(() => {
-      exposeApi.api = api.value
-    })
-
-    expose(exposeApi)
-
     return () => (
       <ark.div {...api.value.rootProps} {...attrs}>
-        {() => getValidChildren(slots)}
+        {() => slots?.default?.(api.value)}
       </ark.div>
     )
   },
 })
+
+export type EditableProps = Optional<UseEditableProps, 'id'>
diff --git a/packages/vue/src/editable/stories/basic.stories.vue b/packages/vue/src/editable/stories/basic.stories.vue
index f604df16ed..7cb6f81843 100644
--- a/packages/vue/src/editable/stories/basic.stories.vue
+++ b/packages/vue/src/editable/stories/basic.stories.vue
@@ -2,7 +2,7 @@
 import { Editable, EditableArea, EditableInput, EditableLabel, EditablePreview } from '../'
 </script>
 <template>
-  <Editable placeholder="Placeholder" activationMode="dblclick">
+  <Editable id="my" placeholder="Placeholder" activationMode="dblclick">
     <EditableLabel>Label</EditableLabel>
     <EditableArea>
       <EditableInput />
diff --git a/packages/vue/src/editable/stories/custom-controls.stories.vue b/packages/vue/src/editable/stories/custom-controls.stories.vue
index 3742191589..d0d6a27ef5 100644
--- a/packages/vue/src/editable/stories/custom-controls.stories.vue
+++ b/packages/vue/src/editable/stories/custom-controls.stories.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from 'vue';
 import {
   Editable,
   EditableArea,
@@ -10,27 +10,19 @@ import {
   EditableLabel,
   EditablePreview,
   EditableSubmitTrigger,
-  type EditableContext,
 } from '../'
 
-const editableRef = ref<{ api: EditableContext }>()
-
 // For editable.test.tsx
-const testProps = defineProps(['modelValue'])
+const testProps = ref<string>('')
 </script>
 <template>
-  <Editable
-    ref="editableRef"
-    activationMode="dblclick"
-    placeholder="Placeholder"
-    v-bind="testProps"
-  >
+  <Editable activationMode="dblclick" placeholder="Placeholder" v-model="testProps" v-slot="{ isEditing }">
     <EditableLabel>Label</EditableLabel>
     <EditableArea>
       <EditableInput data-testid="edit-input" />
       <EditablePreview />
     </EditableArea>
-    <EditableControl v-if="editableRef?.api.isEditing">
+    <EditableControl v-if="isEditing">
       <EditableSubmitTrigger>
         <button>Save</button>
       </EditableSubmitTrigger>
diff --git a/packages/vue/src/editable/use-editable.ts b/packages/vue/src/editable/use-editable.ts
index 01dafcf138..92a8ad9c81 100644
--- a/packages/vue/src/editable/use-editable.ts
+++ b/packages/vue/src/editable/use-editable.ts
@@ -1,20 +1,19 @@
-import { connect, machine, type Context as EditableContext } from '@zag-js/editable'
+import { connect, machine } from '@zag-js/editable'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, type UnwrapRef } from 'vue'
-import { type Optional } from '../types'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { EditableProps } from './editable'
 
-export interface UseEditableContext extends Optional<EditableContext, 'id'> {
-  modelValue?: EditableContext['value']
-}
-
-export const useEditable = (emit: CallableFunction, context: UseEditableContext) => {
+export const useEditable = <T extends ExtractPropTypes<EditableProps>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       value: reactiveContext.modelValue ?? reactiveContext.value,
       onCancel(details) {
         emit('cancel', details)
@@ -35,4 +34,4 @@ export const useEditable = (emit: CallableFunction, context: UseEditableContext)
   return computed(() => connect(state.value, send, normalizeProps))
 }
 
-export type UseEditableReturn = UnwrapRef<ReturnType<typeof useEditable>>
+export type UseEditableReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/hover-card/docs/hover-card.types.json b/packages/vue/src/hover-card/docs/hover-card.types.json
index 74ac22e0b3..0aef426be3 100644
--- a/packages/vue/src/hover-card/docs/hover-card.types.json
+++ b/packages/vue/src/hover-card/docs/hover-card.types.json
@@ -11,10 +11,15 @@
       "description": "The document's text/writing direction."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  trigger: string\n  content: string\n  positioner: string\n  arrow: string\n}>",
       "isRequired": false,
diff --git a/packages/vue/src/hover-card/hover-card.tsx b/packages/vue/src/hover-card/hover-card.tsx
index cc47da4a55..51373a5ea5 100644
--- a/packages/vue/src/hover-card/hover-card.tsx
+++ b/packages/vue/src/hover-card/hover-card.tsx
@@ -1,43 +1,51 @@
+import { type Context as HoverCardContext } from '@zag-js/hover-card'
 import { defineComponent, type PropType } from 'vue'
-import { type ComponentWithProps } from '../utils'
+
+import type { Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { HoverCardProvider } from './hover-card-context'
-import { useHoverCard, type UseHoverCardContext } from './use-hover-card'
+import { useHoverCard } from './use-hover-card'
 
-export type HoverCardProps = UseHoverCardContext
+export type UseHoverCardProps = HoverCardContext
 
-const VueHoverCardProps = {
+const VueHoverCardProps = createVueProps<UseHoverCardProps>({
+  id: {
+    type: String as PropType<UseHoverCardProps['id']>,
+  },
   ids: {
-    type: Object as PropType<HoverCardProps['ids']>,
+    type: Object as PropType<UseHoverCardProps['ids']>,
   },
   openDelay: {
-    type: Number as PropType<HoverCardProps['openDelay']>,
+    type: Number as PropType<UseHoverCardProps['openDelay']>,
   },
   closeDelay: {
-    type: Number as PropType<HoverCardProps['closeDelay']>,
+    type: Number as PropType<UseHoverCardProps['closeDelay']>,
   },
   dir: {
-    type: String as PropType<HoverCardProps['dir']>,
+    type: String as PropType<UseHoverCardProps['dir']>,
   },
   getRootNode: {
-    type: Function as PropType<HoverCardProps['getRootNode']>,
+    type: Function as PropType<UseHoverCardProps['getRootNode']>,
   },
   open: {
-    type: Boolean as PropType<HoverCardProps['open']>,
+    type: Boolean as PropType<UseHoverCardProps['open']>,
   },
   positioning: {
-    type: Object as PropType<HoverCardProps['positioning']>,
+    type: Object as PropType<UseHoverCardProps['positioning']>,
   },
-}
+})
 
-export const HoverCard: ComponentWithProps<HoverCardProps> = defineComponent({
+export const HoverCard: ComponentWithProps<Partial<UseHoverCardProps>> = defineComponent({
   name: 'HoverCard',
   props: VueHoverCardProps,
   emits: ['open', 'close'],
   setup(props, { slots, emit }) {
-    const api = useHoverCard(emit, props)
+    const api = useHoverCard(emit, props as HoverCardProps)
 
     HoverCardProvider(api)
 
-    return () => slots?.default?.()
+    return () => slots?.default?.(api.value)
   },
 })
+
+export type HoverCardProps = Optional<UseHoverCardProps, 'id'>
diff --git a/packages/vue/src/hover-card/use-hover-card.ts b/packages/vue/src/hover-card/use-hover-card.ts
index 4b9012fd04..7830135d8a 100644
--- a/packages/vue/src/hover-card/use-hover-card.ts
+++ b/packages/vue/src/hover-card/use-hover-card.ts
@@ -1,17 +1,19 @@
-import { connect, machine, type Context as HoverCardContext } from '@zag-js/hover-card'
+import { connect, machine } from '@zag-js/hover-card'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { HoverCardProps } from './hover-card'
 
-export type UseHoverCardContext = Omit<HoverCardContext, 'id'>
-
-export const useHoverCard = (emit: CallableFunction, context: UseHoverCardContext) => {
+export const useHoverCard = <T extends ExtractPropTypes<HoverCardProps>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       onOpen() {
         emit('open')
       },
@@ -24,4 +26,4 @@ export const useHoverCard = (emit: CallableFunction, context: UseHoverCardContex
   return computed(() => connect(state.value, send, normalizeProps))
 }
 
-export type UseHoverCardReturn = ReturnType<typeof useHoverCard>
+export type UseHoverCardReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/menu/docs/menu.types.json b/packages/vue/src/menu/docs/menu.types.json
index c29fe019bd..06d4b50b97 100644
--- a/packages/vue/src/menu/docs/menu.types.json
+++ b/packages/vue/src/menu/docs/menu.types.json
@@ -21,7 +21,7 @@
       "description": "The document's text/writing direction."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
diff --git a/packages/vue/src/menu/menu.tsx b/packages/vue/src/menu/menu.tsx
index 21978ecdce..a68a4a2425 100644
--- a/packages/vue/src/menu/menu.tsx
+++ b/packages/vue/src/menu/menu.tsx
@@ -1,6 +1,7 @@
+import type { Context } from '@zag-js/menu'
 import { computed, defineComponent, onMounted, type PropType } from 'vue'
-import { type Assign } from '../types'
-import { type ComponentWithProps } from '../utils'
+import type { Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import {
   MenuMachineProvider,
   MenuProvider,
@@ -8,57 +9,59 @@ import {
   useMenuContext,
   useMenuMachineContext,
 } from './menu-context'
-import { useMenu, type UseMenuContext } from './use-menu'
+import { useMenu } from './use-menu'
 
 export type MenuState = {
   isOpen: boolean
   onClose: () => void
 }
 
-export type MenuProps = Assign<UseMenuContext, { isOpen?: boolean }>
+export type UseMenuProps = Context & { isOpen?: boolean }
 
-export const Menu: ComponentWithProps<MenuProps> = defineComponent({
-  name: 'Menu',
-  props: {
-    anchorPoint: {
-      type: Object as PropType<MenuProps['anchorPoint']>,
-    },
-    'aria-label': {
-      type: String as PropType<MenuProps['aria-label']>,
-    },
-    closeOnSelect: {
-      type: Boolean as PropType<MenuProps['closeOnSelect']>,
-      default: true,
-    },
-    dir: {
-      type: String as PropType<MenuProps['dir']>,
-    },
-    getRootNode: {
-      type: Function as PropType<MenuProps['getRootNode']>,
-    },
-    id: {
-      type: String as PropType<MenuProps['id']>,
-    },
-    ids: {
-      type: Object as PropType<MenuProps['ids']>,
-    },
-    isOpen: {
-      type: Boolean as PropType<MenuProps['isOpen']>,
-      default: false,
-    },
-    loop: {
-      type: Boolean as PropType<MenuProps['loop']>,
-    },
-    positioning: {
-      type: Object as PropType<MenuProps['positioning']>,
-    },
-    value: {
-      type: Object as PropType<MenuProps['value']>,
-    },
+const VueProps = createVueProps<UseMenuProps>({
+  anchorPoint: {
+    type: Object as PropType<UseMenuProps['anchorPoint']>,
+  },
+  'aria-label': {
+    type: String as PropType<UseMenuProps['aria-label']>,
+  },
+  closeOnSelect: {
+    type: Boolean as PropType<UseMenuProps['closeOnSelect']>,
+    default: true,
+  },
+  dir: {
+    type: String as PropType<UseMenuProps['dir']>,
+  },
+  getRootNode: {
+    type: Function as PropType<UseMenuProps['getRootNode']>,
+  },
+  id: {
+    type: String as PropType<UseMenuProps['id']>,
+  },
+  ids: {
+    type: Object as PropType<UseMenuProps['ids']>,
+  },
+  isOpen: {
+    type: Boolean as PropType<UseMenuProps['isOpen']>,
+    default: false,
   },
+  loop: {
+    type: Boolean as PropType<UseMenuProps['loop']>,
+  },
+  positioning: {
+    type: Object as PropType<UseMenuProps['positioning']>,
+  },
+  value: {
+    type: Object as PropType<UseMenuProps['value']>,
+  },
+})
+
+export const Menu: ComponentWithProps<Partial<UseMenuProps>> = defineComponent({
+  name: 'Menu',
+  props: VueProps,
   emits: ['close', 'open', 'select', 'value-change'],
   setup(props, { slots, emit, expose }) {
-    const { api, menuMachine } = useMenu(emit, props)
+    const { api, menuMachine } = useMenu(emit, props as MenuProps)
 
     const parentApi = useMenuContext(undefined)
     const parentMachine = useMenuMachineContext(undefined)
@@ -90,6 +93,8 @@ export const Menu: ComponentWithProps<MenuProps> = defineComponent({
       context: exposeProps,
     })
 
-    return () => slots.default?.()
+    return () => slots.default?.({ isOpen: api.value.isOpen, close: api.value.close })
   },
 })
+
+export type MenuProps = Optional<UseMenuProps, 'id'>
diff --git a/packages/vue/src/menu/stories/basic.stories.vue b/packages/vue/src/menu/stories/basic.stories.vue
index 9371e69860..6ac3bbf57c 100644
--- a/packages/vue/src/menu/stories/basic.stories.vue
+++ b/packages/vue/src/menu/stories/basic.stories.vue
@@ -2,18 +2,11 @@
 import { ref, Teleport } from 'vue'
 import { Menu, MenuContent, MenuItem, MenuPositioner, MenuTrigger } from '../'
 import '../menu.css'
-
-const menuRef = ref<{
-  context: {
-    isOpen: boolean
-    onClose: () => void
-  }
-}>()
 </script>
 <template>
-  <Menu ref="menuRef">
+  <Menu v-slot="{ isOpen }">
     <MenuTrigger>
-      <button>{{ menuRef?.context.isOpen ? 'Close' : 'Open' }} menu</button>
+      <button>{{ isOpen ? 'Close' : 'Open' }} menu</button>
     </MenuTrigger>
     <Teleport to="body">
       <MenuPositioner>
diff --git a/packages/vue/src/menu/use-menu.ts b/packages/vue/src/menu/use-menu.ts
index d5844c1f95..44f5cf2732 100644
--- a/packages/vue/src/menu/use-menu.ts
+++ b/packages/vue/src/menu/use-menu.ts
@@ -1,18 +1,19 @@
-import { connect, machine, type Context } from '@zag-js/menu'
+import { connect, machine } from '@zag-js/menu'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, type UnwrapRef } from 'vue'
-import { type Optional } from '../types'
+import { computed, reactive, type ExtractPropTypes, type UnwrapRef } from 'vue'
 import { useId } from '../utils'
+import type { MenuProps } from './menu'
 
-export type UseMenuContext = Optional<Context, 'id'>
-
-export const useMenu = (emit: CallableFunction, context: UseMenuContext) => {
+export const useMenu = <T extends ExtractPropTypes<MenuProps>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send, menuMachine] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       onOpen() {
         emit('open')
       },
diff --git a/packages/vue/src/number-input/docs/number-input.types.json b/packages/vue/src/number-input/docs/number-input.types.json
index 477000102a..3f88cb8a74 100644
--- a/packages/vue/src/number-input/docs/number-input.types.json
+++ b/packages/vue/src/number-input/docs/number-input.types.json
@@ -41,10 +41,15 @@
       "description": "If using a custom display format, this converts the default format to the custom format."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  label: string\n  input: string\n  incrementTrigger: string\n  decrementTrigger: string\n  scrubber: string\n}>",
       "isRequired": false,
diff --git a/packages/vue/src/number-input/number-input.tsx b/packages/vue/src/number-input/number-input.tsx
index 70d021322d..c7b384ff91 100644
--- a/packages/vue/src/number-input/number-input.tsx
+++ b/packages/vue/src/number-input/number-input.tsx
@@ -1,95 +1,100 @@
+import type { Context } from '@zag-js/number-input'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { getValidChildren } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { NumberInputProvider } from './number-input-context'
-import { useNumberInput, type UseNumberInputContext } from './use-number-input'
+import { useNumberInput } from './use-number-input'
 
-export type NumberInputProps = Assign<HTMLArkProps<'div'>, UseNumberInputContext>
+export type NumberInputContext = Context & { modelValue?: Context['value'] }
+export type UseNumberInputProps = Assign<HTMLArkProps<'div'>, NumberInputContext>
 
-const VueNumberInputProps = {
+const VueNumberInputProps = createVueProps<UseNumberInputProps>({
+  id: {
+    type: String as PropType<UseNumberInputProps['id']>,
+  },
   allowMouseWheel: {
-    type: Boolean as PropType<NumberInputProps['allowMouseWheel']>,
+    type: Boolean as PropType<UseNumberInputProps['allowMouseWheel']>,
   },
   allowOverflow: {
-    type: Boolean as PropType<NumberInputProps['allowOverflow']>,
+    type: Boolean as PropType<UseNumberInputProps['allowOverflow']>,
   },
   clampValueOnBlur: {
-    type: Boolean as PropType<NumberInputProps['clampValueOnBlur']>,
+    type: Boolean as PropType<UseNumberInputProps['clampValueOnBlur']>,
     default: true,
   },
   dir: {
-    type: String as PropType<NumberInputProps['dir']>,
+    type: String as PropType<UseNumberInputProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<NumberInputProps['disabled']>,
+    type: Boolean as PropType<UseNumberInputProps['disabled']>,
   },
   focusInputOnChange: {
-    type: Boolean as PropType<NumberInputProps['focusInputOnChange']>,
+    type: Boolean as PropType<UseNumberInputProps['focusInputOnChange']>,
   },
   form: {
-    type: String as PropType<NumberInputProps['form']>,
+    type: String as PropType<UseNumberInputProps['form']>,
   },
   format: {
-    type: Function as PropType<NumberInputProps['format']>,
+    type: Function as PropType<UseNumberInputProps['format']>,
   },
   getRootNode: {
-    type: Function as PropType<NumberInputProps['getRootNode']>,
+    type: Function as PropType<UseNumberInputProps['getRootNode']>,
   },
   ids: {
-    type: Object as PropType<NumberInputProps['ids']>,
+    type: Object as PropType<UseNumberInputProps['ids']>,
   },
   inputMode: {
-    type: String as PropType<NumberInputProps['inputMode']>,
+    type: String as PropType<UseNumberInputProps['inputMode']>,
   },
   invalid: {
-    type: Boolean as PropType<NumberInputProps['invalid']>,
+    type: Boolean as PropType<UseNumberInputProps['invalid']>,
   },
   max: {
-    type: Number as PropType<NumberInputProps['max']>,
+    type: Number as PropType<UseNumberInputProps['max']>,
   },
   maxFractionDigits: {
-    type: Number as PropType<NumberInputProps['maxFractionDigits']>,
+    type: Number as PropType<UseNumberInputProps['maxFractionDigits']>,
   },
   min: {
-    type: Number as PropType<NumberInputProps['min']>,
+    type: Number as PropType<UseNumberInputProps['min']>,
   },
   minFractionDigits: {
-    type: Number as PropType<NumberInputProps['minFractionDigits']>,
+    type: Number as PropType<UseNumberInputProps['minFractionDigits']>,
   },
   modelValue: {
-    type: String as PropType<NumberInputProps['modelValue']>,
+    type: String as PropType<UseNumberInputProps['modelValue']>,
   },
   name: {
-    type: String as PropType<NumberInputProps['name']>,
+    type: String as PropType<UseNumberInputProps['name']>,
   },
   parse: {
-    type: Function as PropType<NumberInputProps['parse']>,
+    type: Function as PropType<UseNumberInputProps['parse']>,
   },
   pattern: {
-    type: String as PropType<NumberInputProps['pattern']>,
+    type: String as PropType<UseNumberInputProps['pattern']>,
   },
   readOnly: {
-    type: Boolean as PropType<NumberInputProps['readOnly']>,
+    type: Boolean as PropType<UseNumberInputProps['readOnly']>,
   },
   spinOnPress: {
-    type: Boolean as PropType<NumberInputProps['spinOnPress']>,
+    type: Boolean as PropType<UseNumberInputProps['spinOnPress']>,
   },
   step: {
-    type: Number as PropType<NumberInputProps['step']>,
+    type: Number as PropType<UseNumberInputProps['step']>,
   },
   translations: {
-    type: Object as PropType<NumberInputProps['translations']>,
+    type: Object as PropType<UseNumberInputProps['translations']>,
   },
   validateCharacter: {
-    type: Function as PropType<NumberInputProps['validateCharacter']>,
+    type: Function as PropType<UseNumberInputProps['validateCharacter']>,
   },
   value: {
-    type: String as PropType<NumberInputProps['value']>,
+    type: String as PropType<UseNumberInputProps['value']>,
   },
-}
+})
 
-export const NumberInput = defineComponent({
+export const NumberInput: ComponentWithProps<Partial<UseNumberInputProps>> = defineComponent({
   name: 'NumberInput',
   emits: ['change', 'focus', 'invalid', 'blur', 'update:modelValue'],
   props: VueNumberInputProps,
@@ -98,6 +103,8 @@ export const NumberInput = defineComponent({
 
     NumberInputProvider(api)
 
-    return () => <ark.div>{() => getValidChildren(slots)}</ark.div>
+    return () => <ark.div>{() => slots?.default?.(api.value)}</ark.div>
   },
 })
+
+export type NumberInputProps = Optional<NumberInputContext, 'id'>
diff --git a/packages/vue/src/number-input/use-number-input.tsx b/packages/vue/src/number-input/use-number-input.tsx
index 868211d3df..cdd0470aa7 100644
--- a/packages/vue/src/number-input/use-number-input.tsx
+++ b/packages/vue/src/number-input/use-number-input.tsx
@@ -1,19 +1,19 @@
-import { connect, machine, type Context as NumberInputContext } from '@zag-js/number-input'
+import { connect, machine } from '@zag-js/number-input'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { NumberInputContext } from './number-input'
 
-export interface UseNumberInputContext extends Omit<NumberInputContext, 'id'> {
-  modelValue?: NumberInputContext['value']
-}
-
-export const useNumberInput = (emit: CallableFunction, context: UseNumberInputContext) => {
+export const useNumberInput = <T extends ExtractPropTypes<NumberInputContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       value: reactiveContext.modelValue ?? reactiveContext.value,
       onBlur(details) {
         emit('blur', details)
@@ -34,4 +34,4 @@ export const useNumberInput = (emit: CallableFunction, context: UseNumberInputCo
   return computed(() => connect(state.value, send, normalizeProps))
 }
 
-export type UseNumberInputReturn = ReturnType<typeof useNumberInput>
+export type UseNumberInputReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/pagination/docs/pagination.types.json b/packages/vue/src/pagination/docs/pagination.types.json
index bccae50967..f4f323350a 100644
--- a/packages/vue/src/pagination/docs/pagination.types.json
+++ b/packages/vue/src/pagination/docs/pagination.types.json
@@ -7,7 +7,7 @@
       "description": "The document's text/writing direction."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
diff --git a/packages/vue/src/pagination/pagination-page-trigger.tsx b/packages/vue/src/pagination/pagination-page-trigger.tsx
index a28c7f51ff..f27f3b4fd5 100644
--- a/packages/vue/src/pagination/pagination-page-trigger.tsx
+++ b/packages/vue/src/pagination/pagination-page-trigger.tsx
@@ -6,7 +6,7 @@ import { usePaginationContext } from './pagination-context'
 
 export type PaginationPageTriggerProps = HTMLArkProps<'li'> & PageTriggerProps
 
-export const PaginationPageTrigger: ComponentWithProps<PaginationPageTriggerProps> =
+export const PaginationPageTrigger: ComponentWithProps<Partial<PaginationPageTriggerProps>> =
   defineComponent({
     name: 'PaginationPageTrigger',
     props: {
diff --git a/packages/vue/src/pagination/pagination.stories.vue b/packages/vue/src/pagination/pagination.stories.vue
index 292eacf2e0..e3d070450b 100644
--- a/packages/vue/src/pagination/pagination.stories.vue
+++ b/packages/vue/src/pagination/pagination.stories.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   Pagination,
   PaginationEllipsis,
@@ -9,28 +8,20 @@ import {
   PaginationPageTrigger,
   PaginationPrevPageTrigger,
 } from './'
-import './pagination.css'
-import type { UsePaginationReturn } from './use-pagination'
 
-const paginationRef = ref<{ context: UsePaginationReturn }>()
+import './pagination.css'
 </script>
 <template>
-  <Pagination ref="paginationRef" :count="5000" :page-size="10" :sibling-count="2">
+  <Pagination v-slot="{ pages }" :count="5000" :page-size="10" :sibling-count="2">
     <PaginationList>
-      <PaginationListItem>
-        <PaginationPrevPageTrigger>
-          Previous <span className="visually-hidden">Page</span>
-        </PaginationPrevPageTrigger>
-      </PaginationListItem>
-
-      <!-- eslint-disable-next-line vue/no-v-for-template-key -->
-      <template v-for="(page, index) in paginationRef?.context.pages" :key="index">
-        <PaginationListItem>
-          <PaginationPageTrigger v-if="page.type === 'page'" :value="page.value" :type="page.type">
-            {{ page.value }}
-          </PaginationPageTrigger>
-          <PaginationEllipsis v-else :index="index"> &#8230; </PaginationEllipsis>
-        </PaginationListItem>
+      <PaginationPrevPageTrigger>
+        <button>Previous <span className="visually-hidden">Page</span></button>
+      </PaginationPrevPageTrigger>
+      <template v-for="(page, index) in pages">
+        <PaginationPageTrigger v-if="page.type === 'page'" :value="page.value">
+          <button>{{ page.value }}</button>
+        </PaginationPageTrigger>
+        <PaginationEllipsis v-else :index=" index "> &#8230; </PaginationEllipsis>
       </template>
       <PaginationListItem>
         <PaginationNextPageTrigger>
diff --git a/packages/vue/src/pagination/pagination.tsx b/packages/vue/src/pagination/pagination.tsx
index 970b162352..44ab0c2855 100644
--- a/packages/vue/src/pagination/pagination.tsx
+++ b/packages/vue/src/pagination/pagination.tsx
@@ -1,58 +1,59 @@
+import type { Context as PaginationContext } from '@zag-js/pagination'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { getValidChildren, type ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { PaginationProvider } from './pagination-context'
-import { usePagination, type UsePaginationContext } from './use-pagination'
+import { usePagination } from './use-pagination'
 
-export type PaginationProps = Assign<HTMLArkProps<'nav'>, UsePaginationContext>
+export type UsePaginationProps = Assign<HTMLArkProps<'nav'>, PaginationContext>
 
-export const Pagination: ComponentWithProps<PaginationProps> = defineComponent({
-  name: 'Pagination',
-  props: {
-    count: {
-      type: Number as PropType<PaginationProps['count']>,
-      required: true,
-    },
-    dir: {
-      type: String as PropType<PaginationProps['dir']>,
-    },
-    getRootNode: {
-      type: Function as PropType<PaginationProps['getRootNode']>,
-    },
-    id: {
-      type: String as PropType<PaginationProps['id']>,
-    },
-    ids: {
-      type: Object as PropType<PaginationProps['ids']>,
-    },
-    page: {
-      type: Number as PropType<PaginationProps['page']>,
-    },
-    pageSize: {
-      type: Number as PropType<PaginationProps['pageSize']>,
-    },
-    siblingCount: {
-      type: Number as PropType<PaginationProps['siblingCount']>,
-    },
-    translations: {
-      type: Object as PropType<PaginationProps['translations']>,
-    },
+const VueProps = createVueProps<UsePaginationProps>({
+  count: {
+    type: Number as PropType<UsePaginationProps['count']>,
+    required: true,
+  },
+  dir: {
+    type: String as PropType<UsePaginationProps['dir']>,
+  },
+  getRootNode: {
+    type: Function as PropType<UsePaginationProps['getRootNode']>,
+  },
+  id: {
+    type: String as PropType<UsePaginationProps['id']>,
+  },
+  ids: {
+    type: Object as PropType<UsePaginationProps['ids']>,
+  },
+  page: {
+    type: Number as PropType<UsePaginationProps['page']>,
+  },
+  pageSize: {
+    type: Number as PropType<UsePaginationProps['pageSize']>,
   },
+  siblingCount: {
+    type: Number as PropType<UsePaginationProps['siblingCount']>,
+  },
+  translations: {
+    type: Object as PropType<UsePaginationProps['translations']>,
+  },
+})
+
+export const Pagination: ComponentWithProps<Partial<UsePaginationProps>> = defineComponent({
+  name: 'Pagination',
+  props: VueProps,
   emits: ['change'],
-  setup(props, { slots, attrs, emit, expose }) {
+  setup(props, { slots, attrs, emit }) {
     const api = usePagination(emit, props)
 
-    expose({
-      context: api,
-    })
-
     PaginationProvider(api)
 
     return () => (
       <ark.nav {...api.value.rootProps} {...attrs}>
-        {() => getValidChildren(slots)}
+        {() => slots?.default?.(api.value)}
       </ark.nav>
     )
   },
 })
+
+export type PaginationProps = Optional<PaginationContext, 'id'>
diff --git a/packages/vue/src/pagination/use-pagination.ts b/packages/vue/src/pagination/use-pagination.ts
index b237437781..f3a04e1153 100644
--- a/packages/vue/src/pagination/use-pagination.ts
+++ b/packages/vue/src/pagination/use-pagination.ts
@@ -1,18 +1,19 @@
 import { connect, machine, type Context as PaginationContext } from '@zag-js/pagination'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, type UnwrapRef } from 'vue'
-import { type Optional } from '../types'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
 
-export type UsePaginationContext = Optional<PaginationContext, 'id'>
-
-export const usePagination = (emit: CallableFunction, context: UsePaginationContext) => {
+export const usePagination = <T extends ExtractPropTypes<PaginationContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      count: reactiveContext.count || 0,
+      id: reactiveContext.id || useId().value,
       onChange(details) {
         emit('change', details)
       },
@@ -22,4 +23,4 @@ export const usePagination = (emit: CallableFunction, context: UsePaginationCont
   return computed(() => connect(state.value, send, normalizeProps))
 }
 
-export type UsePaginationReturn = UnwrapRef<ReturnType<typeof usePagination>>
+export type UsePaginationReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/pin-input/docs/pin-input.types.json b/packages/vue/src/pin-input/docs/pin-input.types.json
index 43a7c7bf47..71d6693c3a 100644
--- a/packages/vue/src/pin-input/docs/pin-input.types.json
+++ b/packages/vue/src/pin-input/docs/pin-input.types.json
@@ -1,4 +1,112 @@
 {
+  "PinInputContext": {
+    "id": {
+      "type": "string",
+      "isRequired": true,
+      "description": "The unique identifier of the machine."
+    },
+    "autoFocus": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether to auto-focus the first input."
+    },
+    "blurOnComplete": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether to blur the input when the value is complete"
+    },
+    "dir": {
+      "type": "'ltr' | 'rtl'",
+      "isRequired": false,
+      "description": "The document's text/writing direction."
+    },
+    "disabled": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether the inputs are disabled"
+    },
+    "form": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The associate form of the underlying input element."
+    },
+    "getRootNode": {
+      "type": "() => ShadowRoot | Node | Document",
+      "isRequired": false,
+      "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
+    },
+    "ids": {
+      "type": "Partial<{\n  root: string\n  hiddenInput: string\n  label: string\n  control: string\n  input(id: string): string\n}>",
+      "isRequired": false,
+      "description": "The ids of the elements in the pin input. Useful for composition."
+    },
+    "invalid": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether the pin input is in the invalid state"
+    },
+    "mask": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "If `true`, the input's value will be masked just like `type=password`"
+    },
+    "modelValue": { "type": "string[]", "isRequired": false },
+    "name": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The name of the input element. Useful for form submission."
+    },
+    "onChange": {
+      "type": "(details: { value: string[] }) => void",
+      "isRequired": false,
+      "description": "Function called on input change"
+    },
+    "onComplete": {
+      "type": "(details: { value: string[]; valueAsString: string }) => void",
+      "isRequired": false,
+      "description": "Function called when all inputs have valid values"
+    },
+    "onInvalid": {
+      "type": "(details: { value: string; index: number }) => void",
+      "isRequired": false,
+      "description": "Function called when an invalid value is entered"
+    },
+    "otp": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "If `true`, the pin input component signals to its fields that they should\nuse `autocomplete=\"one-time-code\"`."
+    },
+    "pattern": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The regular expression that the user-entered input value is checked against."
+    },
+    "placeholder": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The placeholder text for the input"
+    },
+    "selectOnFocus": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether to select input value when input is focused"
+    },
+    "translations": {
+      "type": "IntlTranslations",
+      "isRequired": false,
+      "description": "Specifies the localized strings that identifies the accessibility elements and their states"
+    },
+    "type": {
+      "type": "'numeric' | 'alphanumeric' | 'alphabetic'",
+      "isRequired": false,
+      "description": "The type of value the pin-input should allow"
+    },
+    "value": {
+      "type": "string[]",
+      "isRequired": false,
+      "description": "The value of the the pin input."
+    }
+  },
   "PinInputProps": {
     "autoFocus": {
       "type": "boolean",
@@ -26,10 +134,15 @@
       "description": "The associate form of the underlying input element."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  hiddenInput: string\n  label: string\n  control: string\n  input(id: string): string\n}>",
       "isRequired": false,
diff --git a/packages/vue/src/pin-input/index.ts b/packages/vue/src/pin-input/index.ts
index 1293878314..314e986680 100644
--- a/packages/vue/src/pin-input/index.ts
+++ b/packages/vue/src/pin-input/index.ts
@@ -1,4 +1,4 @@
-export { PinInput, type PinInputProps } from './pin-input'
+export { PinInput, type PinInputContext, type PinInputProps } from './pin-input'
 export { PinInputControl, type PinInputControlProps } from './pin-input-control'
 export { PinInputField, type PinInputFieldProps } from './pin-input-field'
 export { PinInputLabel, type PinInputLabelProps } from './pin-input-label'
diff --git a/packages/vue/src/pin-input/pin-input.stories.vue b/packages/vue/src/pin-input/pin-input.stories.vue
index da707a1662..c2a7e36e8a 100644
--- a/packages/vue/src/pin-input/pin-input.stories.vue
+++ b/packages/vue/src/pin-input/pin-input.stories.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { PinInput, PinInputControl, PinInputField, PinInputLabel, UsePinInputProps } from './'
+import { PinInput, PinInputControl, PinInputField, PinInputLabel, type PinInputContext } from './'
 
-const handleComplete: UsePinInputProps['context']['onComplete'] = (e) => alert(e.valueAsString)
+const handleComplete: PinInputContext['onComplete'] = (e) => alert(e.valueAsString)
 </script>
 <template>
   <PinInput placeholder="*" @complete="handleComplete">
diff --git a/packages/vue/src/pin-input/pin-input.tsx b/packages/vue/src/pin-input/pin-input.tsx
index df80247ff7..52a3e811d4 100644
--- a/packages/vue/src/pin-input/pin-input.tsx
+++ b/packages/vue/src/pin-input/pin-input.tsx
@@ -1,70 +1,74 @@
-import { defineComponent, type ComponentPropsOptions, type PropType } from 'vue'
+import { type Context } from '@zag-js/pin-input'
+import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { getValidChildren, type ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { PinInputProvider } from './pin-input-context'
-import { usePinInput, type UsePinInputContext } from './use-pin-input'
+import { usePinInput } from './use-pin-input'
 
-export type PinInputProps = Assign<HTMLArkProps<'div'>, UsePinInputContext>
+export type PinInputContext = Context & {
+  modelValue?: PinInputContext['value']
+}
+export type UsePinInputProps = Assign<HTMLArkProps<'div'>, PinInputContext>
 
-const VuePinInputProps: ComponentPropsOptions = {
+const VuePinInputProps = createVueProps<UsePinInputProps>({
   autoFocus: {
-    type: Boolean as PropType<PinInputProps['autoFocus']>,
+    type: Boolean as PropType<UsePinInputProps['autoFocus']>,
   },
   blurOnComplete: {
-    type: Boolean as PropType<PinInputProps['blurOnComplete']>,
+    type: Boolean as PropType<UsePinInputProps['blurOnComplete']>,
   },
   dir: {
-    type: String as PropType<PinInputProps['dir']>,
+    type: String as PropType<UsePinInputProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<PinInputProps['disabled']>,
+    type: Boolean as PropType<UsePinInputProps['disabled']>,
   },
   form: {
-    type: String as PropType<PinInputProps['form']>,
+    type: String as PropType<UsePinInputProps['form']>,
   },
   id: {
-    type: String as PropType<PinInputProps['id']>,
+    type: String as PropType<UsePinInputProps['id']>,
   },
   ids: {
-    type: Object as PropType<PinInputProps['ids']>,
+    type: Object as PropType<UsePinInputProps['ids']>,
   },
   invalid: {
-    type: Boolean as PropType<PinInputProps['invalid']>,
+    type: Boolean as PropType<UsePinInputProps['invalid']>,
   },
   mask: {
-    type: Boolean as PropType<PinInputProps['mask']>,
+    type: Boolean as PropType<UsePinInputProps['mask']>,
   },
   modelValue: {
-    type: Array as PropType<PinInputProps['modelValue']>,
+    type: Array as PropType<UsePinInputProps['modelValue']>,
   },
   name: {
-    type: String as PropType<PinInputProps['name']>,
+    type: String as PropType<UsePinInputProps['name']>,
   },
   otp: {
-    type: Boolean as PropType<PinInputProps['otp']>,
+    type: Boolean as PropType<UsePinInputProps['otp']>,
   },
   pattern: {
-    type: String as PropType<PinInputProps['pattern']>,
+    type: String as PropType<UsePinInputProps['pattern']>,
   },
   placeholder: {
-    type: String as PropType<PinInputProps['placeholder']>,
+    type: String as PropType<UsePinInputProps['placeholder']>,
   },
   selectOnFocus: {
-    type: Boolean as PropType<PinInputProps['selectOnFocus']>,
+    type: Boolean as PropType<UsePinInputProps['selectOnFocus']>,
   },
   translations: {
-    type: Object as PropType<PinInputProps['translations']>,
+    type: Object as PropType<UsePinInputProps['translations']>,
   },
   type: {
-    type: String as PropType<PinInputProps['type']>,
+    type: String as PropType<UsePinInputProps['type']>,
   },
   value: {
-    type: Array as PropType<PinInputProps['value']>,
+    type: Array as PropType<UsePinInputProps['value']>,
   },
-}
+})
 
-export const PinInput: ComponentWithProps<PinInputProps> = defineComponent({
+export const PinInput: ComponentWithProps<Partial<UsePinInputProps>> = defineComponent({
   name: 'PinInput',
   props: VuePinInputProps,
   emits: ['change', 'update:modelValue', 'invalid', 'complete'],
@@ -75,8 +79,10 @@ export const PinInput: ComponentWithProps<PinInputProps> = defineComponent({
 
     return () => (
       <ark.div {...api.value.rootProps} {...attrs}>
-        {() => getValidChildren(slots)}
+        {() => slots?.default?.(api.value)}
       </ark.div>
     )
   },
 })
+
+export type PinInputProps = Optional<PinInputContext, 'id'>
diff --git a/packages/vue/src/pin-input/use-pin-input.ts b/packages/vue/src/pin-input/use-pin-input.ts
index f55ca87a7b..88d1637a83 100644
--- a/packages/vue/src/pin-input/use-pin-input.ts
+++ b/packages/vue/src/pin-input/use-pin-input.ts
@@ -1,19 +1,19 @@
-import { connect, machine, type Context as PinInputContext } from '@zag-js/pin-input'
+import { connect, machine } from '@zag-js/pin-input'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { PinInputContext } from './pin-input'
 
-export interface UsePinInputContext extends Omit<PinInputContext, 'id'> {
-  modelValue?: PinInputContext['value']
-}
-
-export const usePinInput = (emit: CallableFunction, context: UsePinInputContext) => {
+export const usePinInput = <T extends ExtractPropTypes<PinInputContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       value: reactiveContext.modelValue ?? reactiveContext.value,
       onChange(details) {
         emit('change', details)
@@ -33,4 +33,4 @@ export const usePinInput = (emit: CallableFunction, context: UsePinInputContext)
   return api
 }
 
-export type UsePinInputReturn = ReturnType<typeof usePinInput>
+export type UsePinInputReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/popover/docs/popover.types.json b/packages/vue/src/popover/docs/popover.types.json
index ccbd0822c3..a8d724ee9e 100644
--- a/packages/vue/src/popover/docs/popover.types.json
+++ b/packages/vue/src/popover/docs/popover.types.json
@@ -16,7 +16,7 @@
       "description": "Whether to close the popover when the user clicks outside of the popover."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
diff --git a/packages/vue/src/popover/popover.tsx b/packages/vue/src/popover/popover.tsx
index e5970a61ae..05bb25f856 100644
--- a/packages/vue/src/popover/popover.tsx
+++ b/packages/vue/src/popover/popover.tsx
@@ -1,50 +1,61 @@
+import type { Context } from '@zag-js/popover'
 import { defineComponent, type PropType } from 'vue'
+import type { Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { PopoverProvider } from './popover-context'
-import { usePopover, type UsePopoverContext } from './use-popover'
+import { usePopover } from './use-popover'
 
-export type PopoverProps = UsePopoverContext
+export type PopoverContext = Context & {
+  /**
+   * Control the open state of the popover.
+   *
+   * @default false
+   */
+  isOpen?: boolean
+}
+export type UsePopoverProps = PopoverContext
 
-const VuePopoverProps = {
+const VuePopoverProps = createVueProps<Partial<UsePopoverProps>>({
   autoFocus: {
-    type: Boolean as PropType<PopoverProps['autoFocus']>,
+    type: Boolean as PropType<UsePopoverProps['autoFocus']>,
   },
   closeOnEsc: {
-    type: Boolean as PropType<PopoverProps['closeOnEsc']>,
+    type: Boolean as PropType<UsePopoverProps['closeOnEsc']>,
   },
   closeOnInteractOutside: {
-    type: Boolean as PropType<PopoverProps['closeOnInteractOutside']>,
+    type: Boolean as PropType<UsePopoverProps['closeOnInteractOutside']>,
   },
   getRootNode: {
-    type: Function as PropType<PopoverProps['getRootNode']>,
+    type: Function as PropType<UsePopoverProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<PopoverProps['id']>,
+    type: String as PropType<UsePopoverProps['id']>,
   },
   ids: {
-    type: Object as PropType<PopoverProps['ids']>,
+    type: Object as PropType<UsePopoverProps['ids']>,
   },
   initialFocusEl: {
-    type: [Object, Function] as PropType<PopoverProps['initialFocusEl']>,
+    type: [Object, Function] as PropType<UsePopoverProps['initialFocusEl']>,
   },
   isOpen: {
-    type: Boolean as PropType<PopoverProps['isOpen']>,
+    type: Boolean as PropType<UsePopoverProps['isOpen']>,
     default: false,
   },
   modal: {
-    type: Boolean as PropType<PopoverProps['modal']>,
+    type: Boolean as PropType<UsePopoverProps['modal']>,
   },
   portalled: {
-    type: Boolean as PropType<PopoverProps['portalled']>,
+    type: Boolean as PropType<UsePopoverProps['portalled']>,
   },
   open: {
-    type: Boolean as PropType<PopoverProps['open']>,
+    type: Boolean as PropType<UsePopoverProps['open']>,
   },
   positioning: {
-    type: Object as PropType<PopoverProps['positioning']>,
+    type: Object as PropType<UsePopoverProps['positioning']>,
   },
-}
+})
 
-export const Popover = defineComponent({
+export const Popover: ComponentWithProps<Partial<UsePopoverProps>> = defineComponent({
   name: 'Popover',
   props: VuePopoverProps,
   emits: [
@@ -56,10 +67,12 @@ export const Popover = defineComponent({
     'pointer-down-outside',
   ],
   setup(props, { slots, emit }) {
-    const api = usePopover(emit, props)
+    const api = usePopover(emit, props as Partial<UsePopoverProps>)
 
     PopoverProvider(api)
 
-    return () => slots.default?.()
+    return () => slots.default?.(api.value)
   },
 })
+
+export type PopoverProps = Optional<UsePopoverProps, 'id'>
diff --git a/packages/vue/src/popover/stories/controlled.stories.vue b/packages/vue/src/popover/stories/controlled.stories.vue
index 52f6314cd5..84abe09ef3 100644
--- a/packages/vue/src/popover/stories/controlled.stories.vue
+++ b/packages/vue/src/popover/stories/controlled.stories.vue
@@ -11,7 +11,7 @@ import {
   PopoverTitle,
   PopoverTrigger,
 } from '../'
-import type { UsePopoverContext } from '../use-popover'
+import type { PopoverContext } from '../popover'
 
 const isOpen = ref(false)
 
@@ -19,7 +19,7 @@ const handleOpenClick = () => {
   return (isOpen.value = !isOpen.value)
 }
 
-const handleOnClose: UsePopoverContext['onClose'] = () => {
+const handleOnClose: PopoverContext['onClose'] = () => {
   return (isOpen.value = false)
 }
 </script>
diff --git a/packages/vue/src/popover/use-popover.ts b/packages/vue/src/popover/use-popover.ts
index 20ccff4291..2fb8a8d0b7 100644
--- a/packages/vue/src/popover/use-popover.ts
+++ b/packages/vue/src/popover/use-popover.ts
@@ -1,25 +1,19 @@
-import { connect, machine, type Context as PopoverContext } from '@zag-js/popover'
+import { connect, machine } from '@zag-js/popover'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, watch, type UnwrapRef } from 'vue'
-import { type Optional } from '../types'
+import { computed, reactive, watch, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { PopoverContext } from './popover'
 
-export interface UsePopoverContext extends Optional<PopoverContext, 'id'> {
-  /**
-   * Control the open state of the popover.
-   *
-   * @default false
-   */
-  isOpen?: boolean
-}
-
-export const usePopover = (emit: CallableFunction, context: UsePopoverContext) => {
+export const usePopover = <T extends ExtractPropTypes<PopoverContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       open: reactiveContext.isOpen,
       onEscapeKeyDown(event) {
         emit('escape-key-down', event)
@@ -62,4 +56,4 @@ export const usePopover = (emit: CallableFunction, context: UsePopoverContext) =
   return api
 }
 
-export type UsePopoverReturn = UnwrapRef<ReturnType<typeof usePopover>>
+export type UsePopoverReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/pressable/docs/pressable.types.json b/packages/vue/src/pressable/docs/pressable.types.json
index e9e7f864e3..ee1fea4a20 100644
--- a/packages/vue/src/pressable/docs/pressable.types.json
+++ b/packages/vue/src/pressable/docs/pressable.types.json
@@ -1,71 +1,42 @@
 {
   "PressableProps": {
-    "allowTextSelectionOnPress": {
-      "type": "boolean",
-      "isRequired": false,
-      "description": "Whether text selection should be enabled on the pressable element."
-    },
-    "dir": {
-      "type": "'ltr' | 'rtl'",
+    "id": {
+      "type": "string",
       "isRequired": false,
-      "description": "The document's text/writing direction."
-    },
-    "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
-      "isRequired": false,
-      "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
-    },
-    "isCanceledOnExit": { "type": "boolean", "isRequired": false },
-    "isDisabled": { "type": "boolean", "isRequired": false },
-    "onLongPress": {
-      "type": "(event: PressEvent) => void",
-      "isRequired": false,
-      "description": "Handler that is called when the element has been pressed for 500 milliseconds"
-    },
-    "onPress": {
-      "type": "(event: PressEvent) => void",
-      "isRequired": false,
-      "description": "Handler that is called when the press is released over the target."
-    },
-    "onPressEnd": {
-      "type": "(event: PressEvent) => void",
-      "isRequired": false,
-      "description": "Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target."
-    },
-    "onPressStart": {
-      "type": "(event: PressEvent) => void",
-      "isRequired": false,
-      "description": "Handler that is called when a press interaction starts."
-    },
-    "onPressUp": {
-      "type": "(event: PressEvent) => void",
-      "isRequired": false,
-      "description": "Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not."
-    },
-    "preventFocusOnPress": {
-      "type": "boolean",
-      "isRequired": false,
-      "description": "Whether the target should not receive focus on press."
+      "description": "The unique identifier of the machine."
     }
   },
   "UsePressableContext": {
+    "id": {
+      "type": "string",
+      "isRequired": true,
+      "description": "The unique identifier of the machine."
+    },
     "allowTextSelectionOnPress": {
       "type": "boolean",
       "isRequired": false,
       "description": "Whether text selection should be enabled on the pressable element."
     },
+    "cancelOnPointerExit": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether press events should be canceled when the pointer leaves the target while pressed.\n\nBy default, this is `false`, which means if the pointer returns back over the target while\nstill pressed, onPressStart will be fired again.\n\nIf set to `true`, the press is canceled when the pointer leaves the target and\nonPressStart will not be fired if the pointer returns."
+    },
     "dir": {
       "type": "'ltr' | 'rtl'",
       "isRequired": false,
       "description": "The document's text/writing direction."
     },
+    "disabled": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether the element is disabled"
+    },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
-    "isCanceledOnExit": { "type": "boolean", "isRequired": false },
-    "isDisabled": { "type": "boolean", "isRequired": false },
     "onLongPress": {
       "type": "(event: PressEvent) => void",
       "isRequired": false,
diff --git a/packages/vue/src/pressable/pressable.tsx b/packages/vue/src/pressable/pressable.tsx
index aa3895b007..75db5e29c0 100644
--- a/packages/vue/src/pressable/pressable.tsx
+++ b/packages/vue/src/pressable/pressable.tsx
@@ -1,37 +1,45 @@
+import type { Context as PressableContext } from '@zag-js/pressable'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { getValidChildren, type ComponentWithProps } from '../utils'
-import { usePressable, type UsePressableContext } from './use-pressable'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
+import { usePressable } from './use-pressable'
 
-export type PressableProps = Assign<HTMLArkProps<'button'>, UsePressableContext>
+export type UsePressableProps = Assign<HTMLArkProps<'button'>, PressableContext>
 
-export const Pressable: ComponentWithProps<PressableProps> = defineComponent({
-  name: 'Pressable',
-  props: {
-    isDisabled: {
-      type: Boolean as PropType<PressableProps['isDisabled']>,
-    },
-    isCanceledOnExit: {
-      type: Boolean as PropType<PressableProps['isCanceledOnExit']>,
-    },
-    preventFocusOnPress: {
-      type: Boolean as PropType<PressableProps['preventFocusOnPress']>,
-    },
-    allowTextSelectionOnPress: {
-      type: Boolean as PropType<PressableProps['allowTextSelectionOnPress']>,
-    },
-    dir: {
-      type: String as PropType<PressableProps['dir']>,
-    },
+const VueProps = createVueProps<UsePressableProps>({
+  id: {
+    type: String as PropType<UsePressableProps['id']>,
+  },
+  disabled: {
+    type: Boolean as PropType<UsePressableProps['disabled']>,
+  },
+  cancelOnPointerExit: {
+    type: Boolean as PropType<UsePressableProps['cancelOnPointerExit']>,
+  },
+  preventFocusOnPress: {
+    type: Boolean as PropType<UsePressableProps['preventFocusOnPress']>,
+  },
+  allowTextSelectionOnPress: {
+    type: Boolean as PropType<UsePressableProps['allowTextSelectionOnPress']>,
   },
-  emits: ['press', 'longPress', 'pressEnd', 'pressUp', 'pressStart'],
+  dir: {
+    type: String as PropType<UsePressableProps['dir']>,
+  },
+})
+
+export const Pressable: ComponentWithProps<Partial<UsePressableProps>> = defineComponent({
+  name: 'Pressable',
+  props: VueProps,
+  emits: ['press', 'long-press', 'press-end', 'press-up', 'press-start'],
   setup(props, { slots, attrs, emit }) {
     const api = usePressable(emit, props)
     return () => (
       <ark.button {...api.value.pressableProps} {...attrs}>
-        {() => getValidChildren(slots)}
+        {() => slots?.default?.(api.value)}
       </ark.button>
     )
   },
 })
+
+export type PressableProps = Optional<UsePressableProps, 'id'>
diff --git a/packages/vue/src/pressable/use-pressable.tsx b/packages/vue/src/pressable/use-pressable.tsx
index 1ebcfbc8bb..65fe77b965 100644
--- a/packages/vue/src/pressable/use-pressable.tsx
+++ b/packages/vue/src/pressable/use-pressable.tsx
@@ -1,39 +1,36 @@
 import { connect, machine, type Context as PressableContext } from '@zag-js/pressable'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
 
-export type UsePressableContext = Omit<
-  PressableContext,
-  'id' | 'disabled' | 'cancelOnPointerExit'
-> & {
-  isDisabled?: PressableContext['disabled']
-  isCanceledOnExit?: PressableContext['cancelOnPointerExit']
-}
+export type UsePressableContext = PressableContext
 
-export const usePressable = (emit: CallableFunction, context: UsePressableContext) => {
+export const usePressable = <T extends ExtractPropTypes<PressableContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      disabled: reactiveContext.isDisabled,
-      cancelOnPointerExit: reactiveContext.isCanceledOnExit,
-      id: useId().value,
+      disabled: reactiveContext.disabled,
+      cancelOnPointerExit: reactiveContext.cancelOnPointerExit,
+      id: reactiveContext.id || useId().value,
       onLongPress(event) {
-        emit('longPress', event)
+        emit('long-press', event)
       },
       onPress(event) {
         emit('press', event)
       },
       onPressEnd(event) {
-        emit('pressEnd', event)
+        emit('press-end', event)
       },
       onPressStart(event) {
-        emit('pressStart', event)
+        emit('press-start', event)
       },
       onPressUp(event) {
-        emit('pressUp', event)
+        emit('press-up', event)
       },
     }),
   )
diff --git a/packages/vue/src/radio-group/docs/radio-group.types.json b/packages/vue/src/radio-group/docs/radio-group.types.json
index db360b28a1..b880998568 100644
--- a/packages/vue/src/radio-group/docs/radio-group.types.json
+++ b/packages/vue/src/radio-group/docs/radio-group.types.json
@@ -11,6 +11,7 @@
       "isRequired": false,
       "description": "If `true`, the radio is marked as invalid."
     },
+    "modelValue": { "type": "string", "isRequired": false },
     "readOnly": {
       "type": "boolean",
       "isRequired": false,
@@ -34,7 +35,7 @@
       "description": "The associate form of the underlying input."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
diff --git a/packages/vue/src/radio-group/radio-context.ts b/packages/vue/src/radio-group/radio-context.ts
index 40ef2d7591..70ccb2054b 100644
--- a/packages/vue/src/radio-group/radio-context.ts
+++ b/packages/vue/src/radio-group/radio-context.ts
@@ -1,13 +1,13 @@
-import { type connect } from '@zag-js/radio-group'
+import { type connect, type Context } from '@zag-js/radio-group'
 import { type ComputedRef } from 'vue'
 import { createContext } from '../context'
-import { type UseRadioGroupReturn } from './use-radio-group'
+import type { RadioProps } from './radio'
 
 export type RadioContext = Parameters<ReturnType<typeof connect>['getRadioProps']>[0]
 
-export const [RadioProvider, useRadioContext] = createContext<RadioContext>('RadioContext')
+export const [RadioProvider, useRadioContext] = createContext<RadioProps>('RadioContext')
 
 export const [RadioGroupProvider, useRadioGroupContext] =
   createContext<ComputedRef<ReturnType<typeof connect>>>('RadioGroupContext')
 
-export type RadioGroupContext = UseRadioGroupReturn
+export type RadioGroupContext = Context
diff --git a/packages/vue/src/radio-group/radio-group.tsx b/packages/vue/src/radio-group/radio-group.tsx
index 2d3f428dd5..0a6f62134c 100644
--- a/packages/vue/src/radio-group/radio-group.tsx
+++ b/packages/vue/src/radio-group/radio-group.tsx
@@ -1,49 +1,55 @@
+import type { Context } from '@zag-js/radio-group'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { getValidChildren, type ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { RadioGroupProvider } from './radio-context'
-import { useRadioGroup, type UseRadioGroupContext } from './use-radio-group'
+import { useRadioGroup } from './use-radio-group'
 
-export type RadioGroupProps = Assign<HTMLArkProps<'div'>, UseRadioGroupContext>
+export type RadioGroupContext = Context & {
+  modelValue?: Context['value']
+}
+export type UseRadioGroupProps = Assign<HTMLArkProps<'div'>, RadioGroupContext>
 
-export const RadioGroup: ComponentWithProps<RadioGroupProps> = defineComponent({
-  name: 'RadioGroup',
-  props: {
-    dir: {
-      type: String as PropType<RadioGroupProps['dir']>,
-    },
-    disabled: {
-      type: Boolean as PropType<RadioGroupProps['disabled']>,
-    },
-    form: {
-      type: String as PropType<RadioGroupProps['form']>,
-    },
-    getRootNode: {
-      type: Function as PropType<RadioGroupProps['getRootNode']>,
-    },
-    id: {
-      type: String as PropType<RadioGroupProps['id']>,
-    },
-    ids: {
-      type: Object as PropType<RadioGroupProps['ids']>,
-    },
-    modelValue: {
-      type: String as PropType<RadioGroupProps['modelValue']>,
-    },
-    name: {
-      type: String as PropType<RadioGroupProps['name']>,
-    },
-    orientation: {
-      type: String as PropType<RadioGroupProps['orientation']>,
-    },
-    readOnly: {
-      type: Boolean as PropType<RadioGroupProps['readOnly']>,
-    },
-    value: {
-      type: String as PropType<RadioGroupProps['value']>,
-    },
+const VueProps = createVueProps<UseRadioGroupProps>({
+  dir: {
+    type: String as PropType<UseRadioGroupProps['dir']>,
+  },
+  disabled: {
+    type: Boolean as PropType<UseRadioGroupProps['disabled']>,
+  },
+  form: {
+    type: String as PropType<UseRadioGroupProps['form']>,
+  },
+  getRootNode: {
+    type: Function as PropType<UseRadioGroupProps['getRootNode']>,
+  },
+  id: {
+    type: String as PropType<UseRadioGroupProps['id']>,
+  },
+  ids: {
+    type: Object as PropType<UseRadioGroupProps['ids']>,
+  },
+  modelValue: {
+    type: String as PropType<UseRadioGroupProps['modelValue']>,
+  },
+  name: {
+    type: String as PropType<UseRadioGroupProps['name']>,
   },
+  orientation: {
+    type: String as PropType<UseRadioGroupProps['orientation']>,
+  },
+  readOnly: {
+    type: Boolean as PropType<UseRadioGroupProps['readOnly']>,
+  },
+  value: {
+    type: String as PropType<UseRadioGroupProps['value']>,
+  },
+})
+
+export const RadioGroup: ComponentWithProps<Partial<UseRadioGroupProps>> = defineComponent({
+  name: 'RadioGroup',
+  props: VueProps,
   emits: ['change', 'update:modelValue'],
   setup(props, { slots, attrs, emit }) {
     const api = useRadioGroup(emit, props)
@@ -52,8 +58,10 @@ export const RadioGroup: ComponentWithProps<RadioGroupProps> = defineComponent({
 
     return () => (
       <ark.div {...api.value.rootProps} {...attrs}>
-        {() => getValidChildren(slots)}
+        {() => slots?.default?.(api.value)}
       </ark.div>
     )
   },
 })
+
+export type RadioGroupProps = Optional<RadioGroupContext, 'id'>
diff --git a/packages/vue/src/radio-group/radio.tsx b/packages/vue/src/radio-group/radio.tsx
index a7cbf92846..a4abb7f652 100644
--- a/packages/vue/src/radio-group/radio.tsx
+++ b/packages/vue/src/radio-group/radio.tsx
@@ -1,45 +1,67 @@
+import type { Context } from '@zag-js/radio-group'
 import { defineComponent, reactive, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { getValidChildren, type ComponentWithProps } from '../utils'
-import { RadioProvider, useRadioGroupContext, type RadioContext } from './radio-context'
+import type { Assign } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
+import { RadioProvider, useRadioGroupContext } from './radio-context'
 
-export type RadioProps = Omit<HTMLArkProps<'label'>, keyof RadioContext> & RadioContext
+export type RadioContext = {
+  value: string
+  /**
+   * If `true`, the radio will be disabled
+   */
+  disabled?: boolean
+  /**
+   * If `true`, the radio will be readonly
+   */
+  readOnly?: boolean
+  /**
+   * If `true`, the radio is marked as invalid.
+   */
+  invalid?: boolean
 
-export const Radio: ComponentWithProps<RadioProps> = defineComponent({
-  name: 'Radio',
-  props: {
-    value: {
-      type: String as PropType<RadioProps['value']>,
-      required: true,
-    },
-    disabled: {
-      type: Boolean as PropType<RadioProps['disabled']>,
-    },
-    invalid: {
-      type: Boolean as PropType<RadioProps['invalid']>,
-    },
-    readOnly: {
-      type: Boolean as PropType<RadioProps['readOnly']>,
-    },
+  modelValue?: Context['value']
+}
+
+export type RadioProps = Assign<HTMLArkProps<'label'>, RadioContext>
+
+const VueProps = createVueProps<RadioProps>({
+  id: {
+    type: String as PropType<RadioProps['id']>,
+  },
+  value: {
+    type: String as PropType<RadioProps['value']>,
+    required: true,
+  },
+  disabled: {
+    type: Boolean as PropType<RadioProps['disabled']>,
+  },
+  invalid: {
+    type: Boolean as PropType<RadioProps['invalid']>,
   },
+  readOnly: {
+    type: Boolean as PropType<RadioProps['readOnly']>,
+  },
+})
+
+export const Radio: ComponentWithProps<Partial<RadioProps>> = defineComponent({
+  name: 'Radio',
+  props: VueProps,
   setup(props, { slots, attrs }) {
     const groupApi = useRadioGroupContext()
+    const context = reactive(props) as RadioProps
 
-    const providerProps = reactive<RadioProps>({
-      value: props.value,
-      disabled: props.disabled,
-      invalid: props.invalid,
-      readOnly: props.readOnly,
-    })
-
-    RadioProvider(providerProps)
+    RadioProvider(context)
 
     return () => (
       <ark.label
-        {...groupApi.value.getRadioProps({ value: props.value, disabled: props.disabled })}
+        {...groupApi.value.getRadioProps({
+          value: context.value || '',
+          disabled: context.disabled,
+        })}
         {...attrs}
       >
-        {() => getValidChildren(slots)}
+        {() => slots?.default?.(context)}
       </ark.label>
     )
   },
diff --git a/packages/vue/src/radio-group/use-radio-group.ts b/packages/vue/src/radio-group/use-radio-group.ts
index e028abcc4d..0b1edd56c5 100644
--- a/packages/vue/src/radio-group/use-radio-group.ts
+++ b/packages/vue/src/radio-group/use-radio-group.ts
@@ -1,20 +1,19 @@
-import { connect, machine, type Context } from '@zag-js/radio-group'
+import { connect, machine } from '@zag-js/radio-group'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, type UnwrapRef } from 'vue'
-import { type Optional } from '../types'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { RadioGroupContext } from './radio-group'
 
-export type UseRadioGroupContext = Optional<Context, 'id'> & {
-  modelValue?: Context['value']
-}
-
-export const useRadioGroup = (emit: CallableFunction, context: UseRadioGroupContext) => {
+export const useRadioGroup = <T extends ExtractPropTypes<RadioGroupContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       value: reactiveContext.modelValue ?? reactiveContext.value,
       onChange(details) {
         emit('change', details)
@@ -25,5 +24,3 @@ export const useRadioGroup = (emit: CallableFunction, context: UseRadioGroupCont
 
   return computed(() => connect(state.value, send, normalizeProps))
 }
-
-export type UseRadioGroupReturn = UnwrapRef<ReturnType<typeof useRadioGroup>>
diff --git a/packages/vue/src/range-slider/docs/range-slider.types.json b/packages/vue/src/range-slider/docs/range-slider.types.json
index c94ba1215b..941237174b 100644
--- a/packages/vue/src/range-slider/docs/range-slider.types.json
+++ b/packages/vue/src/range-slider/docs/range-slider.types.json
@@ -31,7 +31,7 @@
       "description": "Function that returns a human readable value for the slider thumb"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
diff --git a/packages/vue/src/range-slider/range-slider.tsx b/packages/vue/src/range-slider/range-slider.tsx
index c4992164d1..383fb9d18e 100644
--- a/packages/vue/src/range-slider/range-slider.tsx
+++ b/packages/vue/src/range-slider/range-slider.tsx
@@ -1,76 +1,83 @@
+import type { Context } from '@zag-js/range-slider'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { getValidChildren, type ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { RangeSliderProvider } from './range-slider-context'
-import { useRangeSlider, type UseRangeSliderContext } from './use-range-slider'
+import { useRangeSlider } from './use-range-slider'
 
-export type RangeSliderProps = Assign<HTMLArkProps<'div'>, UseRangeSliderContext>
+export type RangeSliderContext = Context & {
+  modelValue?: Context['value']
+}
 
-export const RangeSlider: ComponentWithProps<RangeSliderProps> = defineComponent({
-  name: 'RangeSlider',
-  props: {
-    'aria-label': {
-      type: Object as PropType<RangeSliderProps['aria-label']>,
-    },
-    'aria-labelledby': {
-      type: Object as PropType<RangeSliderProps['aria-labelledby']>,
-    },
-    dir: {
-      type: String as PropType<RangeSliderProps['dir']>,
-    },
-    disabled: {
-      type: Boolean as PropType<RangeSliderProps['disabled']>,
-    },
-    form: {
-      type: String as PropType<RangeSliderProps['form']>,
-    },
-    getAriaValueText: {
-      type: Function as PropType<RangeSliderProps['getAriaValueText']>,
-    },
-    getRootNode: {
-      type: Function as PropType<RangeSliderProps['getRootNode']>,
-    },
-    id: {
-      type: String as PropType<RangeSliderProps['id']>,
-    },
-    ids: {
-      type: Object as PropType<RangeSliderProps['ids']>,
-    },
-    invalid: {
-      type: Boolean as PropType<RangeSliderProps['invalid']>,
-    },
-    max: {
-      type: Number as PropType<RangeSliderProps['max']>,
-    },
-    min: {
-      type: Number as PropType<RangeSliderProps['min']>,
-    },
-    minStepsBetweenThumbs: {
-      type: Number as PropType<RangeSliderProps['minStepsBetweenThumbs']>,
-    },
-    modelValue: {
-      type: Object as PropType<RangeSliderProps['modelValue']>,
-    },
-    name: {
-      type: String as PropType<RangeSliderProps['name']>,
-    },
-    orientation: {
-      type: String as PropType<RangeSliderProps['orientation']>,
-    },
-    readOnly: {
-      type: Boolean as PropType<RangeSliderProps['readOnly']>,
-    },
-    step: {
-      type: Number as PropType<RangeSliderProps['step']>,
-    },
-    thumbAlignment: {
-      type: String as PropType<RangeSliderProps['thumbAlignment']>,
-    },
-    value: {
-      type: Object as PropType<RangeSliderProps['value']>,
-    },
+export type UseRangeSliderProps = Assign<HTMLArkProps<'div'>, RangeSliderContext>
+
+const VueProps = createVueProps<UseRangeSliderProps>({
+  'aria-label': {
+    type: Object as PropType<UseRangeSliderProps['aria-label']>,
+  },
+  'aria-labelledby': {
+    type: Object as PropType<UseRangeSliderProps['aria-labelledby']>,
+  },
+  dir: {
+    type: String as PropType<UseRangeSliderProps['dir']>,
+  },
+  disabled: {
+    type: Boolean as PropType<UseRangeSliderProps['disabled']>,
+  },
+  form: {
+    type: String as PropType<UseRangeSliderProps['form']>,
+  },
+  getAriaValueText: {
+    type: Function as PropType<UseRangeSliderProps['getAriaValueText']>,
+  },
+  getRootNode: {
+    type: Function as PropType<UseRangeSliderProps['getRootNode']>,
+  },
+  id: {
+    type: String as PropType<UseRangeSliderProps['id']>,
+  },
+  ids: {
+    type: Object as PropType<UseRangeSliderProps['ids']>,
+  },
+  invalid: {
+    type: Boolean as PropType<UseRangeSliderProps['invalid']>,
+  },
+  max: {
+    type: Number as PropType<UseRangeSliderProps['max']>,
+  },
+  min: {
+    type: Number as PropType<UseRangeSliderProps['min']>,
   },
+  minStepsBetweenThumbs: {
+    type: Number as PropType<UseRangeSliderProps['minStepsBetweenThumbs']>,
+  },
+  modelValue: {
+    type: Object as PropType<UseRangeSliderProps['modelValue']>,
+  },
+  name: {
+    type: String as PropType<UseRangeSliderProps['name']>,
+  },
+  orientation: {
+    type: String as PropType<UseRangeSliderProps['orientation']>,
+  },
+  readOnly: {
+    type: Boolean as PropType<UseRangeSliderProps['readOnly']>,
+  },
+  step: {
+    type: Number as PropType<UseRangeSliderProps['step']>,
+  },
+  thumbAlignment: {
+    type: String as PropType<UseRangeSliderProps['thumbAlignment']>,
+  },
+  value: {
+    type: Object as PropType<UseRangeSliderProps['value']>,
+  },
+})
+
+export const RangeSlider: ComponentWithProps<Partial<UseRangeSliderProps>> = defineComponent({
+  name: 'RangeSlider',
+  props: VueProps,
   emits: ['change', 'update:modelValue', 'change-start', 'change-end'],
   setup(props, { slots, attrs, emit, expose }) {
     const api = useRangeSlider(emit, props)
@@ -83,8 +90,10 @@ export const RangeSlider: ComponentWithProps<RangeSliderProps> = defineComponent
 
     return () => (
       <ark.div {...api.value.rootProps} {...attrs}>
-        {() => getValidChildren(slots)}
+        {() => slots?.default?.(api.value)}
       </ark.div>
     )
   },
 })
+
+export type RangeSliderProps = Optional<RangeSliderContext, 'id'>
diff --git a/packages/vue/src/range-slider/use-range-slider.ts b/packages/vue/src/range-slider/use-range-slider.ts
index 7f636727ba..18be4474df 100644
--- a/packages/vue/src/range-slider/use-range-slider.ts
+++ b/packages/vue/src/range-slider/use-range-slider.ts
@@ -1,20 +1,19 @@
-import { connect, machine, type Context } from '@zag-js/range-slider'
+import { connect, machine } from '@zag-js/range-slider'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, type UnwrapRef } from 'vue'
-import { type Optional } from '../types'
+import { computed, reactive, type ExtractPropTypes, type UnwrapRef } from 'vue'
 import { useId } from '../utils'
+import type { RangeSliderContext } from './range-slider'
 
-export type UseRangeSliderContext = Optional<Context, 'id'> & {
-  modelValue?: Context['value']
-}
-
-export const useRangeSlider = (emit: CallableFunction, context: UseRangeSliderContext) => {
+export const useRangeSlider = <T extends ExtractPropTypes<RangeSliderContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       value: reactiveContext.modelValue ?? reactiveContext.value,
       onChangeStart(details) {
         emit('change-start', details)
diff --git a/packages/vue/src/rating-group/docs/rating-group.types.json b/packages/vue/src/rating-group/docs/rating-group.types.json
index 782dcda7ba..fa6dc44269 100644
--- a/packages/vue/src/rating-group/docs/rating-group.types.json
+++ b/packages/vue/src/rating-group/docs/rating-group.types.json
@@ -27,10 +27,15 @@
       "description": "The associate form of the underlying input element."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  label: string\n  hiddenInput: string\n  control: string\n  rating(id: string): string\n}>",
       "isRequired": false,
diff --git a/packages/vue/src/rating-group/rating-group.tsx b/packages/vue/src/rating-group/rating-group.tsx
index 033588df6a..4181bb8717 100644
--- a/packages/vue/src/rating-group/rating-group.tsx
+++ b/packages/vue/src/rating-group/rating-group.tsx
@@ -1,56 +1,63 @@
+import type { Context } from '@zag-js/rating-group'
 import { defineComponent, Fragment, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type ComponentWithProps } from '../utils'
+import type { Assign, Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { RatingGroupProvider } from './rating-group-context'
-import { useRatingGroup, type UseRatingGroupContext } from './use-rating-group'
+import { useRatingGroup } from './use-rating-group'
 
-export type Assign<Target, Source> = Omit<Target, keyof Source> & Source
+export type RatingGroupContext = Context & {
+  modelValue?: RatingGroupContext['value']
+}
 
-export type RatingGroupProps = Assign<HTMLArkProps<'input'>, UseRatingGroupContext>
+export type UseRatingGroupProps = Assign<HTMLArkProps<'input'>, RatingGroupContext>
 
-const vueRatingGroupProps = {
+const vueRatingGroupProps = createVueProps<UseRatingGroupProps>({
+  id: {
+    type: String as PropType<UseRatingGroupProps['id']>,
+  },
   allowHalf: {
-    type: Boolean as PropType<RatingGroupProps['allowHalf']>,
+    type: Boolean as PropType<UseRatingGroupProps['allowHalf']>,
   },
   autoFocus: {
-    type: Boolean as PropType<RatingGroupProps['autoFocus']>,
+    type: Boolean as PropType<UseRatingGroupProps['autoFocus']>,
   },
   dir: {
-    type: String as PropType<RatingGroupProps['dir']>,
+    type: String as PropType<UseRatingGroupProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<RatingGroupProps['disabled']>,
+    type: Boolean as PropType<UseRatingGroupProps['disabled']>,
   },
   form: {
-    type: String as PropType<RatingGroupProps['form']>,
+    type: String as PropType<UseRatingGroupProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<RatingGroupProps['getRootNode']>,
+    type: Function as PropType<UseRatingGroupProps['getRootNode']>,
   },
   ids: {
-    type: Object as PropType<RatingGroupProps['ids']>,
+    type: Object as PropType<UseRatingGroupProps['ids']>,
   },
   max: {
-    type: Number as PropType<RatingGroupProps['max']>,
+    type: Number as PropType<UseRatingGroupProps['max']>,
   },
   modelValue: {
-    type: Number as PropType<RatingGroupProps['modelValue']>,
+    type: Number as PropType<UseRatingGroupProps['modelValue']>,
   },
   name: {
-    type: String as PropType<RatingGroupProps['name']>,
+    type: String as PropType<UseRatingGroupProps['name']>,
   },
   readOnly: {
-    type: Boolean as PropType<RatingGroupProps['readOnly']>,
+    type: Boolean as PropType<UseRatingGroupProps['readOnly']>,
   },
   translations: {
-    type: Object as PropType<RatingGroupProps['translations']>,
+    type: Object as PropType<UseRatingGroupProps['translations']>,
   },
   value: {
-    type: Number as PropType<RatingGroupProps['value']>,
+    type: Number as PropType<UseRatingGroupProps['value']>,
   },
-}
+})
 
-export const RatingGroup: ComponentWithProps<RatingGroupProps> = defineComponent({
+export const RatingGroup: ComponentWithProps<Partial<UseRatingGroupProps>> = defineComponent({
   name: 'RatingGroup',
   props: vueRatingGroupProps,
   emits: ['change', 'update:modelValue', 'hover'],
@@ -63,9 +70,11 @@ export const RatingGroup: ComponentWithProps<RatingGroupProps> = defineComponent
       <ark.div {...api.value.rootProps} {...attrs}>
         <Fragment>
           <ark.input {...api.value.hiddenInputProps} />
-          {slots.default?.()}
+          {slots.default?.(api.value)}
         </Fragment>
       </ark.div>
     )
   },
 })
+
+export type RatingGroupProps = Optional<RatingGroupContext, 'id'>
diff --git a/packages/vue/src/rating-group/use-rating-group.ts b/packages/vue/src/rating-group/use-rating-group.ts
index 3d84ddfb7a..0a831f1aa6 100644
--- a/packages/vue/src/rating-group/use-rating-group.ts
+++ b/packages/vue/src/rating-group/use-rating-group.ts
@@ -1,19 +1,19 @@
-import { connect, machine, type Context as RatingGroupContext } from '@zag-js/rating-group'
+import { connect, machine } from '@zag-js/rating-group'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { RatingGroupContext } from './rating-group'
 
-export type UseRatingGroupContext = Omit<RatingGroupContext, 'id'> & {
-  modelValue?: RatingGroupContext['value']
-}
-
-export const useRatingGroup = (emit: CallableFunction, context: UseRatingGroupContext) => {
+export const useRatingGroup = <T extends ExtractPropTypes<RatingGroupContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       value: reactiveContext.modelValue ?? reactiveContext.value,
       onChange(details) {
         emit('change', details.value)
diff --git a/packages/vue/src/select/docs/select.types.json b/packages/vue/src/select/docs/select.types.json
index 284cad5327..73a8f10dd1 100644
--- a/packages/vue/src/select/docs/select.types.json
+++ b/packages/vue/src/select/docs/select.types.json
@@ -21,7 +21,7 @@
       "description": "The associate form of the underlying select."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
@@ -30,6 +30,11 @@
       "isRequired": false,
       "description": "The highlighted option"
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  content: string\n  trigger: string\n  label: string\n  option(id: string | number): string\n  hiddenSelect: string\n  positioner: string\n  optionGroup(id: string | number): string\n  optionGroupLabel(id: string | number): string\n}>",
       "isRequired": false,
diff --git a/packages/vue/src/select/select.tsx b/packages/vue/src/select/select.tsx
index be87f9a972..e415402059 100644
--- a/packages/vue/src/select/select.tsx
+++ b/packages/vue/src/select/select.tsx
@@ -1,71 +1,82 @@
+import type { Context } from '@zag-js/select'
 import { defineComponent, type PropType } from 'vue'
-import { type ComponentWithProps } from '../utils'
+import type { Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { SelectProvider } from './select-context'
-import { useSelect, type UseSelectContext } from './use-select'
+import { useSelect } from './use-select'
 
-export type SelectProps = UseSelectContext
+export type SelectContext = Context & {
+  modelValue?: Context['selectedOption']
+}
+
+export type UseSelectProps = SelectContext
 
-const VueSelectProps = {
+const VueSelectProps = createVueProps<UseSelectProps>({
+  id: {
+    type: String as PropType<UseSelectProps['id']>,
+  },
   modelValue: {
-    type: [Object, null] as PropType<SelectProps['modelValue']>,
+    type: [Object, null] as PropType<UseSelectProps['modelValue']>,
   },
   loop: {
-    type: Boolean as PropType<SelectProps['loop']>,
+    type: Boolean as PropType<UseSelectProps['loop']>,
     default: false,
   },
-  closedOnSelect: {
-    type: Boolean as PropType<SelectProps['closeOnSelect']>,
+  closeOnSelect: {
+    type: Boolean as PropType<UseSelectProps['closeOnSelect']>,
     default: true,
   },
   disabled: {
-    type: Boolean as PropType<SelectProps['disabled']>,
+    type: Boolean as PropType<UseSelectProps['disabled']>,
     default: false,
   },
   readOnly: {
-    type: Boolean as PropType<SelectProps['readOnly']>,
+    type: Boolean as PropType<UseSelectProps['readOnly']>,
     default: false,
   },
   name: {
-    type: String as PropType<SelectProps['name']>,
+    type: String as PropType<UseSelectProps['name']>,
   },
   invalid: {
-    type: Boolean as PropType<SelectProps['invalid']>,
+    type: Boolean as PropType<UseSelectProps['invalid']>,
   },
   form: {
-    type: String as PropType<SelectProps['form']>,
+    type: String as PropType<UseSelectProps['form']>,
   },
   positioning: {
-    type: Object as PropType<SelectProps['positioning']>,
+    type: Object as PropType<UseSelectProps['positioning']>,
   },
   highlightedOption: {
-    type: Object as PropType<SelectProps['highlightedOption']>,
+    type: Object as PropType<UseSelectProps['highlightedOption']>,
   },
   selectOnTab: {
-    type: Boolean as PropType<SelectProps['selectOnTab']>,
+    type: Boolean as PropType<UseSelectProps['selectOnTab']>,
   },
   selectedOption: {
-    type: Object as PropType<SelectProps['selectedOption']>,
+    type: Object as PropType<UseSelectProps['selectedOption']>,
   },
   dir: {
-    type: String as PropType<SelectProps['dir']>,
+    type: String as PropType<UseSelectProps['dir']>,
   },
   ids: {
-    type: Object as PropType<SelectProps['ids']>,
+    type: Object as PropType<UseSelectProps['ids']>,
   },
   getRootNode: {
-    type: Function as PropType<SelectProps['getRootNode']>,
+    type: Function as PropType<UseSelectProps['getRootNode']>,
   },
-}
+})
 
-export const Select: ComponentWithProps<SelectProps> = defineComponent({
+export const Select: ComponentWithProps<Partial<UseSelectProps>> = defineComponent({
   name: 'Select',
   emits: ['change', 'highlight', 'open', 'close', 'update:modelValue'],
   props: VueSelectProps,
   setup(props, { slots, emit }) {
-    const api = useSelect(emit, props)
+    const api = useSelect(emit, props as UseSelectProps)
 
     SelectProvider(api)
 
-    return () => slots?.default?.({ ...api.value })
+    return () => slots?.default?.(api.value)
   },
 })
+
+export type SelectProps = Optional<SelectContext, 'id'>
diff --git a/packages/vue/src/select/use-select.ts b/packages/vue/src/select/use-select.ts
index 2bed8cfdfb..54b5875ca5 100644
--- a/packages/vue/src/select/use-select.ts
+++ b/packages/vue/src/select/use-select.ts
@@ -1,19 +1,19 @@
-import { connect, machine, type Context as SelectContext } from '@zag-js/select'
+import { connect, machine } from '@zag-js/select'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { SelectContext } from './select'
 
-export interface UseSelectContext extends Omit<SelectContext, 'id'> {
-  modelValue?: SelectContext['selectedOption']
-}
-
-export const useSelect = (emit: CallableFunction, context: UseSelectContext) => {
+export const useSelect = <T extends ExtractPropTypes<SelectContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       selectedOption: reactiveContext.modelValue ?? reactiveContext.selectedOption,
       onChange: (details) => {
         emit('change', { ...details })
diff --git a/packages/vue/src/slider/docs/slider.types.json b/packages/vue/src/slider/docs/slider.types.json
index 26575dda4c..e1f420595d 100644
--- a/packages/vue/src/slider/docs/slider.types.json
+++ b/packages/vue/src/slider/docs/slider.types.json
@@ -36,7 +36,7 @@
       "description": "Function that returns a human readable value for the slider"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
diff --git a/packages/vue/src/slider/slider.tsx b/packages/vue/src/slider/slider.tsx
index aa17214adf..6f6692140b 100644
--- a/packages/vue/src/slider/slider.tsx
+++ b/packages/vue/src/slider/slider.tsx
@@ -1,79 +1,86 @@
+import type { Context } from '@zag-js/slider'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { getValidChildren, type ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, getValidChildren, type ComponentWithProps } from '../utils'
 import { SliderProvider } from './slider-context'
-import { useSlider, type UseSliderContext } from './use-slider'
+import { useSlider } from './use-slider'
 
-export type SliderProps = Assign<HTMLArkProps<'div'>, UseSliderContext>
+export type SliderContext = Context & {
+  modelValue?: Context['value']
+}
 
-export const Slider: ComponentWithProps<SliderProps> = defineComponent({
-  name: 'Slider',
-  props: {
-    'aria-label': {
-      type: String as PropType<SliderProps['aria-label']>,
-    },
-    'aria-labelledby': {
-      type: String as PropType<SliderProps['aria-labelledby']>,
-    },
-    dir: {
-      type: String as PropType<SliderProps['dir']>,
-    },
-    disabled: {
-      type: Boolean as PropType<SliderProps['disabled']>,
-    },
-    focusThumbOnChange: {
-      type: Boolean as PropType<SliderProps['focusThumbOnChange']>,
-    },
-    form: {
-      type: String as PropType<SliderProps['form']>,
-    },
-    getAriaValueText: {
-      type: Function as PropType<SliderProps['getAriaValueText']>,
-    },
-    getRootNode: {
-      type: Function as PropType<SliderProps['getRootNode']>,
-    },
-    id: {
-      type: String as PropType<SliderProps['id']>,
-    },
-    ids: {
-      type: Object as PropType<SliderProps['ids']>,
-    },
-    invalid: {
-      type: Boolean as PropType<SliderProps['invalid']>,
-    },
-    max: {
-      type: Number as PropType<SliderProps['max']>,
-    },
-    min: {
-      type: Number as PropType<SliderProps['min']>,
-    },
-    modelValue: {
-      type: Number as PropType<SliderProps['modelValue']>,
-    },
-    name: {
-      type: String as PropType<SliderProps['name']>,
-    },
-    orientation: {
-      type: String as PropType<SliderProps['orientation']>,
-    },
-    origin: {
-      type: String as PropType<SliderProps['origin']>,
-    },
-    readOnly: {
-      type: Boolean as PropType<SliderProps['readOnly']>,
-    },
-    step: {
-      type: Number as PropType<SliderProps['step']>,
-    },
-    thumbAlignment: {
-      type: String as PropType<SliderProps['thumbAlignment']>,
-    },
-    value: {
-      type: Number as PropType<SliderProps['value']>,
-    },
+export type UseSliderProps = Assign<HTMLArkProps<'div'>, SliderContext>
+
+const VueProps = createVueProps<UseSliderProps>({
+  'aria-label': {
+    type: String as PropType<UseSliderProps['aria-label']>,
+  },
+  'aria-labelledby': {
+    type: String as PropType<UseSliderProps['aria-labelledby']>,
+  },
+  dir: {
+    type: String as PropType<UseSliderProps['dir']>,
+  },
+  disabled: {
+    type: Boolean as PropType<UseSliderProps['disabled']>,
+  },
+  focusThumbOnChange: {
+    type: Boolean as PropType<UseSliderProps['focusThumbOnChange']>,
+  },
+  form: {
+    type: String as PropType<UseSliderProps['form']>,
+  },
+  getAriaValueText: {
+    type: Function as PropType<UseSliderProps['getAriaValueText']>,
+  },
+  getRootNode: {
+    type: Function as PropType<UseSliderProps['getRootNode']>,
+  },
+  id: {
+    type: String as PropType<UseSliderProps['id']>,
+  },
+  ids: {
+    type: Object as PropType<UseSliderProps['ids']>,
+  },
+  invalid: {
+    type: Boolean as PropType<UseSliderProps['invalid']>,
+  },
+  max: {
+    type: Number as PropType<UseSliderProps['max']>,
   },
+  min: {
+    type: Number as PropType<UseSliderProps['min']>,
+  },
+  modelValue: {
+    type: Number as PropType<UseSliderProps['modelValue']>,
+  },
+  name: {
+    type: String as PropType<UseSliderProps['name']>,
+  },
+  orientation: {
+    type: String as PropType<UseSliderProps['orientation']>,
+  },
+  origin: {
+    type: String as PropType<UseSliderProps['origin']>,
+  },
+  readOnly: {
+    type: Boolean as PropType<UseSliderProps['readOnly']>,
+  },
+  step: {
+    type: Number as PropType<UseSliderProps['step']>,
+  },
+  thumbAlignment: {
+    type: String as PropType<UseSliderProps['thumbAlignment']>,
+  },
+  value: {
+    type: Number as PropType<UseSliderProps['value']>,
+  },
+})
+
+export const Slider: ComponentWithProps<Partial<UseSliderProps>> = defineComponent({
+  name: 'Slider',
+  props: VueProps,
   setup(props, { slots, attrs, emit, expose }) {
     const api = useSlider(emit, props)
 
@@ -90,3 +97,5 @@ export const Slider: ComponentWithProps<SliderProps> = defineComponent({
     )
   },
 })
+
+export type SliderProps = Optional<SliderContext, 'id'>
diff --git a/packages/vue/src/slider/use-slider.ts b/packages/vue/src/slider/use-slider.ts
index 176595b671..fb9af79c90 100644
--- a/packages/vue/src/slider/use-slider.ts
+++ b/packages/vue/src/slider/use-slider.ts
@@ -1,20 +1,19 @@
-import { connect, machine, type Context as SliderContext } from '@zag-js/slider'
+import { connect, machine } from '@zag-js/slider'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, type UnwrapRef } from 'vue'
-import { type Optional } from '../types'
+import { computed, reactive, type ExtractPropTypes, type UnwrapRef } from 'vue'
 import { useId } from '../utils'
+import type { SliderContext } from './slider'
 
-export type UseSliderContext = Optional<SliderContext, 'id'> & {
-  modelValue?: SliderContext['value']
-}
-
-export const useSlider = (emit: CallableFunction, context: UseSliderContext) => {
+export const useSlider = <T extends ExtractPropTypes<SliderContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       value: reactiveContext.modelValue ?? reactiveContext.value,
       onChange(details) {
         emit('change', details)
diff --git a/packages/vue/src/splitter/docs/splitter.types.json b/packages/vue/src/splitter/docs/splitter.types.json
index 97bd70caf7..9554919f2d 100644
--- a/packages/vue/src/splitter/docs/splitter.types.json
+++ b/packages/vue/src/splitter/docs/splitter.types.json
@@ -6,7 +6,7 @@
       "description": "The document's text/writing direction."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
diff --git a/packages/vue/src/splitter/splitter.tsx b/packages/vue/src/splitter/splitter.tsx
index 66165c0cc3..1753481f76 100644
--- a/packages/vue/src/splitter/splitter.tsx
+++ b/packages/vue/src/splitter/splitter.tsx
@@ -1,31 +1,33 @@
+import type { Context as SplitterContext } from '@zag-js/splitter'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { getValidChildren, type ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, getValidChildren, type ComponentWithProps } from '../utils'
 import { SplitterProvider } from './splitter-context'
-import { useSplitter, type UseSplitterContext } from './use-splitter'
+import { useSplitter } from './use-splitter'
 
-export type SplitterProps = Assign<HTMLArkProps<'div'>, UseSplitterContext>
+export type UseSplitterProps = Assign<HTMLArkProps<'div'>, SplitterContext>
+const VueProps = createVueProps<UseSplitterProps>({
+  dir: {
+    type: String as PropType<UseSplitterProps['dir']>,
+  },
+  getRootNode: {
+    type: Function as PropType<UseSplitterProps['getRootNode']>,
+  },
+  id: {
+    type: String as PropType<UseSplitterProps['id']>,
+  },
+  orientation: {
+    type: String as PropType<UseSplitterProps['orientation']>,
+  },
+  size: {
+    type: Object as PropType<UseSplitterProps['size']>,
+  },
+})
 
-export const Splitter: ComponentWithProps<SplitterProps> = defineComponent({
+export const Splitter: ComponentWithProps<Partial<UseSplitterProps>> = defineComponent({
   name: 'Splitter',
-  props: {
-    dir: {
-      type: String as PropType<SplitterProps['dir']>,
-    },
-    getRootNode: {
-      type: Function as PropType<SplitterProps['getRootNode']>,
-    },
-    id: {
-      type: String as PropType<SplitterProps['id']>,
-    },
-    orientation: {
-      type: String as PropType<SplitterProps['orientation']>,
-    },
-    size: {
-      type: Object as PropType<SplitterProps['size']>,
-    },
-  },
+  props: VueProps,
   emits: ['resize', 'resize-end', 'resize-start'],
   setup(props, { slots, attrs, emit }) {
     const api = useSplitter(emit, props)
@@ -39,3 +41,5 @@ export const Splitter: ComponentWithProps<SplitterProps> = defineComponent({
     )
   },
 })
+
+export type SplitterProps = Optional<SplitterContext, 'id'>
diff --git a/packages/vue/src/splitter/use-splitter.ts b/packages/vue/src/splitter/use-splitter.ts
index 750a322c85..6ea7e41a2e 100644
--- a/packages/vue/src/splitter/use-splitter.ts
+++ b/packages/vue/src/splitter/use-splitter.ts
@@ -1,18 +1,18 @@
 import { connect, machine, type Context as SplitterContext } from '@zag-js/splitter'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, type UnwrapRef } from 'vue'
-import { type Optional } from '../types'
+import { computed, reactive, type ExtractPropTypes, type UnwrapRef } from 'vue'
 import { useId } from '../utils'
 
-export type UseSplitterContext = Optional<SplitterContext, 'id'>
-
-export const useSplitter = (emit: CallableFunction, context: UseSplitterContext) => {
+export const useSplitter = <T extends ExtractPropTypes<SplitterContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       onResize(details) {
         emit('resize', details)
       },
diff --git a/packages/vue/src/tabs/docs/tabs.types.json b/packages/vue/src/tabs/docs/tabs.types.json
index aa56e88b00..52a10e00ff 100644
--- a/packages/vue/src/tabs/docs/tabs.types.json
+++ b/packages/vue/src/tabs/docs/tabs.types.json
@@ -17,10 +17,15 @@
       "description": "The document's text/writing direction."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  trigger: string\n  tablist: string\n  contentGroup: string\n  content: string\n  indicator: string\n}>",
       "isRequired": false,
@@ -55,6 +60,7 @@
       "type": "IntlTranslations",
       "isRequired": false,
       "description": "Specifies the localized strings that identifies the accessibility elements and their states"
-    }
+    },
+    "value": { "type": "string", "isRequired": false, "description": "The selected tab id" }
   }
 }
diff --git a/packages/vue/src/tabs/tabs.tsx b/packages/vue/src/tabs/tabs.tsx
index 20504d9456..92915ca362 100644
--- a/packages/vue/src/tabs/tabs.tsx
+++ b/packages/vue/src/tabs/tabs.tsx
@@ -1,47 +1,52 @@
+import type { Context } from '@zag-js/tabs'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
-import { type ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { TabsProvider } from './tabs-context'
-import { useTabs, type UseTabsContext, type UseTabsDefaultValue } from './use-tabs'
+import { useTabs } from './use-tabs'
 
-export interface TabsProps extends Assign<HTMLArkProps<'div'>, UseTabsContext> {
-  defaultValue?: UseTabsDefaultValue
+export type TabsContext = Context & {
+  defaultValue?: Context['value']
 }
+export type UseTabsProps = Assign<HTMLArkProps<'div'>, TabsContext>
 
-const VueTabsProps = {
+const VueTabsProps = createVueProps<UseTabsProps>({
+  id: {
+    type: String as PropType<UseTabsProps['id']>,
+  },
   defaultValue: {
-    type: String as PropType<TabsProps['defaultValue']>,
+    type: String as PropType<UseTabsProps['defaultValue']>,
   },
   orientation: {
-    type: String as PropType<TabsProps['orientation']>,
+    type: String as PropType<UseTabsProps['orientation']>,
   },
   activationMode: {
-    type: String as PropType<TabsProps['activationMode']>,
+    type: String as PropType<UseTabsProps['activationMode']>,
   },
   dir: {
-    type: String as PropType<TabsProps['dir']>,
+    type: String as PropType<UseTabsProps['dir']>,
   },
   loop: {
-    type: Boolean as PropType<TabsProps['loop']>,
+    type: Boolean as PropType<UseTabsProps['loop']>,
   },
   translation: {
-    type: Object as PropType<TabsProps['translations']>,
+    type: Object as PropType<UseTabsProps['translations']>,
   },
   ids: {
-    type: Object as PropType<TabsProps['ids']>,
+    type: Object as PropType<UseTabsProps['ids']>,
   },
   getRootNode: {
-    type: Function as PropType<TabsProps['getRootNode']>,
+    type: Function as PropType<UseTabsProps['getRootNode']>,
   },
-}
+})
 
-export const Tabs: ComponentWithProps<TabsProps> = defineComponent({
+export const Tabs: ComponentWithProps<Partial<UseTabsProps>> = defineComponent({
   name: 'Tabs',
   emits: ['change', 'focus', 'delete'],
   props: VueTabsProps,
   setup(props, { slots, attrs, emit }) {
-    const api = useTabs(emit, props, props.defaultValue)
+    const api = useTabs(emit, props)
 
     TabsProvider(api)
 
@@ -55,3 +60,5 @@ export const Tabs: ComponentWithProps<TabsProps> = defineComponent({
     )
   },
 })
+
+export type TabsProps = Optional<TabsContext, 'id'>
diff --git a/packages/vue/src/tabs/use-tabs.ts b/packages/vue/src/tabs/use-tabs.ts
index 72f3058411..7b8cf11e55 100644
--- a/packages/vue/src/tabs/use-tabs.ts
+++ b/packages/vue/src/tabs/use-tabs.ts
@@ -1,24 +1,20 @@
-import { connect, machine, type Context as TabsContext } from '@zag-js/tabs'
+import { connect, machine } from '@zag-js/tabs'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { TabsContext } from './tabs'
 
-export type UseTabsContext = Omit<TabsContext, 'id' | 'value'>
-
-export type UseTabsDefaultValue = TabsContext['value']
-
-export const useTabs = (
+export const useTabs = <T extends ExtractPropTypes<TabsContext>>(
   emit: CallableFunction,
-  context: UseTabsContext,
-  defaultValue?: UseTabsDefaultValue,
+  context: T,
 ) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
-      value: defaultValue,
+      id: reactiveContext.id || useId().value,
+      value: reactiveContext.defaultValue,
       onChange(details) {
         emit('change', details)
       },
diff --git a/packages/vue/src/tags-input/docs/tags-input.types.json b/packages/vue/src/tags-input/docs/tags-input.types.json
index fe0b98c4fc..4f46572124 100644
--- a/packages/vue/src/tags-input/docs/tags-input.types.json
+++ b/packages/vue/src/tags-input/docs/tags-input.types.json
@@ -56,7 +56,7 @@
       "description": "The associate form of the underlying input element."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
@@ -208,10 +208,6 @@
       "description": "The value of the tags as a string."
     }
   },
-  "UseTagsInputProps": {
-    "context": { "type": "UseTagsInputPropsContext", "isRequired": true },
-    "emit": { "type": "CallableFunction", "isRequired": true }
-  },
   "UseTagsInputReturn": {
     "addValue": {
       "type": "(value: string) => void",
diff --git a/packages/vue/src/tags-input/index.ts b/packages/vue/src/tags-input/index.ts
index d2d5ceeda9..b11da4fc41 100644
--- a/packages/vue/src/tags-input/index.ts
+++ b/packages/vue/src/tags-input/index.ts
@@ -8,4 +8,4 @@ export { TagsInputControl, type TagsInputControlProps } from './tags-input-contr
 export { TagsInputField, type TagsInputFieldProps } from './tags-input-field'
 export { TagsInputLabel, type TagsInputLabelProps } from './tags-input-label'
 export { tagsInputAnatomy } from './tags-input.anatomy'
-export { useTagsInput, type UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input'
+export { useTagsInput, type UseTagsInputReturn } from './use-tags-input'
diff --git a/packages/vue/src/tags-input/tags-input.stories.vue b/packages/vue/src/tags-input/tags-input.stories.vue
index d1be7cb274..1f3f4c13a8 100644
--- a/packages/vue/src/tags-input/tags-input.stories.vue
+++ b/packages/vue/src/tags-input/tags-input.stories.vue
@@ -9,19 +9,16 @@ import {
   TagsInputControl,
   TagsInputField,
   TagsInputLabel,
-  type TagsInputContext,
 } from '.'
 import './tags-input.css'
 
-const tagsInputRef = ref<{ context: TagsInputContext }>()
-
 const values = ref<string[]>(['react', 'solid', 'vue'])
 </script>
 <template>
-  <TagsInput ref="tagsInputRef" v-model="values">
+  <TagsInput v-slot="{ value: v }" v-model="values">
     <TagsInputLabel>Label</TagsInputLabel>
     <TagsInputControl>
-      <template v-for="(value, index) in tagsInputRef?.context.value">
+      <template v-for="(value, index) in v">
         <Tag :index="index" :value="value">
           <span>{{ value }}</span>
           <TagDeleteTrigger :index="index" :value="value">
diff --git a/packages/vue/src/tags-input/tags-input.tsx b/packages/vue/src/tags-input/tags-input.tsx
index 9de6843f9d..30c25ac159 100644
--- a/packages/vue/src/tags-input/tags-input.tsx
+++ b/packages/vue/src/tags-input/tags-input.tsx
@@ -1,82 +1,85 @@
+import type { Context } from '@zag-js/tags-input'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import type { Assign } from '../types'
-import { getValidChildren } from '../utils'
+import type { Assign, Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { TagsInputProvider } from './tags-input-context'
-import { useTagsInput, type UseTagsInputProps } from './use-tags-input'
+import { useTagsInput } from './use-tags-input'
 
-type UseTagsInputPropsContext = UseTagsInputProps['context']
+export type TagsInputContext = Context & {
+  modelValue?: Context['value']
+}
 
-export type TagsInputProps = Assign<HTMLArkProps<'div'>, UseTagsInputPropsContext>
+export type UseTagsInputProps = Assign<HTMLArkProps<'div'>, TagsInputContext>
 
-const VueTagsInputProps = {
+const VueTagsInputProps = createVueProps<UseTagsInputProps>({
   addOnPaste: {
-    type: Boolean as PropType<TagsInputProps['addOnPaste']>,
+    type: Boolean as PropType<UseTagsInputProps['addOnPaste']>,
   },
   allowEditTag: {
-    type: Boolean as PropType<TagsInputProps['allowEditTag']>,
+    type: Boolean as PropType<UseTagsInputProps['allowEditTag']>,
     default: true,
   },
   allowOverflow: {
-    type: Boolean as PropType<TagsInputProps['allowOverflow']>,
+    type: Boolean as PropType<UseTagsInputProps['allowOverflow']>,
   },
   autoFocus: {
-    type: Boolean as PropType<TagsInputProps['autoFocus']>,
+    type: Boolean as PropType<UseTagsInputProps['autoFocus']>,
   },
   blurBehavior: {
-    type: String as PropType<TagsInputProps['blurBehavior']>,
+    type: String as PropType<UseTagsInputProps['blurBehavior']>,
   },
   dir: {
-    type: String as PropType<TagsInputProps['dir']>,
+    type: String as PropType<UseTagsInputProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<TagsInputProps['disabled']>,
+    type: Boolean as PropType<UseTagsInputProps['disabled']>,
   },
   form: {
-    type: String as PropType<TagsInputProps['form']>,
+    type: String as PropType<UseTagsInputProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<TagsInputProps['getRootNode']>,
+    type: Function as PropType<UseTagsInputProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<TagsInputProps['id']>,
+    type: String as PropType<UseTagsInputProps['id']>,
   },
   ids: {
-    type: String as PropType<TagsInputProps['ids']>,
+    type: String as PropType<UseTagsInputProps['ids']>,
   },
   inputValue: {
-    type: String as PropType<TagsInputProps['inputValue']>,
+    type: String as PropType<UseTagsInputProps['inputValue']>,
   },
   invalid: {
-    type: Boolean as PropType<TagsInputProps['invalid']>,
+    type: Boolean as PropType<UseTagsInputProps['invalid']>,
   },
   max: {
-    type: Number as PropType<TagsInputProps['max']>,
+    type: Number as PropType<UseTagsInputProps['max']>,
   },
   maxLength: {
-    type: Number as PropType<TagsInputProps['maxLength']>,
+    type: Number as PropType<UseTagsInputProps['maxLength']>,
   },
   modelValue: {
-    type: Object as PropType<TagsInputProps['modelValue']>,
+    type: Object as PropType<UseTagsInputProps['modelValue']>,
   },
   name: {
-    type: String as PropType<TagsInputProps['name']>,
+    type: String as PropType<UseTagsInputProps['name']>,
   },
   readOnly: {
-    type: Boolean as PropType<TagsInputProps['readOnly']>,
+    type: Boolean as PropType<UseTagsInputProps['readOnly']>,
   },
   translations: {
-    type: Object as PropType<TagsInputProps['translations']>,
+    type: Object as PropType<UseTagsInputProps['translations']>,
   },
   validate: {
-    type: Function as PropType<TagsInputProps['validate']>,
+    type: Function as PropType<UseTagsInputProps['validate']>,
   },
   value: {
-    type: Object as PropType<TagsInputProps['value']>,
+    type: Object as PropType<UseTagsInputProps['value']>,
   },
-}
+})
 
-export const TagsInput = defineComponent({
+export const TagsInput: ComponentWithProps<Partial<UseTagsInputProps>> = defineComponent({
   name: 'TagsInput',
   props: VueTagsInputProps,
   emits: ['change', 'update:modelValue', 'highlight', 'invalid', 'tag-update'],
@@ -91,8 +94,10 @@ export const TagsInput = defineComponent({
 
     return () => (
       <ark.div {...api.value.rootProps} {...attrs}>
-        {() => getValidChildren(slots)}
+        {() => slots?.default?.(api.value)}
       </ark.div>
     )
   },
 })
+
+export type TagsInputProps = Optional<TagsInputContext, 'id'>
diff --git a/packages/vue/src/tags-input/use-tags-input.ts b/packages/vue/src/tags-input/use-tags-input.ts
index 80779c6eb8..5bd149af16 100644
--- a/packages/vue/src/tags-input/use-tags-input.ts
+++ b/packages/vue/src/tags-input/use-tags-input.ts
@@ -1,25 +1,19 @@
-import { connect, machine, type Context as TagsInputContext } from '@zag-js/tags-input'
+import { connect, machine } from '@zag-js/tags-input'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, type UnwrapRef } from 'vue'
-import type { Optional } from '../types'
+import { computed, reactive, type ExtractPropTypes, type UnwrapRef } from 'vue'
 import { useId } from '../utils'
+import type { TagsInputContext } from './tags-input'
 
-type UseTagsInputPropsContext = Optional<TagsInputContext, 'id'> & {
-  modelValue?: TagsInputContext['value']
-}
-
-export type UseTagsInputProps = {
-  context: UseTagsInputPropsContext
-  emit: CallableFunction
-}
-
-export const useTagsInput = (emit: CallableFunction, context: UseTagsInputPropsContext) => {
+export const useTagsInput = <T extends ExtractPropTypes<TagsInputContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       value: reactiveContext.modelValue ?? reactiveContext.value,
       onChange(details) {
         emit('change', details)
diff --git a/packages/vue/src/tooltip/docs/tooltip.types.json b/packages/vue/src/tooltip/docs/tooltip.types.json
index d16f8dfb30..973f94757f 100644
--- a/packages/vue/src/tooltip/docs/tooltip.types.json
+++ b/packages/vue/src/tooltip/docs/tooltip.types.json
@@ -26,10 +26,15 @@
       "description": "Whether the tooltip is disabled"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine.\n\n\nThe `id` of the tooltip."
+    },
     "ids": {
       "type": "Partial<{\n  trigger: string\n  content: string\n  arrow: string\n  positioner: string\n}>",
       "isRequired": false,
diff --git a/packages/vue/src/tooltip/tooltip.tsx b/packages/vue/src/tooltip/tooltip.tsx
index d50e137d3a..739ae1c42e 100644
--- a/packages/vue/src/tooltip/tooltip.tsx
+++ b/packages/vue/src/tooltip/tooltip.tsx
@@ -1,53 +1,60 @@
+import type { Context } from '@zag-js/tooltip'
 import { defineComponent, type PropType } from 'vue'
-import { type ComponentWithProps } from '../utils'
+import type { Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { TooltipProvider } from './tooltip-context'
-import { useTooltip, type UseTooltipContext } from './use-tooltip'
+import { useTooltip } from './use-tooltip'
 
-export type TooltipProps = UseTooltipContext
+export type UseTooltipProps = Context
 
-const VueTooltipProps = {
+const VueTooltipProps = createVueProps<UseTooltipProps>({
+  id: {
+    type: String as PropType<UseTooltipProps['id']>,
+  },
   ids: {
-    type: Object as PropType<TooltipProps['ids']>,
+    type: Object as PropType<UseTooltipProps['ids']>,
   },
   openDelay: {
-    type: Number as PropType<TooltipProps['openDelay']>,
+    type: Number as PropType<UseTooltipProps['openDelay']>,
   },
   closeDelay: {
-    type: Number as PropType<TooltipProps['closeDelay']>,
+    type: Number as PropType<UseTooltipProps['closeDelay']>,
   },
   closeOnPointerDown: {
-    type: Boolean as PropType<TooltipProps['closeOnPointerDown']>,
+    type: Boolean as PropType<UseTooltipProps['closeOnPointerDown']>,
   },
   closeOnEsc: {
-    type: Boolean as PropType<TooltipProps['closeOnEsc']>,
+    type: Boolean as PropType<UseTooltipProps['closeOnEsc']>,
     default: true,
   },
   interactive: {
-    type: Boolean as PropType<TooltipProps['interactive']>,
+    type: Boolean as PropType<UseTooltipProps['interactive']>,
   },
   'aria-label': {
-    type: String as PropType<TooltipProps['aria-label']>,
+    type: String as PropType<UseTooltipProps['aria-label']>,
   },
   positioning: {
-    type: Object as PropType<TooltipProps['positioning']>,
+    type: Object as PropType<UseTooltipProps['positioning']>,
   },
   disabled: {
-    type: Boolean as PropType<TooltipProps['disabled']>,
+    type: Boolean as PropType<UseTooltipProps['disabled']>,
   },
   getRootNode: {
-    type: Function as PropType<TooltipProps['getRootNode']>,
+    type: Function as PropType<UseTooltipProps['getRootNode']>,
   },
-}
+})
 
-export const Tooltip: ComponentWithProps<TooltipProps> = defineComponent({
+export const Tooltip: ComponentWithProps<Partial<UseTooltipProps>> = defineComponent({
   name: 'Tooltip',
   props: VueTooltipProps,
   emits: ['open', 'close'],
   setup(props, { slots, emit }) {
-    const api = useTooltip(emit, props)
+    const api = useTooltip(emit, props as UseTooltipProps)
 
     TooltipProvider(api)
 
     return () => slots?.default?.()
   },
 })
+
+export type TooltipProps = Optional<Context, 'id'>
diff --git a/packages/vue/src/tooltip/use-tooltip.ts b/packages/vue/src/tooltip/use-tooltip.ts
index 63bdfc9c8b..eb62818db8 100644
--- a/packages/vue/src/tooltip/use-tooltip.ts
+++ b/packages/vue/src/tooltip/use-tooltip.ts
@@ -1,17 +1,18 @@
 import { connect, machine, type Context as TooltipContext } from '@zag-js/tooltip'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
 
-export type UseTooltipContext = Omit<TooltipContext, 'id'>
-
-export const useTooltip = (emit: CallableFunction, context: UseTooltipContext) => {
+export const useTooltip = <T extends ExtractPropTypes<TooltipContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       onOpen() {
         emit('open')
       },
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index 720d25d299..d4820b0fa7 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -1,3 +1,5 @@
+import type { PropType } from 'vue'
+
 /**
  * Assign property types from right to left.
  * Handy for overriding e.g. `onChange` from an HTMLElement with your own type
@@ -9,4 +11,15 @@ export type Assign<Target, Source> = Omit<Target, keyof Source> & Source
  */
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
+/**
+ * Take a type T and convert its properties to Vue props to ensure none has been left out.
+ */
+export type VueProps<T> = {
+  [K in keyof T]: {
+    type: PropType<T[K]>
+    default?: T[K]
+    required?: boolean
+  }
+}
+
 export {}
diff --git a/packages/vue/src/utils.ts b/packages/vue/src/utils.ts
index fb5079242a..ced1321207 100644
--- a/packages/vue/src/utils.ts
+++ b/packages/vue/src/utils.ts
@@ -11,6 +11,7 @@ import {
   type VNode,
   type VNodeProps,
 } from 'vue'
+import type { VueProps } from './types'
 
 /**
  * Gets only the valid children of a component,
@@ -132,3 +133,7 @@ export function renderSlotFragments(children: VNode[]): VNode[] {
     return [child]
   })
 }
+
+export function createVueProps<T extends object>(properties: VueProps<T>) {
+  return properties
+}