diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 01caf43..0cda5c6 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { twJoin, twMerge } from 'tailwind-merge'
-import type { PropType } from 'vue'
+import { computed, toRef, type PropType } from 'vue'
 import { button } from '../../ui.config'
 import type { DeepPartial, Strategy } from '../../types/utils'
 import type { ButtonColor, ButtonSize, ButtonVariant } from '../../types/button'
+import { useRayUI } from '#build/imports'
 
 const config = button
 
@@ -42,7 +43,7 @@ const props = defineProps({
   },
 })
 
-const { ui, attrs } = useUI('button', toRef(props, 'ui'), config)
+const { ui, attrs } = useRayUI('button', toRef(props, 'ui'), config)
 
 const buttonClass = computed(() => {
   // @ts-ignore
diff --git a/src/runtime/components/overlays/Message.vue b/src/runtime/components/overlays/Message.vue
index c5653b6..a4a90b8 100644
--- a/src/runtime/components/overlays/Message.vue
+++ b/src/runtime/components/overlays/Message.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { inject, ref, onMounted } from 'vue';
 import type { MessageProviderApi, Message } from '../../types/message'
 
 const providerApi = inject<MessageProviderApi>('ray-message-provider')
diff --git a/src/runtime/composables/useUI.ts b/src/runtime/composables/useRayUI.ts
similarity index 96%
rename from src/runtime/composables/useUI.ts
rename to src/runtime/composables/useRayUI.ts
index 739b95b..f47d9a8 100644
--- a/src/runtime/composables/useUI.ts
+++ b/src/runtime/composables/useRayUI.ts
@@ -4,7 +4,7 @@ import { mergeUiConfig } from '../utils'
 import { omit, getValueByPath } from '../utils/objectUtils'
 import { useAppConfig } from '#app'
 
-export const useUI = <T>(
+export const useRayUI = <T>(
   key: string,
   ui?: Ref<(DeepPartial<T> & { strategy?: Strategy }) | undefined>,
   config?: T | Ref<T>,