diff --git a/docs/content/docs/2.components/chat-prompt.md b/docs/content/docs/2.components/chat-prompt.md
index 0bfb0b20f9..7243d79c37 100644
--- a/docs/content/docs/2.components/chat-prompt.md
+++ b/docs/content/docs/2.components/chat-prompt.md
@@ -186,6 +186,14 @@ async function onSubmit() {
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `textareaRef`{lang="ts-type"} | `Ref<HTMLTextAreaElement \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme
diff --git a/docs/content/docs/2.components/content-search.md b/docs/content/docs/2.components/content-search.md
index 568bd85b79..3a0617ba4d 100644
--- a/docs/content/docs/2.components/content-search.md
+++ b/docs/content/docs/2.components/content-search.md
@@ -151,6 +151,14 @@ It is recommended to wrap the `ContentSearch` component in a [ClientOnly](https:
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `commandPaletteRef`{lang="ts-type"} | `Ref<InstanceType<typeof UCommandPalette> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme
diff --git a/docs/content/docs/2.components/dashboard-search.md b/docs/content/docs/2.components/dashboard-search.md
index d0064d7183..d5af5f2cdf 100644
--- a/docs/content/docs/2.components/dashboard-search.md
+++ b/docs/content/docs/2.components/dashboard-search.md
@@ -89,6 +89,14 @@ You can disable this behavior by setting the `color-mode` prop to `false`:
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `commandPaletteRef`{lang="ts-type"} | `Ref<InstanceType<typeof UCommandPalette> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme
diff --git a/docs/content/docs/2.components/form.md b/docs/content/docs/2.components/form.md
index 626fd5dbf3..cce978fda4 100644
--- a/docs/content/docs/2.components/form.md
+++ b/docs/content/docs/2.components/form.md
@@ -209,19 +209,19 @@ const form = useTemplateRef('form')
 
 This will give you access to the following:
 
-| Name                                                                                                                         | Type                                                                                                                                                                                       |
-|------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `submit()`{lang="ts-type"}                                                                                                   | `Promise<void>`{lang="ts-type"} <br> <div class="text-toned mt-1"><p>Triggers form submission.</p>                                                                                         |
-| `validate(opts: { name?: keyof T \| (keyof T)[], silent?: boolean, nested?: boolean, transform?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-toned mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p>                                 |
-| `clear(path?: keyof T \| RegExp)`{lang="ts-type"}                                                                            | `void` <br> <div class="text-toned mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</p>                                        |
-| `getErrors(path?: keyof T RegExp)`{lang="ts-type"}                                                                           | `FormError[]`{lang="ts-type"} <br> <div class="text-toned mt-1"><p>Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.</p></div>         |
-| `setErrors(errors: FormError[], name?: keyof T RegExp)`{lang="ts-type"}                                                      | `void` <br> <div class="text-toned mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p>                                                           |
-| `errors`{lang="ts-type"}                                                                                                     | `Ref<FormError[]>`{lang="ts-type"} <br> <div class="text-toned mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</p> |
-| `disabled`{lang="ts-type"}                                                                                                   | `Ref<boolean>`{lang="ts-type"}                                                                                                                                                             |
-| `dirty`{lang="ts-type"}                                                                                                      | `Ref<boolean>`{lang="ts-type"} `true` if at least one form field has been updated by the user.                                                                                             |
-| `dirtyFields`{lang="ts-type"}                                                                                                | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields that have been modified by the user.                                                                                            |
-| `touchedFields`{lang="ts-type"}                                                                                              | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields that the user interacted with.                                                                                                  |
-| `blurredFields`{lang="ts-type"}                                                                                              | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields blurred by the user.                                                                                                            |
+| Name | Type |
+| ---- | ---- |
+| `submit()`{lang="ts-type"} | `Promise<void>`{lang="ts-type"} <br> <div class="text-toned mt-1"><p>Triggers form submission.</p> |
+| `validate(opts: { name?: keyof T \| (keyof T)[], silent?: boolean, nested?: boolean, transform?: boolean })`{lang="ts-type"} | `Promise<T>`{lang="ts-type"} <br> <div class="text-toned mt-1"><p>Triggers form validation. Will raise any errors unless `opts.silent` is set to true.</p> |
+| `clear(path?: keyof T \| RegExp)`{lang="ts-type"} | `void` <br> <div class="text-toned mt-1"><p>Clears form errors associated with a specific path. If no path is provided, clears all form errors.</p></div> |
+| `getErrors(path?: keyof T RegExp)`{lang="ts-type"} | `FormError[]`{lang="ts-type"} <br> <div class="text-toned mt-1"><p>Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.</p></div> |
+| `setErrors(errors: FormError[], name?: keyof T RegExp)`{lang="ts-type"} | `void` <br> <div class="text-toned mt-1"><p>Sets form errors for a given path. If no path is provided, overrides all errors.</p></div> |
+| `errors`{lang="ts-type"} | `Ref<FormError[]>`{lang="ts-type"} <br> <div class="text-toned mt-1"><p>A reference to the array containing validation errors. Use this to access or manipulate the error information.</p></div> |
+| `disabled`{lang="ts-type"} | `Ref<boolean>`{lang="ts-type"} |
+| `dirty`{lang="ts-type"} | `Ref<boolean>`{lang="ts-type"} `true` if at least one form field has been updated by the user. |
+| `dirtyFields`{lang="ts-type"} | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields that have been modified by the user. |
+| `touchedFields`{lang="ts-type"} | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields that the user interacted with. |
+| `blurredFields`{lang="ts-type"} | `DeepReadonly<Set<keyof T>>`{lang="ts-type"} Tracks fields blurred by the user. |
 
 ## Theme
 
diff --git a/docs/content/docs/2.components/input-menu.md b/docs/content/docs/2.components/input-menu.md
index b7007973a6..4366caa2d8 100644
--- a/docs/content/docs/2.components/input-menu.md
+++ b/docs/content/docs/2.components/input-menu.md
@@ -855,7 +855,7 @@ When accessing the component via a template ref, you can use the following:
 
 | Name | Type |
 | ---- | ---- |
-| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
 
 ## Theme
 
diff --git a/docs/content/docs/2.components/input-number.md b/docs/content/docs/2.components/input-number.md
index 97dde5648e..e49c4de841 100644
--- a/docs/content/docs/2.components/input-number.md
+++ b/docs/content/docs/2.components/input-number.md
@@ -296,9 +296,9 @@ name: 'input-number-slots-example'
 
 When accessing the component via a template ref, you can use the following:
 
-| Name                       | Type                                            |
-| -------------------------- | ----------------------------------------------- |
-| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof NumberFieldInput> \| null>`{lang="ts-type"} |
+| Name | Type |
+| ---- | ---- |
+| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
 
 ## Theme
 
diff --git a/docs/content/docs/2.components/input-tags.md b/docs/content/docs/2.components/input-tags.md
index 02074d5422..639ac4653b 100644
--- a/docs/content/docs/2.components/input-tags.md
+++ b/docs/content/docs/2.components/input-tags.md
@@ -286,9 +286,9 @@ name: 'input-tags-form-field-example'
 
 When accessing the component via a template ref, you can use the following:
 
-| Name                       | Type                                            |
-| -------------------------- | ----------------------------------------------- |
-| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof TagsInputInput> \| null>`{lang="ts-type"} |
+| Name | Type |
+| ---- | ---- |
+| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
 
 ## Theme
 
diff --git a/docs/content/docs/2.components/select-menu.md b/docs/content/docs/2.components/select-menu.md
index 3ead44e8bf..d3a9e60fe4 100644
--- a/docs/content/docs/2.components/select-menu.md
+++ b/docs/content/docs/2.components/select-menu.md
@@ -896,7 +896,7 @@ When accessing the component via a template ref, you can use the following:
 
 | Name | Type |
 | ---- | ---- |
-| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+| `triggerRef`{lang="ts-type"} | `Ref<HTMLButtonElement \| null>`{lang="ts-type"} |
 
 ## Theme
 
diff --git a/docs/content/docs/2.components/select.md b/docs/content/docs/2.components/select.md
index 723a71e444..2907f839ef 100644
--- a/docs/content/docs/2.components/select.md
+++ b/docs/content/docs/2.components/select.md
@@ -771,7 +771,7 @@ When accessing the component via a template ref, you can use the following:
 
 | Name | Type |
 | ---- | ---- |
-| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof SelectTrigger> \| null>`{lang="ts-type"} |
+| `triggerRef`{lang="ts-type"} | `Ref<HTMLButtonElement \| null>`{lang="ts-type"} |
 
 ## Theme
 
diff --git a/docs/content/docs/2.components/table.md b/docs/content/docs/2.components/table.md
index 1c5ed14563..a4c24886f7 100644
--- a/docs/content/docs/2.components/table.md
+++ b/docs/content/docs/2.components/table.md
@@ -678,7 +678,7 @@ This will give you access to the following:
 | Name | Type |
 | ---- | ---- |
 | `tableRef`{lang="ts-type"} | `Ref<HTMLTableElement \| null>`{lang="ts-type"} |
-| `tableApi`{lang="ts-type"} | [`Ref<Table \| null>`{lang="ts-type"}](https://tanstack.com/table/latest/docs/api/core/table#table-api) |
+| `tableApi`{lang="ts-type"} | [`Table`{lang="ts-type"}](https://tanstack.com/table/latest/docs/api/core/table#table-api) |
 
 ## Theme
 
diff --git a/docs/content/docs/2.components/toast.md b/docs/content/docs/2.components/toast.md
index e40d7e1514..a5917f30ae 100644
--- a/docs/content/docs/2.components/toast.md
+++ b/docs/content/docs/2.components/toast.md
@@ -338,6 +338,14 @@ In this example, we use the `AppConfig` to configure the `expand` prop of the `T
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `height`{lang="ts-type"} | `Ref<number>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme
diff --git a/src/runtime/components/AuthForm.vue b/src/runtime/components/AuthForm.vue
index b1975551c5..5fef98b680 100644
--- a/src/runtime/components/AuthForm.vue
+++ b/src/runtime/components/AuthForm.vue
@@ -148,17 +148,12 @@ const slots = defineSlots<AuthFormSlots<typeof state, F>>()
 const { t } = useLocale()
 const appConfig = useAppConfig() as AuthForm['AppConfig']
 
-const formRef = useTemplateRef('formRef')
-const passwordVisibility = ref(false)
-const passwordRef = useTemplateRef('passwordRef')
-
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.authForm || {}) })())
 
-defineExpose({
-  formRef,
-  state
-})
+const formRef = useTemplateRef('formRef')
+const passwordVisibility = ref(false)
+const passwordRef = useTemplateRef('passwordRef')
 
 function pickFieldProps(field: F) {
   const fields = ['name', 'errorPattern', 'help', 'error', 'hint', 'size', 'required', 'eagerValidation', 'validateOnInputDelay'] as (keyof F)[]
@@ -186,6 +181,11 @@ function omitFieldProps(field: F) {
 
   return omit(field, [...fields, 'label', 'description'])
 }
+
+defineExpose({
+  formRef,
+  state
+})
 </script>
 
 <template>
diff --git a/src/runtime/components/ChatPrompt.vue b/src/runtime/components/ChatPrompt.vue
index 26c0c4ff4b..8f0755e85f 100644
--- a/src/runtime/components/ChatPrompt.vue
+++ b/src/runtime/components/ChatPrompt.vue
@@ -38,7 +38,7 @@ export interface ChatPromptSlots extends TextareaSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, useTemplateRef } from 'vue'
+import { computed, toRef, useTemplateRef } from 'vue'
 import { Primitive, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -71,6 +71,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatPrompt |
   variant: props.variant
 }))
 
+const textareaRef = useTemplateRef('textareaRef')
+
 function submit(e: Event) {
   if (model.value.trim() === '') {
     return
@@ -80,15 +82,13 @@ function submit(e: Event) {
 }
 
 function blur(e: Event) {
-  textarea.value?.textareaRef?.blur()
+  textareaRef.value?.textareaRef?.blur()
 
   emits('close', e)
 }
 
-const textarea = useTemplateRef('textarea')
-
 defineExpose({
-  textareaRef: textarea.value?.textareaRef
+  textareaRef: toRef(() => textareaRef.value?.textareaRef)
 })
 </script>
 
@@ -99,7 +99,7 @@ defineExpose({
     </div>
 
     <UTextarea
-      ref="textarea"
+      ref="textareaRef"
       v-model="model"
       :placeholder="placeholder || t('chatPrompt.placeholder')"
       :disabled="Boolean(error) || disabled"
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 435252fa3e..d1eae37c11 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -360,7 +360,7 @@ const filteredGroups = computed(() => {
 
 const filteredItems = computed(() => filteredGroups.value.flatMap(group => group.items || []))
 
-const listboxRootRef = useTemplateRef('listboxRootRef')
+const rootRef = useTemplateRef('rootRef')
 
 function navigate(item: T) {
   if (!item.children?.length) {
@@ -377,7 +377,7 @@ function navigate(item: T) {
 
   searchTerm.value = ''
 
-  listboxRootRef.value?.highlightFirstItem()
+  rootRef.value?.highlightFirstItem()
 }
 
 function navigateBack() {
@@ -389,7 +389,7 @@ function navigateBack() {
 
   searchTerm.value = ''
 
-  listboxRootRef.value?.highlightFirstItem()
+  rootRef.value?.highlightFirstItem()
 }
 
 function onBackspace() {
@@ -478,7 +478,7 @@ function onSelect(e: Event, item: T) {
     </ListboxItem>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :selection-behavior="selectionBehavior" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" ref="rootRef" :selection-behavior="selectionBehavior" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
         :placeholder="placeholder"
diff --git a/src/runtime/components/DashboardSearch.vue b/src/runtime/components/DashboardSearch.vue
index 89ad40a6c8..49eaa79651 100644
--- a/src/runtime/components/DashboardSearch.vue
+++ b/src/runtime/components/DashboardSearch.vue
@@ -155,6 +155,8 @@ const groups = computed(() => {
   return groups
 })
 
+const commandPaletteRef = useTemplateRef('commandPaletteRef')
+
 function onSelect(item: CommandPaletteItem) {
   if (item.disabled) {
     return
@@ -173,8 +175,6 @@ defineShortcuts({
   }
 })
 
-const commandPaletteRef = useTemplateRef('commandPaletteRef')
-
 defineExpose({
   commandPaletteRef
 })
diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index ba1161b6d1..266890c578 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -124,7 +124,7 @@ export interface FileUploadSlots<M extends boolean = false> {
 </script>
 
 <script setup lang="ts" generic="M extends boolean = false">
-import { computed, watch } from 'vue'
+import { computed, toRef, watch } from 'vue'
 import { Primitive, VisuallyHidden } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig, useLocale } from '#imports'
@@ -260,9 +260,7 @@ watch(modelValue, (newValue) => {
 })
 
 defineExpose({
-  get inputRef() {
-    return inputRef.value?.$el as HTMLInputElement
-  },
+  inputRef: toRef(() => inputRef.value?.$el as HTMLInputElement),
   dropzoneRef
 })
 </script>
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index 0cfec63aba..345e314794 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -62,7 +62,7 @@ export interface InputSlots {
 </script>
 
 <script setup lang="ts" generic="T extends InputValue">
-import { ref, computed, onMounted } from 'vue'
+import { useTemplateRef, computed, onMounted } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -106,7 +106,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.input || {})
   fieldGroup: orientation.value
 }))
 
-const inputRef = ref<HTMLInputElement | null>(null)
+const inputRef = useTemplateRef('inputRef')
 
 // Custom function to handle the v-model properties
 function updateInput(value: string | null | undefined) {
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 73dbe7db3a..41af4405bb 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -189,7 +189,7 @@ export interface InputMenuSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
-import { computed, ref, toRef, onMounted, toRaw, nextTick } from 'vue'
+import { computed, useTemplateRef, toRef, onMounted, toRaw, nextTick } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
@@ -337,7 +337,7 @@ const createItem = computed(() => {
 })
 const createItemPosition = computed(() => typeof props.createItem === 'object' ? props.createItem.position : 'bottom')
 
-const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
+const inputRef = useTemplateRef('inputRef')
 
 function autoFocus() {
   if (props.autofocus) {
@@ -433,7 +433,7 @@ function isInputItem(item: InputMenuItem): item is Exclude<InputMenuItem, InputM
 }
 
 defineExpose({
-  inputRef
+  inputRef: toRef(() => inputRef.value?.$el as HTMLInputElement)
 })
 </script>
 
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index 8dada5f1c4..1e0c7b2d05 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -79,7 +79,7 @@ export interface InputNumberSlots {
 </script>
 
 <script setup lang="ts" generic="T extends InputNumberValue = InputNumberValue">
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, computed, useTemplateRef, toRef } from 'vue'
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick, useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -126,7 +126,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
 const decrementIcon = computed(() => props.decrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown))
 
-const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
+const inputRef = useTemplateRef('inputRef')
 
 function onUpdate(value: number | undefined) {
   if (props.modelModifiers?.optional) {
@@ -159,7 +159,7 @@ onMounted(() => {
 })
 
 defineExpose({
-  inputRef
+  inputRef: toRef(() => inputRef.value?.$el as HTMLInputElement)
 })
 </script>
 
diff --git a/src/runtime/components/InputTags.vue b/src/runtime/components/InputTags.vue
index b687ba56ad..bd6119cf9b 100644
--- a/src/runtime/components/InputTags.vue
+++ b/src/runtime/components/InputTags.vue
@@ -64,7 +64,7 @@ export interface InputTagsSlots<T extends InputTagItem = InputTagItem> {
 </script>
 
 <script setup lang="ts" generic="T extends InputTagItem">
-import { computed, ref, onMounted, toRaw } from 'vue'
+import { computed, useTemplateRef, onMounted, toRaw, toRef } from 'vue'
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -105,13 +105,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTags ||
   fieldGroup: orientation.value
 }))
 
-const inputRef = ref<InstanceType<typeof TagsInputInput> | null>(null)
-
-onMounted(() => {
-  setTimeout(() => {
-    autoFocus()
-  }, props.autofocusDelay)
-})
+const inputRef = useTemplateRef('inputRef')
 
 function autoFocus() {
   if (props.autofocus) {
@@ -119,6 +113,12 @@ function autoFocus() {
   }
 }
 
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
 function onUpdate(value: T[]) {
   if (toRaw(props.modelValue) === value) {
     return
@@ -141,7 +141,7 @@ function onFocus(event: FocusEvent) {
 }
 
 defineExpose({
-  inputRef
+  inputRef: toRef(() => inputRef.value?.$el as HTMLInputElement)
 })
 </script>
 
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 901dbb4c53..883b579414 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -133,7 +133,7 @@ export interface SelectSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false">
-import { ref, computed, onMounted, toRef } from 'vue'
+import { useTemplateRef, computed, onMounted, toRef } from 'vue'
 import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectLabel, SelectGroup, SelectItem as RSelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
@@ -212,7 +212,7 @@ function displayValue(value: GetItemValue<T, VK> | GetItemValue<T, VK>[]): strin
   })
 }
 
-const triggerRef = ref<InstanceType<typeof SelectTrigger> | null>(null)
+const triggerRef = useTemplateRef('triggerRef')
 
 function autoFocus() {
   if (props.autofocus) {
@@ -253,7 +253,7 @@ function isSelectItem(item: SelectItem): item is Exclude<SelectItem, SelectValue
 }
 
 defineExpose({
-  triggerRef
+  triggerRef: toRef(() => triggerRef.value?.$el as HTMLButtonElement)
 })
 </script>
 
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 4f3738552c..102a46d54e 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -181,7 +181,7 @@ export interface SelectMenuSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
-import { ref, computed, onMounted, toRef, toRaw } from 'vue'
+import { useTemplateRef, computed, onMounted, toRef, toRaw } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
@@ -339,7 +339,7 @@ const createItem = computed(() => {
 })
 const createItemPosition = computed(() => typeof props.createItem === 'object' ? props.createItem.position : 'bottom')
 
-const triggerRef = ref<InstanceType<typeof ComboboxTrigger> | null>(null)
+const triggerRef = useTemplateRef('triggerRef')
 
 function autoFocus() {
   if (props.autofocus) {
@@ -414,7 +414,7 @@ function isSelectItem(item: SelectMenuItem): item is Exclude<SelectMenuItem, Sel
 }
 
 defineExpose({
-  triggerRef
+  triggerRef: toRef(() => triggerRef.value?.$el as HTMLButtonElement)
 })
 </script>
 
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 7fbe8e76bc..db7f3ffe79 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
-import type { Ref, WatchOptions } from 'vue'
+import type { Ref, WatchOptions, ComponentPublicInstance } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core'
 import type {
@@ -220,7 +220,7 @@ export type TableSlots<T extends TableData = TableData> = {
 </script>
 
 <script setup lang="ts" generic="T extends TableData">
-import { computed, ref, watch, toRef } from 'vue'
+import { ref, computed, useTemplateRef, watch, toRef } from 'vue'
 import { Primitive } from 'reka-ui'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
@@ -322,8 +322,8 @@ const groupingState = defineModel<GroupingState>('grouping', { default: [] })
 const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
 const paginationState = defineModel<PaginationState>('pagination', { default: {} })
 
-const rootRef = ref<InstanceType<typeof Primitive>>()
-const tableRef = ref<HTMLTableElement | null>(null)
+const rootRef = useTemplateRef<ComponentPublicInstance>('rootRef')
+const tableRef = useTemplateRef<HTMLTableElement>('tableRef')
 
 const tableApi = useVueTable({
   ...reactiveOmit(props, 'as', 'data', 'columns', 'virtualize', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
@@ -474,7 +474,7 @@ watch(() => props.data, () => {
 
 defineExpose({
   get $el() {
-    return rootRef.value?.$el
+    return rootRef.value?.$el as HTMLElement
   },
   tableRef,
   tableApi
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index 7418dd8dac..ba209de214 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -63,7 +63,7 @@ export interface TextareaSlots {
 </script>
 
 <script setup lang="ts" generic="T extends TextareaValue">
-import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { useTemplateRef, computed, onMounted, nextTick, watch } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -103,7 +103,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.textarea ||
   trailing: isTrailing.value || !!slots.trailing
 }))
 
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const textareaRef = useTemplateRef('textareaRef')
 
 // Custom function to handle the v-model properties
 function updateInput(value: string | null | undefined) {
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 48735f28e7..818bdd50ec 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -71,7 +71,7 @@ export interface ToastSlots {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from 'vue'
+import { ref, computed, onMounted, nextTick, useTemplateRef } from 'vue'
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -101,16 +101,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.toast || {})
   title: !!props.title || !!slots.title
 }))
 
-const el = ref()
+const rootRef = useTemplateRef('rootRef')
 const height = ref(0)
 
 onMounted(() => {
-  if (!el.value) {
+  if (!rootRef.value) {
     return
   }
 
   nextTick(() => {
-    height.value = el.value?.$el?.getBoundingClientRect()?.height
+    height.value = rootRef.value?.$el?.getBoundingClientRect()?.height
   })
 })
 
@@ -121,7 +121,7 @@ defineExpose({
 
 <template>
   <ToastRoot
-    ref="el"
+    ref="rootRef"
     v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
     :data-orientation="orientation"
diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue
index a7e687445b..243e261a98 100644
--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -142,7 +142,7 @@ export type TreeSlots<
 
 <script setup lang="ts" generic="T extends TreeItem[], M extends boolean = false">
 import type { ComponentPublicInstance } from 'vue'
-import { computed, toRef, ref } from 'vue'
+import { computed, toRef, useTemplateRef } from 'vue'
 import { TreeRoot, TreeItem, TreeVirtualizer, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { defu } from 'defu'
@@ -221,7 +221,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tree || {})
   virtualize: !!props.virtualize
 }))
 
-const rootRef = ref<ComponentPublicInstance>()
+const rootRef = useTemplateRef<ComponentPublicInstance>('rootRef')
 
 function getItemLabel<Item extends T[number]>(item: Item): string {
   return get(item, props.labelKey as string)
@@ -244,7 +244,7 @@ const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.fla
 
 defineExpose({
   get $el() {
-    return rootRef.value?.$el
+    return rootRef.value?.$el as HTMLElement
   }
 })
 </script>
diff --git a/src/runtime/components/content/ContentSearch.vue b/src/runtime/components/content/ContentSearch.vue
index 056d95e18d..4f754d7cd5 100644
--- a/src/runtime/components/content/ContentSearch.vue
+++ b/src/runtime/components/content/ContentSearch.vue
@@ -148,6 +148,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contentSearc
   fullscreen: props.fullscreen
 }))
 
+const commandPaletteRef = useTemplateRef('commandPaletteRef')
+
 function mapLinksItems(links: T[]): ContentSearchItem[] {
   return links.flatMap(link => [{
     ...link,
@@ -262,8 +264,6 @@ defineShortcuts({
   }
 })
 
-const commandPaletteRef = useTemplateRef('commandPaletteRef')
-
 defineExpose({
   commandPaletteRef
 })
diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts
index 1f04b43642..38816d7d8d 100644
--- a/src/runtime/composables/useFileUpload.ts
+++ b/src/runtime/composables/useFileUpload.ts
@@ -1,5 +1,5 @@
+import type { ComponentPublicInstance } from 'vue'
 import { ref, computed, unref, onMounted, watch, reactive } from 'vue'
-import type { VisuallyHidden } from 'reka-ui'
 import { useFileDialog, useDropZone } from '@vueuse/core'
 import type { MaybeRef } from '@vueuse/core'
 
@@ -46,7 +46,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
     dropzone = true,
     onUpdate
   } = options
-  const inputRef = ref<InstanceType<typeof VisuallyHidden>>()
+  const inputRef = ref<ComponentPublicInstance>()
   const dropzoneRef = ref<HTMLDivElement>()
 
   const dataTypes = computed(() => parseAcceptToDataTypes(unref(accept)))