diff --git a/src/module.ts b/src/module.ts
index 866e1661..8f57e667 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -66,7 +66,6 @@ export default defineNuxtModule<ModuleOptions>({
     addVitePlugin(tailwindcss)
 
     await installModule('@nuxt/icon', {
-      componentName: 'UIcon',
       cssLayer: 'components'
     })
     // await installModule('@nuxtjs/color-mode', { classSuffix: '' })
diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue
index e6dd8178..1ba51aac 100644
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -62,7 +62,8 @@ export interface AlertSlots {
 import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
-import { UIcon, UAvatar } from '#components'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = defineProps<AlertProps>()
 const emits = defineEmits<AlertEmits>()
diff --git a/src/runtime/components/App.vue b/src/runtime/components/App.vue
index a618a65d..54f6024b 100644
--- a/src/runtime/components/App.vue
+++ b/src/runtime/components/App.vue
@@ -17,7 +17,9 @@ import { toRef } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useId } from '#imports'
-import { UToaster, UModalProvider, USlideoverProvider } from '#components'
+import UToaster from './Toaster.vue'
+import UModalProvider from './ModalProvider.vue'
+import USlideoverProvider from './SlideoverProvider.vue'
 
 const props = withDefaults(defineProps<AppProps>(), {
   useId: () => useId()
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index e914d96e..88b3e3da 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -31,8 +31,8 @@ export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
 import { computed } from 'vue'
 import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UIcon } from '#components'
-import { useAvatarGroup } from '#imports'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
+import UIcon from './Icon.vue'
 
 defineOptions({ inheritAttrs: false })
 
diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue
index c3d45a45..f9088f7c 100644
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -33,8 +33,8 @@ export interface AvatarGroupSlots {
 <script setup lang="ts">
 import { computed, provide } from 'vue'
 import { Primitive } from 'radix-vue'
-import { UAvatar } from '#components'
-import { avatarGroupInjectionKey } from '#imports'
+import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
+import UAvatar from './Avatar.vue'
 
 const props = defineProps<AvatarGroupProps>()
 const slots = defineSlots<AvatarGroupSlots>()
diff --git a/src/runtime/components/Breadcrumb.vue b/src/runtime/components/Breadcrumb.vue
index cb320857..dcc89422 100644
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -47,7 +47,10 @@ export type BreadcrumbSlots<T extends { slot?: string }> = {
 <script setup lang="ts" generic="T extends BreadcrumbItem">
 import { Primitive } from 'radix-vue'
 import { useAppConfig } from '#imports'
-import { ULink, UIcon, UAvatar } from '#components'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
 import { pickLinkProps } from '../utils/link'
 
 const props = defineProps<BreadcrumbProps<T>>()
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index f6238473..ac55f6b9 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -36,8 +36,10 @@ export interface ButtonSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useForwardProps } from 'radix-vue'
-import { useComponentIcons, useButtonGroup } from '#imports'
-import { UIcon, ULink } from '#components'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import UIcon from './Icon.vue'
+import ULink from './Link.vue'
 import { pickLinkProps } from '../utils/link'
 
 const props = defineProps<ButtonProps>()
diff --git a/src/runtime/components/ButtonGroup.vue b/src/runtime/components/ButtonGroup.vue
index 67ad882f..0635091f 100644
--- a/src/runtime/components/ButtonGroup.vue
+++ b/src/runtime/components/ButtonGroup.vue
@@ -33,7 +33,7 @@ export interface ButtonGroupSlots {
 <script setup lang="ts">
 import { provide, computed } from 'vue'
 import { Primitive } from 'radix-vue'
-import { buttonGroupInjectionKey } from '#imports'
+import { buttonGroupInjectionKey } from '../composables/useButtonGroup'
 
 const props = withDefaults(defineProps<ButtonGroupProps>(), {
   orientation: 'horizontal'
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index f445f40b..cb45da05 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -49,7 +49,8 @@ export interface CheckboxSlots {
 import { computed } from 'vue'
 import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId, useAppConfig, useFormField } from '#imports'
+import { useId, useAppConfig } from '#imports'
+import { useFormField } from '../composables/useFormField'
 
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()
diff --git a/src/runtime/components/Chip.vue b/src/runtime/components/Chip.vue
index 15c433bd..06208d03 100644
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -42,7 +42,7 @@ export interface ChipSlots {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
-import { useAvatarGroup } from '#imports'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
 
 const props = defineProps<ChipProps>()
 defineSlots<ChipSlots>()
diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue
index 97a4a9ea..4a82dfbe 100644
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -98,8 +98,12 @@ import { ComboboxRoot, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxE
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
-import { UInput, UAvatar, UIcon, UKbd, UChip } from '#components'
 import { useAppConfig } from '#imports'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
+import UKbd from './Kbd.vue'
+import UInput from './Input.vue'
 import { omit } from '../utils'
 import { highlight } from '../utils/fuse'
 
diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue
index d0532f54..8b1136a7 100644
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -62,7 +62,7 @@ export type ContextMenuSlots<T extends { slot?: string }> = {
 import { computed, toRef } from 'vue'
 import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UContextMenuContent } from '#components'
+import UContextMenuContent from './ContextMenuContent.vue'
 import { omit } from '../utils'
 
 const props = withDefaults(defineProps<ContextMenuProps<T>>(), {
diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue
index 490ef9b8..87b8a85a 100644
--- a/src/runtime/components/ContextMenuContent.vue
+++ b/src/runtime/components/ContextMenuContent.vue
@@ -24,7 +24,11 @@ import { ContextMenu } from 'radix-vue/namespaced'
 import { useForwardPropsEmits } from 'radix-vue'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { ULink } from '#components'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import UAvatar from './Avatar.vue'
+import UIcon from './Icon.vue'
+import UKbd from './Kbd.vue'
 import { omit } from '../utils'
 import { pickLinkProps } from '../utils/link'
 
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index 286cb375..3804f2e0 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -71,7 +71,7 @@ import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UDropdownMenuContent } from '#components'
+import UDropdownMenuContent from './DropdownMenuContent.vue'
 import { omit } from '../utils'
 
 const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index f651e237..11b28f74 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -28,7 +28,11 @@ import { DropdownMenu } from 'radix-vue/namespaced'
 import { useForwardPropsEmits } from 'radix-vue'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { ULink } from '#components'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import UAvatar from './Avatar.vue'
+import UIcon from './Icon.vue'
+import UKbd from './Kbd.vue'
 import { omit } from '../utils'
 import { pickLinkProps } from '../utils/link'
 
diff --git a/src/runtime/components/Form.vue b/src/runtime/components/Form.vue
index fb82d4b1..ad034472 100644
--- a/src/runtime/components/Form.vue
+++ b/src/runtime/components/Form.vue
@@ -4,9 +4,6 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form'
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId } from '../types/form'
-import { FormValidationException } from '../types/form'
-
-import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, useId } from '#imports'
 
 const appConfig = _appConfig as AppConfig & { ui: { form: Partial<typeof theme> } }
 
@@ -36,7 +33,10 @@ export interface FormSlots {
 <script lang="ts" setup generic="T extends object">
 import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed } from 'vue'
 import { useEventBus } from '@vueuse/core'
+import { useId } from '#imports'
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey } from '../composables/useFormField'
 import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
+import { FormValidationException } from '../types/form'
 
 const props = withDefaults(defineProps<FormProps<T>>(), {
   validateOn() {
diff --git a/src/runtime/components/FormField.vue b/src/runtime/components/FormField.vue
index 34120a37..3cfff2c6 100644
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -38,7 +38,8 @@ export interface FormFieldSlots {
 <script lang="ts" setup>
 import { computed, ref, inject, provide, type Ref } from 'vue'
 import { Label } from 'radix-vue'
-import { useId, formFieldInjectionKey } from '#imports'
+import { useId } from '#imports'
+import { formFieldInjectionKey } from '../composables/useFormField'
 import type { FormError } from '../types/form'
 
 const props = defineProps<FormFieldProps>()
diff --git a/src/runtime/components/Icon.vue b/src/runtime/components/Icon.vue
new file mode 100644
index 00000000..c98891cf
--- /dev/null
+++ b/src/runtime/components/Icon.vue
@@ -0,0 +1,26 @@
+<script lang="ts">
+export interface IconProps {
+  name: string
+  mode?: 'svg' | 'css'
+  size?: string | number
+  customize?: (
+    content: string,
+    name?: string,
+    prefix?: string,
+    provider?: string
+  ) => string
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<IconProps>()
+
+const iconProps = useForwardProps(reactivePick(props, 'name', 'mode', 'size', 'customize'))
+</script>
+
+<template>
+  <Icon v-bind="iconProps" />
+</template>
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index fc6ad669..24bf9dc0 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -48,8 +48,10 @@ export interface InputSlots {
 
 <script lang="ts" setup>
 import { ref, computed, onMounted } from 'vue'
-import { useComponentIcons, useFormField, useButtonGroup } from '#imports'
-import { UIcon } from '#components'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
 import { looseToNumber } from '../utils'
 
 defineOptions({ inheritAttrs: false })
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 705db8f1..a795ca42 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -118,8 +118,13 @@ import { computed, ref, toRef, onMounted } from 'vue'
 import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
-import { useAppConfig, useFormField, useButtonGroup, useComponentIcons } from '#imports'
-import { UIcon, UChip, UAvatar } from '#components'
+import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
 import { get } from '../utils'
 
 defineOptions({ inheritAttrs: false })
diff --git a/src/runtime/components/Kbd.vue b/src/runtime/components/Kbd.vue
index 31b6f7f1..c46fbf06 100644
--- a/src/runtime/components/Kbd.vue
+++ b/src/runtime/components/Kbd.vue
@@ -30,7 +30,7 @@ export interface KbdSlots {
 
 <script setup lang="ts">
 import { Primitive } from 'radix-vue'
-import { useKbd } from '#imports'
+import { useKbd } from '../composables/useKbd'
 
 const props = withDefaults(defineProps<KbdProps>(), {
   as: 'kbd'
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index c3eb9fbb..4ce5b9b8 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -59,7 +59,7 @@ import { computed, toRef } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { UButton } from '#components'
+import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<ModalProps>(), {
   close: true,
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 4de7ba5d..fb89316d 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -80,7 +80,11 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
 import { computed, toRef } from 'vue'
 import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UIcon, UAvatar, UBadge, ULink, ULinkBase } from '#components'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import UAvatar from './Avatar.vue'
+import UIcon from './Icon.vue'
+import UBadge from './Badge.vue'
 import { pickLinkProps } from '../utils/link'
 
 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index 2f3d285f..039575a6 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -53,7 +53,8 @@ export interface RadioGroupSlots<T> {
 import { computed } from 'vue'
 import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId, useFormField } from '#imports'
+import { useId } from '#imports'
+import { useFormField } from '../composables/useFormField'
 
 const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
   orientation: 'vertical'
diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue
index 6924c5a4..8e2b9d10 100644
--- a/src/runtime/components/Select.vue
+++ b/src/runtime/components/Select.vue
@@ -93,8 +93,13 @@ import { computed, toRef } from 'vue'
 import { SelectRoot, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
-import { useAppConfig, useComponentIcons, useFormField, useButtonGroup } from '#imports'
-import { UIcon, UChip, UAvatar } from '#components'
+import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
 
 const props = withDefaults(defineProps<SelectProps<T>>(), {
   valueKey: 'value' as any,
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 5d0a0752..eb3785c0 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -109,8 +109,13 @@ import { computed, toRef } from 'vue'
 import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
-import { useAppConfig, useFormField, useButtonGroup, useComponentIcons } from '#imports'
-import { UIcon, UChip, UAvatar } from '#components'
+import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
 import { get } from '../utils'
 
 const props = withDefaults(defineProps<SelectMenuProps<T>>(), {
diff --git a/src/runtime/components/Separator.vue b/src/runtime/components/Separator.vue
index 1228f235..d4a6e57b 100644
--- a/src/runtime/components/Separator.vue
+++ b/src/runtime/components/Separator.vue
@@ -45,7 +45,8 @@ export interface SeparatorSlots {
 import { computed } from 'vue'
 import { Separator, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UAvatar, UIcon } from '#components'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = withDefaults(defineProps<SeparatorProps>(), {
   orientation: 'horizontal'
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
index 4da160df..7c0bb4fd 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -69,7 +69,7 @@ import { computed, toRef } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { UButton } from '#components'
+import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<SlideoverProps>(), {
   close: true,
diff --git a/src/runtime/components/Slider.vue b/src/runtime/components/Slider.vue
index b5f8929d..32a7c5ae 100644
--- a/src/runtime/components/Slider.vue
+++ b/src/runtime/components/Slider.vue
@@ -39,7 +39,7 @@ export type SliderEmits = Omit<SliderRootEmits, 'valueCommit'> & {
 import { computed } from 'vue'
 import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useFormField } from '#imports'
+import { useFormField } from '../composables/useFormField'
 
 const props = withDefaults(defineProps<SliderProps>(), {
   min: 0,
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 94fb1b9b..d0b71226 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -54,7 +54,8 @@ export interface SwitchSlots {
 import { computed } from 'vue'
 import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useId, useAppConfig, useFormField } from '#imports'
+import { useId, useAppConfig } from '#imports'
+import { useFormField } from '../composables/useFormField'
 
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index c40fde17..22eef3e5 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -44,7 +44,7 @@ export interface TextareaSlots {
 
 <script lang="ts" setup>
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
-import { useFormField } from '#imports'
+import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
 
 defineOptions({ inheritAttrs: false })
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 04e262d0..dc5ab8fa 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -60,7 +60,8 @@ import { ref, computed, onMounted } from 'vue'
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { UIcon, UAvatar } from '#components'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
   close: true
diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue
index 3871907b..d4214b35 100644
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -31,8 +31,8 @@ export interface ToasterSlots {
 import { ref, computed } from 'vue'
 import { ToastProvider, ToastViewport, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useToast } from '#imports'
-import { UToast } from '#components'
+import { useToast } from '../composables/useToast'
+import UToast from './Toast.vue'
 import { omit } from '../utils'
 
 const props = withDefaults(defineProps<ToasterProps>(), {
diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index ef3b10af..33e413dc 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -47,7 +47,7 @@ import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { UKbd } from '#components'
+import UKbd from './Kbd.vue'
 
 const props = withDefaults(defineProps<TooltipProps>(), {
   portal: true
diff --git a/src/runtime/composables/defineShortcuts.ts b/src/runtime/composables/defineShortcuts.ts
index 70650bdb..e6616c05 100644
--- a/src/runtime/composables/defineShortcuts.ts
+++ b/src/runtime/composables/defineShortcuts.ts
@@ -3,7 +3,7 @@
 import { ref, computed, toValue } from 'vue'
 import type { MaybeRef } from 'vue'
 import { useEventListener, useActiveElement, useDebounceFn } from '@vueuse/core'
-import { useKbd } from '#imports'
+import { useKbd } from '../composables/useKbd'
 
 type Handler = (e?: any) => void