diff --git a/package.json b/package.json
index 5fbc568fbb..b8bfd88e87 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "@element-plus/components": "workspace:*",
+    "@element-plus/constants": "workspace:*",
     "@element-plus/directives": "workspace:*",
     "@element-plus/hooks": "workspace:*",
     "@element-plus/icons-vue": "^0.2.6",
@@ -61,6 +62,7 @@
     "@element-plus/theme-chalk": "workspace:*",
     "@element-plus/tokens": "workspace:*",
     "@element-plus/utils": "workspace:*",
+    "@element-plus/utils-v2": "workspace:*",
     "@popperjs/core": "^2.11.2",
     "@vueuse/core": "^7.5.5",
     "async-validator": "^4.0.7",
diff --git a/packages/components/affix/index.ts b/packages/components/affix/index.ts
index 3688e83cee..301872b72a 100644
--- a/packages/components/affix/index.ts
+++ b/packages/components/affix/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Affix from './src/affix.vue'
 
diff --git a/packages/components/affix/src/affix.ts b/packages/components/affix/src/affix.ts
index 326d24e38e..e9e400f1be 100644
--- a/packages/components/affix/src/affix.ts
+++ b/packages/components/affix/src/affix.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type { ZIndexProperty } from 'csstype'
 import type Affix from './affix.vue'
diff --git a/packages/components/alert/__tests__/alert.spec.ts b/packages/components/alert/__tests__/alert.spec.ts
index 5311c7fd58..a1cd389462 100644
--- a/packages/components/alert/__tests__/alert.spec.ts
+++ b/packages/components/alert/__tests__/alert.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { TypeComponentsMap } from '@element-plus/utils/icon'
+import { TypeComponentsMap } from '@element-plus/utils-v2'
 import Alert from '../src/alert.vue'
 
 const AXIOM = 'Rem is the best girl'
diff --git a/packages/components/alert/index.ts b/packages/components/alert/index.ts
index 79068d136a..c5b018ec1b 100644
--- a/packages/components/alert/index.ts
+++ b/packages/components/alert/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Alert from './src/alert.vue'
 
diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index 1be6b82c51..f4551fa239 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -1,5 +1,4 @@
-import { TypeComponentsMap } from '@element-plus/utils/icon'
-import { buildProps, keyOf } from '@element-plus/utils/props'
+import { TypeComponentsMap, buildProps, keyOf } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type Alert from './alert.vue'
 
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index b4072df4f9..ea595ea960 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -42,7 +42,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
-import { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'
+import { TypeComponents, TypeComponentsMap } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { alertProps, alertEmits } from './alert'
 
diff --git a/packages/components/autocomplete/index.ts b/packages/components/autocomplete/index.ts
index da2cfca196..554c550f57 100644
--- a/packages/components/autocomplete/index.ts
+++ b/packages/components/autocomplete/index.ts
@@ -1,6 +1,6 @@
 import Autocomplete from './src/index.vue'
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Autocomplete.install = (app: App): void => {
   app.component(Autocomplete.name, Autocomplete)
diff --git a/packages/components/autocomplete/src/index.vue b/packages/components/autocomplete/src/index.vue
index 4734f9d2fb..fd1433ad43 100644
--- a/packages/components/autocomplete/src/index.vue
+++ b/packages/components/autocomplete/src/index.vue
@@ -94,9 +94,8 @@ import { NOOP } from '@vue/shared'
 import { debounce } from 'lodash-unified'
 import { useAttrs, useNamespace } from '@element-plus/hooks'
 import { ClickOutside } from '@element-plus/directives'
-import { generateId, isArray } from '@element-plus/utils/util'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { throwError } from '@element-plus/utils/error'
+import { generateId, isArray, throwError } from '@element-plus/utils-v2'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import ElInput from '@element-plus/components/input'
 import ElScrollbar from '@element-plus/components/scrollbar'
 import ElTooltip, {
diff --git a/packages/components/avatar/index.ts b/packages/components/avatar/index.ts
index 10c479505c..1f5c650ede 100644
--- a/packages/components/avatar/index.ts
+++ b/packages/components/avatar/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Avatar from './src/avatar.vue'
 
 export const ElAvatar = withInstall(Avatar)
diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
index a14fa9ff92..f4ed626167 100644
--- a/packages/components/avatar/src/avatar.ts
+++ b/packages/components/avatar/src/avatar.ts
@@ -1,5 +1,9 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import type { ExtractPropTypes, Component } from 'vue'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+} from '@element-plus/utils-v2'
+import type { ExtractPropTypes } from 'vue'
 import type { ObjectFitProperty } from 'csstype'
 import type Avatar from './avatar.vue'
 
@@ -16,7 +20,7 @@ export const avatarProps = buildProps({
     default: 'circle',
   },
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
   },
   src: {
     type: String,
diff --git a/packages/components/avatar/src/avatar.vue b/packages/components/avatar/src/avatar.vue
index a4c1ea128f..74a104704b 100644
--- a/packages/components/avatar/src/avatar.vue
+++ b/packages/components/avatar/src/avatar.vue
@@ -19,7 +19,7 @@
 import { defineComponent, computed, ref, watch } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import { useNamespace } from '@element-plus/hooks'
-import { addUnit, isNumber, isString } from '@element-plus/utils/util'
+import { isNumber, isString, addUnit } from '@element-plus/utils-v2'
 import { avatarEmits, avatarProps } from './avatar'
 
 import type { CSSProperties } from 'vue'
diff --git a/packages/components/backtop/index.ts b/packages/components/backtop/index.ts
index 0e214020aa..21b740990b 100644
--- a/packages/components/backtop/index.ts
+++ b/packages/components/backtop/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Backtop from './src/backtop.vue'
 
diff --git a/packages/components/backtop/src/backtop.vue b/packages/components/backtop/src/backtop.vue
index 9ee6598f6e..553033ad63 100644
--- a/packages/components/backtop/src/backtop.vue
+++ b/packages/components/backtop/src/backtop.vue
@@ -21,7 +21,7 @@ import { defineComponent, ref, computed, onMounted, shallowRef } from 'vue'
 import { useEventListener, useThrottleFn } from '@vueuse/core'
 import { ElIcon } from '@element-plus/components/icon'
 import { easeInOutCubic } from '@element-plus/utils/animation'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 import { CaretTop } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
 
diff --git a/packages/components/badge/index.ts b/packages/components/badge/index.ts
index 35af9d68cb..3be218b267 100644
--- a/packages/components/badge/index.ts
+++ b/packages/components/badge/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Badge from './src/badge.vue'
 
diff --git a/packages/components/badge/src/badge.ts b/packages/components/badge/src/badge.ts
index 7fc69c1e83..d3e5fec074 100644
--- a/packages/components/badge/src/badge.ts
+++ b/packages/components/badge/src/badge.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type Badge from './badge.vue'
 
diff --git a/packages/components/breadcrumb/index.ts b/packages/components/breadcrumb/index.ts
index efb6339119..431fe714c8 100644
--- a/packages/components/breadcrumb/index.ts
+++ b/packages/components/breadcrumb/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Breadcrumb from './src/breadcrumb.vue'
 import BreadcrumbItem from './src/breadcrumb-item.vue'
diff --git a/packages/components/breadcrumb/src/breadcrumb-item.ts b/packages/components/breadcrumb/src/breadcrumb-item.ts
index 0dda875bf1..10217423e8 100644
--- a/packages/components/breadcrumb/src/breadcrumb-item.ts
+++ b/packages/components/breadcrumb/src/breadcrumb-item.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type BreadcrumbItem from './breadcrumb-item.vue'
diff --git a/packages/components/breadcrumb/src/breadcrumb.ts b/packages/components/breadcrumb/src/breadcrumb.ts
index c5b5887994..ba8459b683 100644
--- a/packages/components/breadcrumb/src/breadcrumb.ts
+++ b/packages/components/breadcrumb/src/breadcrumb.ts
@@ -1,5 +1,5 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import type { ExtractPropTypes, Component } from 'vue'
+import { buildProps, iconPropType } from '@element-plus/utils-v2'
+import type { ExtractPropTypes } from 'vue'
 import type Breadcrumb from './breadcrumb.vue'
 
 export const breadcrumbProps = buildProps({
@@ -8,7 +8,7 @@ export const breadcrumbProps = buildProps({
     default: '/',
   },
   separatorIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
 } as const)
diff --git a/packages/components/button/index.ts b/packages/components/button/index.ts
index ac9094abd6..cc482579f7 100644
--- a/packages/components/button/index.ts
+++ b/packages/components/button/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 import Button from './src/button.vue'
 import ButtonGroup from './src/button-group.vue'
 
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index 8a3a868b07..ced43995a9 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -1,7 +1,7 @@
 import { useSizeProp } from '@element-plus/hooks'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, iconPropType } from '@element-plus/utils-v2'
 import { Loading } from '@element-plus/icons-vue'
-import type { ExtractPropTypes, Component } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 import type button from './button.vue'
 
 export const buttonType = [
@@ -25,7 +25,7 @@ export const buttonProps = buildProps({
     default: '',
   },
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   nativeType: {
@@ -35,7 +35,7 @@ export const buttonProps = buildProps({
   },
   loading: Boolean,
   loadingIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: () => Loading,
   },
   plain: Boolean,
diff --git a/packages/components/calendar/index.ts b/packages/components/calendar/index.ts
index 075d3773f3..1eb8533d4d 100644
--- a/packages/components/calendar/index.ts
+++ b/packages/components/calendar/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Calendar from './src/calendar.vue'
 
 export const ElCalendar = withInstall(Calendar)
diff --git a/packages/components/calendar/src/calendar.ts b/packages/components/calendar/src/calendar.ts
index fa9afaf518..95553836d5 100644
--- a/packages/components/calendar/src/calendar.ts
+++ b/packages/components/calendar/src/calendar.ts
@@ -1,5 +1,5 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import type { ExtractPropTypes } from 'vue'
 
 export const calendarProps = buildProps({
diff --git a/packages/components/calendar/src/calendar.vue b/packages/components/calendar/src/calendar.vue
index 60a0620f3b..038d8c2f97 100644
--- a/packages/components/calendar/src/calendar.vue
+++ b/packages/components/calendar/src/calendar.vue
@@ -48,7 +48,7 @@ import { ref, computed, defineComponent } from 'vue'
 import dayjs from 'dayjs'
 import { ElButton, ElButtonGroup } from '@element-plus/components/button'
 import { useLocale, useNamespace } from '@element-plus/hooks'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import DateTable from './date-table.vue'
 import { calendarProps, calendarEmits } from './calendar'
 
diff --git a/packages/components/calendar/src/date-table.ts b/packages/components/calendar/src/date-table.ts
index f719bcac89..2143c33737 100644
--- a/packages/components/calendar/src/date-table.ts
+++ b/packages/components/calendar/src/date-table.ts
@@ -1,5 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import { isObject } from '@element-plus/utils/util'
+import { buildProps, definePropType, isObject } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type { Dayjs } from 'dayjs'
 
diff --git a/packages/components/card/index.ts b/packages/components/card/index.ts
index f23508beb2..6d99d12a53 100644
--- a/packages/components/card/index.ts
+++ b/packages/components/card/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Card from './src/card.vue'
 
diff --git a/packages/components/card/src/card.ts b/packages/components/card/src/card.ts
index 4d1b80db0e..25083d32b1 100644
--- a/packages/components/card/src/card.ts
+++ b/packages/components/card/src/card.ts
@@ -1,7 +1,6 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import type Card from './card.vue'
-import type { ExtractPropTypes } from 'vue'
-import type { StyleValue } from '@element-plus/utils/types'
+import type { ExtractPropTypes, StyleValue } from 'vue'
 
 export const cardProps = buildProps({
   header: {
diff --git a/packages/components/carousel/index.ts b/packages/components/carousel/index.ts
index 8701ba89e6..ccf287f057 100644
--- a/packages/components/carousel/index.ts
+++ b/packages/components/carousel/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 import Carousel from './src/main.vue'
 import CarouselItem from './src/item.vue'
 
diff --git a/packages/components/carousel/src/item.vue b/packages/components/carousel/src/item.vue
index 9a0e292a9a..96c6c63d06 100644
--- a/packages/components/carousel/src/item.vue
+++ b/packages/components/carousel/src/item.vue
@@ -32,7 +32,7 @@ import {
   onUnmounted,
 } from 'vue'
 import { autoprefixer } from '@element-plus/utils/util'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import type { CSSProperties } from 'vue'
 import type { InjectCarouselScope, ICarouselItemProps } from './carousel'
diff --git a/packages/components/carousel/src/main.vue b/packages/components/carousel/src/main.vue
index 08373137f8..db518ab24e 100644
--- a/packages/components/carousel/src/main.vue
+++ b/packages/components/carousel/src/main.vue
@@ -83,7 +83,7 @@ import { ElIcon } from '@element-plus/components/icon'
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
 
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import type {
   ICarouselProps,
   CarouselItem,
diff --git a/packages/components/cascader-panel/index.ts b/packages/components/cascader-panel/index.ts
index c5da8c531d..f55797a129 100644
--- a/packages/components/cascader-panel/index.ts
+++ b/packages/components/cascader-panel/index.ts
@@ -1,6 +1,6 @@
 import CascaderPanel from './src/index.vue'
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 CascaderPanel.install = (app: App): void => {
   app.component(CascaderPanel.name, CascaderPanel)
diff --git a/packages/components/cascader-panel/src/index.vue b/packages/components/cascader-panel/src/index.vue
index 31746d38cd..f3adf4055c 100644
--- a/packages/components/cascader-panel/src/index.vue
+++ b/packages/components/cascader-panel/src/index.vue
@@ -28,14 +28,10 @@ import {
 import { isEqual } from 'lodash-unified'
 import { isClient } from '@vueuse/core'
 import { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import scrollIntoView from '@element-plus/utils/scroll-into-view'
-import {
-  arrayFlat,
-  coerceTruthyValueToArray,
-  deduplicate,
-  isEmpty,
-} from '@element-plus/utils/util'
+import { arrayFlat, coerceTruthyValueToArray } from '@element-plus/utils/util'
+import { isEmpty, unique } from '@element-plus/utils-v2'
 
 import ElCascaderMenu from './menu.vue'
 import Store from './store'
@@ -213,7 +209,7 @@ export default defineComponent({
         return
 
       if (lazy && !loaded) {
-        const values: CascaderNodeValue[] = deduplicate(
+        const values: CascaderNodeValue[] = unique(
           arrayFlat(coerceTruthyValueToArray(modelValue))
         )
         const nodes = values
@@ -231,7 +227,7 @@ export default defineComponent({
         const values = multiple
           ? coerceTruthyValueToArray(modelValue)
           : [modelValue]
-        const nodes = deduplicate(
+        const nodes = unique(
           values.map((val) => store?.getNodeByValue(val, leafOnly))
         ) as Node[]
         syncMenuState(nodes, false)
diff --git a/packages/components/cascader-panel/src/menu.vue b/packages/components/cascader-panel/src/menu.vue
index 6fd76c433f..7dfe3684cb 100644
--- a/packages/components/cascader-panel/src/menu.vue
+++ b/packages/components/cascader-panel/src/menu.vue
@@ -37,7 +37,7 @@
 import { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'
 import ElScrollbar from '@element-plus/components/scrollbar'
 import { useLocale } from '@element-plus/hooks'
-import { generateId } from '@element-plus/utils/util'
+import { generateId } from '@element-plus/utils-v2'
 import { Loading } from '@element-plus/icons-vue'
 import ElIcon from '@element-plus/components/icon'
 import ElCascaderNode from './node.vue'
@@ -45,7 +45,7 @@ import { CASCADER_PANEL_INJECTION_KEY } from './types'
 
 import type { default as CascaderNode } from './node'
 import type { PropType } from 'vue'
-import type { TimeoutHandle, Nullable } from '@element-plus/utils/types'
+import type { Nullable } from '@element-plus/utils/types'
 
 export default defineComponent({
   name: 'ElCascaderMenu',
@@ -73,7 +73,7 @@ export default defineComponent({
     const { t } = useLocale()
     const id = generateId()
     let activeNode: Nullable<HTMLElement> = null
-    let hoverTimer: Nullable<TimeoutHandle> = null
+    let hoverTimer: Nullable<number> = null
 
     const panel = inject(CASCADER_PANEL_INJECTION_KEY)!
 
diff --git a/packages/components/cascader-panel/src/node.ts b/packages/components/cascader-panel/src/node.ts
index 19ee4acec9..330f5a284c 100644
--- a/packages/components/cascader-panel/src/node.ts
+++ b/packages/components/cascader-panel/src/node.ts
@@ -1,5 +1,5 @@
 import { isFunction } from '@vue/shared'
-import { capitalize, isUndefined, isEmpty } from '@element-plus/utils/util'
+import { capitalize, isUndefined, isEmpty } from '@element-plus/utils-v2'
 import type { VNode } from 'vue'
 
 export type CascaderNodeValue = string | number
diff --git a/packages/components/cascader/index.ts b/packages/components/cascader/index.ts
index 15519a2a08..97ee5a06ad 100644
--- a/packages/components/cascader/index.ts
+++ b/packages/components/cascader/index.ts
@@ -1,6 +1,6 @@
 import Cascader from './src/index.vue'
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Cascader.install = (app: App): void => {
   app.component(Cascader.name, Cascader)
diff --git a/packages/components/cascader/src/index.vue b/packages/components/cascader/src/index.vue
index 72c5f0857d..3407248a73 100644
--- a/packages/components/cascader/src/index.vue
+++ b/packages/components/cascader/src/index.vue
@@ -185,13 +185,12 @@ import { ClickOutside as Clickoutside } from '@element-plus/directives'
 import { useLocale, useSize } from '@element-plus/hooks'
 
 import { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import {
   addResizeListener,
   removeResizeListener,
 } from '@element-plus/utils/resize-event'
-import { isValidComponentSize } from '@element-plus/utils/validators'
-import { isKorean } from '@element-plus/utils/isDef'
+import { isValidComponentSize, isKorean } from '@element-plus/utils-v2'
 import { CircleClose, Check, ArrowDown } from '@element-plus/icons-vue'
 
 import type { Options } from '@element-plus/components/popper'
@@ -202,7 +201,7 @@ import type {
   CascaderNode,
   Tag,
 } from '@element-plus/components/cascader-panel'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 type cascaderPanelType = InstanceType<typeof ElCascaderPanel>
 type tooltipType = InstanceType<typeof ElTooltip>
diff --git a/packages/components/check-tag/index.ts b/packages/components/check-tag/index.ts
index 01eb6394be..7421a0299d 100644
--- a/packages/components/check-tag/index.ts
+++ b/packages/components/check-tag/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import CheckTag from './src/check-tag.vue'
 
 export const ElCheckTag = withInstall(CheckTag)
diff --git a/packages/components/check-tag/src/check-tag.ts b/packages/components/check-tag/src/check-tag.ts
index 8010d9902f..a3a3582b7b 100644
--- a/packages/components/check-tag/src/check-tag.ts
+++ b/packages/components/check-tag/src/check-tag.ts
@@ -1,5 +1,4 @@
-import { isBool } from '@element-plus/utils/util'
-import { buildProps } from '@element-plus/utils/props'
+import { isBoolean, buildProps } from '@element-plus/utils-v2'
 import type CheckTag from './check-tag.vue'
 import type { ExtractPropTypes } from 'vue'
 
@@ -12,8 +11,8 @@ export const checkTagProps = buildProps({
 export type CheckTagProps = ExtractPropTypes<typeof checkTagProps>
 
 export const checkTagEmits = {
-  'update:checked': (value: boolean) => isBool(value),
-  change: (value: boolean) => isBool(value),
+  'update:checked': (value: boolean) => isBoolean(value),
+  change: (value: boolean) => isBoolean(value),
 }
 export type CheckTagEmits = typeof checkTagEmits
 
diff --git a/packages/components/checkbox/index.ts b/packages/components/checkbox/index.ts
index 60741cc2cc..8e25fc56fe 100644
--- a/packages/components/checkbox/index.ts
+++ b/packages/components/checkbox/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Checkbox from './src/checkbox.vue'
 import CheckboxButton from './src/checkbox-button.vue'
diff --git a/packages/components/checkbox/src/checkbox-button.vue b/packages/components/checkbox/src/checkbox-button.vue
index 3a1d889126..758b0d21a2 100644
--- a/packages/components/checkbox/src/checkbox-button.vue
+++ b/packages/components/checkbox/src/checkbox-button.vue
@@ -50,7 +50,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
 import { useCheckbox, useCheckboxGroup, useCheckboxProps } from './useCheckbox'
 
diff --git a/packages/components/checkbox/src/checkbox-group.vue b/packages/components/checkbox/src/checkbox-group.vue
index e9b86ff179..9d7638f5b1 100644
--- a/packages/components/checkbox/src/checkbox-group.vue
+++ b/packages/components/checkbox/src/checkbox-group.vue
@@ -9,13 +9,13 @@ import {
   h,
   renderSlot,
 } from 'vue'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { useSize, useNamespace } from '@element-plus/hooks'
 import { useCheckboxGroup } from './useCheckbox'
 
 import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export default defineComponent({
   name: 'ElCheckboxGroup',
diff --git a/packages/components/checkbox/src/checkbox.type.ts b/packages/components/checkbox/src/checkbox.type.ts
index 36dacf55b0..95a6f593da 100644
--- a/packages/components/checkbox/src/checkbox.type.ts
+++ b/packages/components/checkbox/src/checkbox.type.ts
@@ -1,5 +1,6 @@
 import type { ComputedRef } from 'vue'
-import type { AnyFunction, ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
+import type { AnyFunction } from '@element-plus/utils/types'
 export interface ICheckboxGroupInstance {
   name?: string
   modelValue?: ComputedRef
diff --git a/packages/components/checkbox/src/checkbox.vue b/packages/components/checkbox/src/checkbox.vue
index ea084b488b..34134aba4c 100644
--- a/packages/components/checkbox/src/checkbox.vue
+++ b/packages/components/checkbox/src/checkbox.vue
@@ -61,13 +61,13 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { useCheckbox } from './useCheckbox'
 
 import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export default defineComponent({
   name: 'ElCheckbox',
diff --git a/packages/components/checkbox/src/useCheckbox.ts b/packages/components/checkbox/src/useCheckbox.ts
index 259b357f94..edf95ae771 100644
--- a/packages/components/checkbox/src/useCheckbox.ts
+++ b/packages/components/checkbox/src/useCheckbox.ts
@@ -1,6 +1,6 @@
 import { ref, computed, inject, getCurrentInstance, watch } from 'vue'
 import { toTypeString } from '@vue/shared'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 
 import { useSize } from '@element-plus/hooks'
diff --git a/packages/components/col/index.ts b/packages/components/col/index.ts
index fb2ba5f909..bf30dad894 100644
--- a/packages/components/col/index.ts
+++ b/packages/components/col/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Col from './src/col'
 
diff --git a/packages/components/col/src/col.ts b/packages/components/col/src/col.ts
index 379f61339c..29971b4547 100644
--- a/packages/components/col/src/col.ts
+++ b/packages/components/col/src/col.ts
@@ -1,5 +1,5 @@
 import { defineComponent, computed, inject, h, renderSlot } from 'vue'
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import type { ExtractPropTypes, CSSProperties } from 'vue'
 
diff --git a/packages/components/collapse-transition/index.ts b/packages/components/collapse-transition/index.ts
index f41da82aa2..f2a0375b03 100644
--- a/packages/components/collapse-transition/index.ts
+++ b/packages/components/collapse-transition/index.ts
@@ -1,6 +1,6 @@
 import CollapseTransition from './src/collapse-transition.vue'
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 CollapseTransition.install = (app: App): void => {
   app.component(CollapseTransition.name, CollapseTransition)
diff --git a/packages/components/collapse/index.ts b/packages/components/collapse/index.ts
index f00251c701..688825f676 100644
--- a/packages/components/collapse/index.ts
+++ b/packages/components/collapse/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Collapse from './src/collapse.vue'
 import CollapseItem from './src/collapse-item.vue'
diff --git a/packages/components/collapse/src/collapse-item.vue b/packages/components/collapse/src/collapse-item.vue
index 6a2292a5b6..58e15e984c 100644
--- a/packages/components/collapse/src/collapse-item.vue
+++ b/packages/components/collapse/src/collapse-item.vue
@@ -50,7 +50,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, inject, computed, ref } from 'vue'
-import { generateId } from '@element-plus/utils/util'
+import { generateId } from '@element-plus/utils-v2'
 import ElCollapseTransition from '@element-plus/components/collapse-transition'
 import ElIcon from '@element-plus/components/icon'
 import { ArrowRight } from '@element-plus/icons-vue'
diff --git a/packages/components/collapse/src/collapse.vue b/packages/components/collapse/src/collapse.vue
index 3bee3dcc59..e4522204c8 100644
--- a/packages/components/collapse/src/collapse.vue
+++ b/packages/components/collapse/src/collapse.vue
@@ -6,9 +6,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch, provide } from 'vue'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
-import type { PropType } from 'vue'
 import type { CollapseProvider } from './collapse.type'
 
 export default defineComponent({
diff --git a/packages/components/color-picker/index.ts b/packages/components/color-picker/index.ts
index 7534a4e609..974f0a4a76 100644
--- a/packages/components/color-picker/index.ts
+++ b/packages/components/color-picker/index.ts
@@ -1,7 +1,7 @@
 import ColorPicker from './src/index.vue'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 ColorPicker.install = (app: App): void => {
   app.component(ColorPicker.name, ColorPicker)
diff --git a/packages/components/color-picker/src/color.ts b/packages/components/color-picker/src/color.ts
index 725a94c8c6..ff68f9097a 100644
--- a/packages/components/color-picker/src/color.ts
+++ b/packages/components/color-picker/src/color.ts
@@ -1,4 +1,4 @@
-import { hasOwn } from '@vue/shared'
+import { hasOwn } from '@element-plus/utils-v2'
 
 const hsv2hsl = function (hue: number, sat: number, val: number) {
   return [
diff --git a/packages/components/color-picker/src/index.vue b/packages/components/color-picker/src/index.vue
index 3e34678d60..6c2c7bc897 100644
--- a/packages/components/color-picker/src/index.vue
+++ b/packages/components/color-picker/src/index.vue
@@ -112,8 +112,8 @@ import { elFormItemKey, elFormKey } from '@element-plus/tokens'
 import { useLocale, useSize, useNamespace } from '@element-plus/hooks'
 import ElTooltip from '@element-plus/components/tooltip'
 import ElInput from '@element-plus/components/input'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { Close, ArrowDown } from '@element-plus/icons-vue'
 import AlphaSlider from './components/alpha-slider.vue'
 import HueSlider from './components/hue-slider.vue'
@@ -124,7 +124,7 @@ import { OPTIONS_KEY } from './useOption'
 
 import type { PropType } from 'vue'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 import type { IUseOptions } from './useOption'
 
 export default defineComponent({
diff --git a/packages/components/config-provider/index.ts b/packages/components/config-provider/index.ts
index d37b9e1ba4..6ea946301a 100644
--- a/packages/components/config-provider/index.ts
+++ b/packages/components/config-provider/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import ConfigProvider from './src/config-provider'
 
diff --git a/packages/components/config-provider/src/config-provider.ts b/packages/components/config-provider/src/config-provider.ts
index a1a916dfbe..d819c776a5 100644
--- a/packages/components/config-provider/src/config-provider.ts
+++ b/packages/components/config-provider/src/config-provider.ts
@@ -1,5 +1,5 @@
 import { defineComponent, renderSlot, watch } from 'vue'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import { provideGlobalConfig } from '@element-plus/hooks'
 import type { Language } from '@element-plus/locale'
 import type { ButtonConfigContext } from '@element-plus/components/button'
diff --git a/packages/components/container/index.ts b/packages/components/container/index.ts
index 05804894b6..a8a94fb3cd 100644
--- a/packages/components/container/index.ts
+++ b/packages/components/container/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Container from './src/container.vue'
 import Aside from './src/aside.vue'
diff --git a/packages/components/date-picker/index.ts b/packages/components/date-picker/index.ts
index 92643bb309..9762f8a0b9 100644
--- a/packages/components/date-picker/index.ts
+++ b/packages/components/date-picker/index.ts
@@ -1,7 +1,7 @@
 import DatePicker from './src/date-picker'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 const _DatePicker = DatePicker as SFCWithInstall<typeof DatePicker>
 
diff --git a/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts b/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
index 0c44f9c25c..f24765f0f8 100644
--- a/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
+++ b/packages/components/date-picker/src/date-picker-com/basic-cell-render.ts
@@ -1,5 +1,5 @@
 import { h, defineComponent, inject } from 'vue'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import { ROOT_PICKER_INJECTION_KEY } from '../date-picker.type'
 import type { DateCell } from '../date-picker.type'
 
diff --git a/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue b/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue
index a841b99f76..cb9e87b9e5 100644
--- a/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue
@@ -175,7 +175,7 @@ import {
 } from '@element-plus/components/time-picker'
 import { ElIcon } from '@element-plus/components/icon'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { isValidDatePickType } from '@element-plus/utils/validators'
+import { isValidDatePickType } from '@element-plus/utils-v2'
 import {
   DArrowLeft,
   ArrowLeft,
diff --git a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
index f4fbb4d211..6eebec943c 100644
--- a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
@@ -245,7 +245,7 @@ import {
   TimePickPanel,
 } from '@element-plus/components/time-picker'
 import ElIcon from '@element-plus/components/icon'
-import { isValidDatePickType } from '@element-plus/utils/validators'
+import { isValidDatePickType } from '@element-plus/utils-v2'
 import {
   DArrowLeft,
   ArrowLeft,
diff --git a/packages/components/descriptions/index.ts b/packages/components/descriptions/index.ts
index 0e32af2590..9d0cf28949 100644
--- a/packages/components/descriptions/index.ts
+++ b/packages/components/descriptions/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Descriptions from './src/index.vue'
 import DescriptionsItem from './src/description-item'
diff --git a/packages/components/descriptions/src/descriptions-cell.ts b/packages/components/descriptions/src/descriptions-cell.ts
index 57b4e7a5cf..0fe8c26264 100644
--- a/packages/components/descriptions/src/descriptions-cell.ts
+++ b/packages/components/descriptions/src/descriptions-cell.ts
@@ -1,6 +1,5 @@
 import { defineComponent, h, inject } from 'vue'
-import { addUnit } from '@element-plus/utils/util'
-import { getNormalizedProps } from '@element-plus/utils/vnode'
+import { addUnit, getNormalizedProps } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { elDescriptionsKey } from './token'
 
diff --git a/packages/components/descriptions/src/descriptions.type.ts b/packages/components/descriptions/src/descriptions.type.ts
index 78055ea5bb..58a86b9490 100644
--- a/packages/components/descriptions/src/descriptions.type.ts
+++ b/packages/components/descriptions/src/descriptions.type.ts
@@ -1,4 +1,4 @@
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export interface IDescriptionsInject {
   border: boolean
diff --git a/packages/components/descriptions/src/index.vue b/packages/components/descriptions/src/index.vue
index 8de34bbac1..d911fb3afa 100644
--- a/packages/components/descriptions/src/index.vue
+++ b/packages/components/descriptions/src/index.vue
@@ -26,13 +26,13 @@
 
 <script lang="ts">
 import { computed, defineComponent, provide } from 'vue'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { useSize, useNamespace } from '@element-plus/hooks'
 import DescriptionsRow from './descriptions-row.vue'
 import { elDescriptionsKey } from './token'
 
 import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export default defineComponent({
   name: 'ElDescriptions',
diff --git a/packages/components/dialog/__tests__/dialog.spec.ts b/packages/components/dialog/__tests__/dialog.spec.ts
index 57c5bfd18c..9d8fad8910 100644
--- a/packages/components/dialog/__tests__/dialog.spec.ts
+++ b/packages/components/dialog/__tests__/dialog.spec.ts
@@ -7,7 +7,7 @@ import Dialog from '../'
 
 const AXIOM = 'Rem is the best girl'
 
-const _mount = ({ slots, ...rest }: Indexable<any>) => {
+const _mount = ({ slots, ...rest }: Record<string, any>) => {
   return mount(Dialog, {
     slots: {
       default: AXIOM,
diff --git a/packages/components/dialog/index.ts b/packages/components/dialog/index.ts
index 90f31b0b67..4ead67ffd3 100644
--- a/packages/components/dialog/index.ts
+++ b/packages/components/dialog/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Dialog from './src/dialog.vue'
 
 export const ElDialog = withInstall(Dialog)
diff --git a/packages/components/dialog/src/dialog.ts b/packages/components/dialog/src/dialog.ts
index 79a0c960e9..d7e06758ce 100644
--- a/packages/components/dialog/src/dialog.ts
+++ b/packages/components/dialog/src/dialog.ts
@@ -1,7 +1,10 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-
-import type { ExtractPropTypes, Component } from 'vue'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+} from '@element-plus/utils-v2'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import type { ExtractPropTypes } from 'vue'
 
 export const dialogProps = buildProps({
   appendToBody: {
@@ -24,7 +27,7 @@ export const dialogProps = buildProps({
     default: '',
   },
   closeIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   closeOnClickModal: {
diff --git a/packages/components/dialog/src/dialog.vue b/packages/components/dialog/src/dialog.vue
index 7795322413..7759bbdf01 100644
--- a/packages/components/dialog/src/dialog.vue
+++ b/packages/components/dialog/src/dialog.vue
@@ -73,7 +73,7 @@ import { computed, defineComponent, ref } from 'vue'
 import { TrapFocus } from '@element-plus/directives'
 import { ElOverlay } from '@element-plus/components/overlay'
 import { ElIcon } from '@element-plus/components/icon'
-import { CloseComponents } from '@element-plus/utils/icon'
+import { CloseComponents } from '@element-plus/utils-v2'
 import { useNamespace, useDraggable, useSameTarget } from '@element-plus/hooks'
 import { dialogProps, dialogEmits } from './dialog'
 import { useDialog } from './use-dialog'
diff --git a/packages/components/dialog/src/use-dialog.ts b/packages/components/dialog/src/use-dialog.ts
index b5f4dee046..df2c5e7032 100644
--- a/packages/components/dialog/src/use-dialog.ts
+++ b/packages/components/dialog/src/use-dialog.ts
@@ -7,8 +7,8 @@ import {
   useModal,
   useZIndex,
 } from '@element-plus/hooks'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isNumber } from '@element-plus/utils/util'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { isNumber } from '@element-plus/utils-v2'
 
 import type { CSSProperties, Ref, SetupContext } from 'vue'
 import type { DialogEmits, DialogProps } from './dialog'
diff --git a/packages/components/divider/index.ts b/packages/components/divider/index.ts
index ea484f6673..0af19ceae4 100644
--- a/packages/components/divider/index.ts
+++ b/packages/components/divider/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Divider from './src/divider.vue'
 
diff --git a/packages/components/divider/src/divider.ts b/packages/components/divider/src/divider.ts
index a9f9386794..db937796d8 100644
--- a/packages/components/divider/src/divider.ts
+++ b/packages/components/divider/src/divider.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type Divider from './divider.vue'
 
diff --git a/packages/components/drawer/index.ts b/packages/components/drawer/index.ts
index ad2828d931..cf83042aaa 100644
--- a/packages/components/drawer/index.ts
+++ b/packages/components/drawer/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Drawer from './src/drawer.vue'
 
 export const ElDrawer = withInstall(Drawer)
diff --git a/packages/components/drawer/src/drawer.ts b/packages/components/drawer/src/drawer.ts
index 9d3b6fb327..07068273eb 100644
--- a/packages/components/drawer/src/drawer.ts
+++ b/packages/components/drawer/src/drawer.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import { dialogProps, dialogEmits } from '@element-plus/components/dialog'
 import type { ExtractPropTypes } from 'vue'
 
diff --git a/packages/components/dropdown/index.ts b/packages/components/dropdown/index.ts
index e1b535c6ec..4674113186 100644
--- a/packages/components/dropdown/index.ts
+++ b/packages/components/dropdown/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Dropdown from './src/dropdown.vue'
 import DropdownItem from './src/dropdown-item.vue'
diff --git a/packages/components/dropdown/src/dropdown.ts b/packages/components/dropdown/src/dropdown.ts
index db2bfc7153..5c016116c8 100644
--- a/packages/components/dropdown/src/dropdown.ts
+++ b/packages/components/dropdown/src/dropdown.ts
@@ -1,5 +1,9 @@
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+} from '@element-plus/utils-v2'
 import { createCollectionWithScope } from '@element-plus/components/collection'
 import {
   useTooltipTriggerProps,
@@ -9,7 +13,7 @@ import type { Options } from '@popperjs/core'
 
 import type { ButtonType } from '@element-plus/components/button'
 import type { Placement } from '@element-plus/components/popper'
-import type { ComponentInternalInstance, Component, ComputedRef } from 'vue'
+import type { ComponentInternalInstance, ComputedRef } from 'vue'
 import type { Nullable } from '@element-plus/utils/types'
 
 export interface IElDropdownInstance {
@@ -87,7 +91,7 @@ export const dropdownItemProps = buildProps({
   divided: Boolean,
   textValue: String,
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
   },
 } as const)
 
diff --git a/packages/components/dropdown/src/dropdown.vue b/packages/components/dropdown/src/dropdown.vue
index c521840af9..76a8ab171e 100644
--- a/packages/components/dropdown/src/dropdown.vue
+++ b/packages/components/dropdown/src/dropdown.vue
@@ -89,7 +89,7 @@ import ElScrollbar from '@element-plus/components/scrollbar'
 import ElIcon from '@element-plus/components/icon'
 import ElFocusTrap from '@element-plus/components/focus-trap'
 import ElRovingFocusGroup from '@element-plus/components/roving-focus-group'
-import { addUnit } from '@element-plus/utils/util'
+import { addUnit } from '@element-plus/utils-v2'
 import { ArrowDown } from '@element-plus/icons-vue'
 import { useSize } from '@element-plus/hooks'
 import { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'
diff --git a/packages/components/dropdown/src/useDropdown.ts b/packages/components/dropdown/src/useDropdown.ts
index 91bdfbc2b1..33452d3b48 100644
--- a/packages/components/dropdown/src/useDropdown.ts
+++ b/packages/components/dropdown/src/useDropdown.ts
@@ -1,5 +1,5 @@
 import { inject, computed, ref } from 'vue'
-import { generateId } from '@element-plus/utils/util'
+import { generateId } from '@element-plus/utils-v2'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { on, addClass } from '@element-plus/utils/dom'
 
diff --git a/packages/components/empty/index.ts b/packages/components/empty/index.ts
index ef2b1567a0..ac8e86427a 100644
--- a/packages/components/empty/index.ts
+++ b/packages/components/empty/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Empty from './src/empty.vue'
 
diff --git a/packages/components/form/index.ts b/packages/components/form/index.ts
index ea6e2bb0a4..3cd22bc541 100644
--- a/packages/components/form/index.ts
+++ b/packages/components/form/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 import Form from './src/form.vue'
 import FormItem from './src/form-item.vue'
 
diff --git a/packages/components/form/src/form-item.vue b/packages/components/form/src/form-item.vue
index 22dd752798..5033cd4f19 100644
--- a/packages/components/form/src/form-item.vue
+++ b/packages/components/form/src/form-item.vue
@@ -53,14 +53,14 @@ import {
 } from 'vue'
 import { NOOP } from '@vue/shared'
 import AsyncValidator from 'async-validator'
-import { addUnit, getPropByPath } from '@element-plus/utils/util'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { addUnit, isValidComponentSize } from '@element-plus/utils-v2'
+import { getPropByPath } from '@element-plus/utils/util'
 import { elFormItemKey, elFormKey } from '@element-plus/tokens'
 import { useSize } from '@element-plus/hooks'
 import LabelWrap from './label-wrap'
 
 import type { PropType, CSSProperties } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 import type { ElFormContext, ValidateFieldCallback } from '@element-plus/tokens'
 import type { FormItemRule } from './form.type'
 
diff --git a/packages/components/form/src/form.vue b/packages/components/form/src/form.vue
index 0396037b4d..6ab4006b5d 100644
--- a/packages/components/form/src/form.vue
+++ b/packages/components/form/src/form.vue
@@ -15,12 +15,12 @@ import {
   watch,
 } from 'vue'
 import { elFormKey } from '@element-plus/tokens'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import { useSize } from '@element-plus/hooks'
 import type { ValidateFieldsError } from 'async-validator'
 
 import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 import type { FormRulesMap } from './form.type'
 import type {
   ElFormItemContext as FormItemCtx,
diff --git a/packages/components/icon/index.ts b/packages/components/icon/index.ts
index afb6772ee8..67c88e3b54 100644
--- a/packages/components/icon/index.ts
+++ b/packages/components/icon/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Icon from './src/icon.vue'
 
diff --git a/packages/components/icon/src/icon.ts b/packages/components/icon/src/icon.ts
index 7d3ebd8568..b71786bb94 100644
--- a/packages/components/icon/src/icon.ts
+++ b/packages/components/icon/src/icon.ts
@@ -1,4 +1,4 @@
-import { definePropType, buildProps } from '@element-plus/utils/props'
+import { definePropType, buildProps } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type Icon from './icon.vue'
 
diff --git a/packages/components/icon/src/icon.vue b/packages/components/icon/src/icon.vue
index fc430c3bac..6bdf15a2d8 100644
--- a/packages/components/icon/src/icon.vue
+++ b/packages/components/icon/src/icon.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { addUnit, isUndefined } from '@element-plus/utils/util'
+import { isUndefined, addUnit } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { iconProps } from './icon'
 
diff --git a/packages/components/image-viewer/index.ts b/packages/components/image-viewer/index.ts
index 26947e75af..7cf4427cb5 100644
--- a/packages/components/image-viewer/index.ts
+++ b/packages/components/image-viewer/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import ImageViewer from './src/image-viewer.vue'
 
diff --git a/packages/components/image-viewer/src/image-viewer.ts b/packages/components/image-viewer/src/image-viewer.ts
index 3e4ceed343..1cdec0c20b 100644
--- a/packages/components/image-viewer/src/image-viewer.ts
+++ b/packages/components/image-viewer/src/image-viewer.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 
 export const imageViewerProps = buildProps({
diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue
index bfc6a685db..f5989e141a 100644
--- a/packages/components/image-viewer/src/image-viewer.vue
+++ b/packages/components/image-viewer/src/image-viewer.vue
@@ -93,7 +93,8 @@ import { useEventListener } from '@vueuse/core'
 import ElIcon from '@element-plus/components/icon'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { rafThrottle, isFirefox } from '@element-plus/utils/util'
+import { isFirefox } from '@element-plus/utils-v2'
+import { rafThrottle } from '@element-plus/utils/util'
 import {
   Close,
   ArrowLeft,
diff --git a/packages/components/image/index.ts b/packages/components/image/index.ts
index 5d2d2c12c7..4bd3285e15 100644
--- a/packages/components/image/index.ts
+++ b/packages/components/image/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Image from './src/image.vue'
 
diff --git a/packages/components/image/src/image.ts b/packages/components/image/src/image.ts
index f32fcab63b..34aff28baf 100644
--- a/packages/components/image/src/image.ts
+++ b/packages/components/image/src/image.ts
@@ -1,5 +1,9 @@
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
-import { isNumber } from '@element-plus/utils/util'
+import {
+  buildProps,
+  definePropType,
+  mutable,
+  isNumber,
+} from '@element-plus/utils-v2'
 
 import type { ExtractPropTypes } from 'vue'
 
diff --git a/packages/components/infinite-scroll/index.ts b/packages/components/infinite-scroll/index.ts
index eacc77a30f..04bceb6e0e 100644
--- a/packages/components/infinite-scroll/index.ts
+++ b/packages/components/infinite-scroll/index.ts
@@ -1,7 +1,7 @@
 import InfiniteScroll from './src/index'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 const _InfiniteScroll = InfiniteScroll as SFCWithInstall<typeof InfiniteScroll>
 
diff --git a/packages/components/infinite-scroll/src/index.ts b/packages/components/infinite-scroll/src/index.ts
index a1d44f224c..594b02f3ec 100644
--- a/packages/components/infinite-scroll/src/index.ts
+++ b/packages/components/infinite-scroll/src/index.ts
@@ -5,7 +5,7 @@ import {
   getScrollContainer,
   getOffsetTopDistance,
 } from '@element-plus/utils/dom'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 
 import type { ObjectDirective, ComponentPublicInstance } from 'vue'
 
diff --git a/packages/components/input-number/index.ts b/packages/components/input-number/index.ts
index 977cfbc776..e8877d5d8b 100644
--- a/packages/components/input-number/index.ts
+++ b/packages/components/input-number/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import InputNumber from './src/input-number.vue'
 
 export const ElInputNumber = withInstall(InputNumber)
diff --git a/packages/components/input-number/src/input-number.ts b/packages/components/input-number/src/input-number.ts
index 55d503dd3c..628b27ef8b 100644
--- a/packages/components/input-number/src/input-number.ts
+++ b/packages/components/input-number/src/input-number.ts
@@ -1,5 +1,5 @@
-import { buildProps, componentSize } from '@element-plus/utils/props'
-import { isNumber } from '@element-plus/utils/util'
+import { buildProps, isNumber } from '@element-plus/utils-v2'
+import { componentSizes } from '@element-plus/constants'
 
 export const inputNumberProps = buildProps({
   step: {
@@ -27,7 +27,7 @@ export const inputNumberProps = buildProps({
   },
   size: {
     type: String,
-    values: componentSize,
+    values: componentSizes,
   },
   controls: {
     type: Boolean,
diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue
index 4a62c26901..c67a152fdf 100644
--- a/packages/components/input-number/src/input-number.vue
+++ b/packages/components/input-number/src/input-number.vue
@@ -75,8 +75,7 @@ import {
   useNamespace,
 } from '@element-plus/hooks'
 import ElInput from '@element-plus/components/input'
-import { isNumber } from '@element-plus/utils/util'
-import { debugWarn } from '@element-plus/utils/error'
+import { isNumber, debugWarn } from '@element-plus/utils-v2'
 import { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'
 import { inputNumberProps, inputNumberEmits } from './input-number'
 
diff --git a/packages/components/input/index.ts b/packages/components/input/index.ts
index 8ed5c890cc..12c9bfcefd 100644
--- a/packages/components/input/index.ts
+++ b/packages/components/input/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Input from './src/input.vue'
 
diff --git a/packages/components/input/src/calc-textarea-height.ts b/packages/components/input/src/calc-textarea-height.ts
index 075afa011b..536551da68 100644
--- a/packages/components/input/src/calc-textarea-height.ts
+++ b/packages/components/input/src/calc-textarea-height.ts
@@ -1,4 +1,4 @@
-import { isNumber } from '@element-plus/utils/util'
+import { isNumber } from '@element-plus/utils-v2'
 
 let hiddenTextarea: HTMLTextAreaElement | undefined = undefined
 
diff --git a/packages/components/input/src/input.ts b/packages/components/input/src/input.ts
index 32a890da22..823c1f7a54 100644
--- a/packages/components/input/src/input.ts
+++ b/packages/components/input/src/input.ts
@@ -1,9 +1,13 @@
 import { isString } from '@vue/shared'
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+  mutable,
+} from '@element-plus/utils-v2'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useSizeProp } from '@element-plus/hooks'
-import type { StyleValue } from '@element-plus/utils/types'
-import type { ExtractPropTypes, Component } from 'vue'
+import type { StyleValue, ExtractPropTypes } from 'vue'
 
 type AutoSize = { minRows?: number; maxRows?: number } | boolean
 
@@ -54,11 +58,11 @@ export const inputProps = buildProps({
     default: false,
   },
   suffixIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   prefixIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   label: {
diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
index bc277a5ccd..bae5a70ee8 100644
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@@ -148,7 +148,11 @@ import {
 import { isClient } from '@vueuse/core'
 import { ElIcon } from '@element-plus/components/icon'
 import { CircleClose, View as IconView } from '@element-plus/icons-vue'
-import { ValidateComponentsMap } from '@element-plus/utils/icon'
+import {
+  ValidateComponentsMap,
+  isObject,
+  isKorean,
+} from '@element-plus/utils-v2'
 import {
   useAttrs,
   useDisabled,
@@ -156,13 +160,11 @@ import {
   useSize,
   useNamespace,
 } from '@element-plus/hooks'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isObject } from '@element-plus/utils/util'
-import { isKorean } from '@element-plus/utils/isDef'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { calcTextareaHeight } from './calc-textarea-height'
 import { inputProps, inputEmits } from './input'
 
-import type { StyleValue } from '@element-plus/utils/types'
+import type { StyleValue } from 'vue'
 
 type TargetElement = HTMLInputElement | HTMLTextAreaElement
 
diff --git a/packages/components/link/index.ts b/packages/components/link/index.ts
index 64bcf56f4b..870dcc093c 100644
--- a/packages/components/link/index.ts
+++ b/packages/components/link/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Link from './src/link.vue'
 
diff --git a/packages/components/link/src/link.ts b/packages/components/link/src/link.ts
index 0fc8fa890e..927a520d26 100644
--- a/packages/components/link/src/link.ts
+++ b/packages/components/link/src/link.ts
@@ -1,5 +1,5 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import type { Component, ExtractPropTypes } from 'vue'
+import { buildProps, iconPropType } from '@element-plus/utils-v2'
+import type { ExtractPropTypes } from 'vue'
 import type Link from './link.vue'
 
 export const linkProps = buildProps({
@@ -15,7 +15,7 @@ export const linkProps = buildProps({
   disabled: { type: Boolean, default: false },
   href: { type: String, default: '' },
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
 } as const)
diff --git a/packages/components/menu/index.ts b/packages/components/menu/index.ts
index 1011a0be37..eaeeef96e5 100644
--- a/packages/components/menu/index.ts
+++ b/packages/components/menu/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Menu from './src/menu'
 import MenuItem from './src/menu-item.vue'
diff --git a/packages/components/menu/src/menu-item-group.vue b/packages/components/menu/src/menu-item-group.vue
index 3fe0d4b1ca..227ccebfdc 100644
--- a/packages/components/menu/src/menu-item-group.vue
+++ b/packages/components/menu/src/menu-item-group.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, getCurrentInstance, inject } from 'vue'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 import { menuItemGroupProps } from './menu-item-group'
 
 import type { MenuProvider } from './types'
diff --git a/packages/components/menu/src/menu-item.ts b/packages/components/menu/src/menu-item.ts
index 47415a0cc6..c8d9cbdc7d 100644
--- a/packages/components/menu/src/menu-item.ts
+++ b/packages/components/menu/src/menu-item.ts
@@ -1,5 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import { isString } from '@element-plus/utils/util'
+import { buildProps, definePropType, isString } from '@element-plus/utils-v2'
 
 import type { ExtractPropTypes } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
diff --git a/packages/components/menu/src/menu-item.vue b/packages/components/menu/src/menu-item.vue
index a1c198aab8..7cf8cf32cb 100644
--- a/packages/components/menu/src/menu-item.vue
+++ b/packages/components/menu/src/menu-item.vue
@@ -58,7 +58,7 @@ import {
 } from 'vue'
 import ElTooltip from '@element-plus/components/tooltip'
 import { Effect } from '@element-plus/components/popper'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 import useMenu from './use-menu'
 import { menuItemEmits, menuItemProps } from './menu-item'
 
diff --git a/packages/components/menu/src/menu.ts b/packages/components/menu/src/menu.ts
index 3d3bd4429c..3d061d50dd 100644
--- a/packages/components/menu/src/menu.ts
+++ b/packages/components/menu/src/menu.ts
@@ -15,8 +15,13 @@ import { Resize } from '@element-plus/directives'
 import ElIcon from '@element-plus/components/icon'
 import { More } from '@element-plus/icons-vue'
 import Menubar from '@element-plus/utils/menu/menu-bar'
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
-import { isString, isObject } from '@element-plus/utils/util'
+import {
+  buildProps,
+  definePropType,
+  mutable,
+  isString,
+  isObject,
+} from '@element-plus/utils-v2'
 import ElMenuCollapseTransition from './menu-collapse-transition.vue'
 import ElSubMenu from './sub-menu'
 import { useMenuCssVar } from './use-menu-css-var'
diff --git a/packages/components/menu/src/sub-menu.ts b/packages/components/menu/src/sub-menu.ts
index f0af91a6b7..1473473882 100644
--- a/packages/components/menu/src/sub-menu.ts
+++ b/packages/components/menu/src/sub-menu.ts
@@ -17,8 +17,7 @@ import {
 import { useTimeoutFn } from '@vueuse/core'
 import ElCollapseTransition from '@element-plus/components/collapse-transition'
 import ElTooltip from '@element-plus/components/tooltip'
-import { buildProps } from '@element-plus/utils/props'
-import { throwError } from '@element-plus/utils/error'
+import { buildProps, throwError } from '@element-plus/utils-v2'
 import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
 import { ElIcon } from '@element-plus/components/icon'
 import useMenu from './use-menu'
diff --git a/packages/components/menu/src/use-menu.ts b/packages/components/menu/src/use-menu.ts
index cbad067ec0..f9293db690 100644
--- a/packages/components/menu/src/use-menu.ts
+++ b/packages/components/menu/src/use-menu.ts
@@ -1,5 +1,5 @@
 import { computed, inject } from 'vue'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 
 import type { ComponentInternalInstance, Ref, CSSProperties } from 'vue'
 import type { MenuProvider } from './types'
diff --git a/packages/components/message-box/index.ts b/packages/components/message-box/index.ts
index f12ffa52ef..c4bd456774 100644
--- a/packages/components/message-box/index.ts
+++ b/packages/components/message-box/index.ts
@@ -1,7 +1,7 @@
 import MessageBox from './src/messageBox'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 const _MessageBox = MessageBox as SFCWithInstall<typeof MessageBox>
 
diff --git a/packages/components/message-box/src/index.vue b/packages/components/message-box/src/index.vue
index 8f89f1178c..99d7f6e58a 100644
--- a/packages/components/message-box/src/index.vue
+++ b/packages/components/message-box/src/index.vue
@@ -154,9 +154,12 @@ import ElInput from '@element-plus/components/input'
 import { ElOverlay } from '@element-plus/components/overlay'
 import { on, off } from '@element-plus/utils/dom'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import {
+  isValidComponentSize,
+  TypeComponents,
+  TypeComponentsMap,
+} from '@element-plus/utils-v2'
 import { ElIcon } from '@element-plus/components/icon'
-import { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'
 
 import type { PropType } from 'vue'
 import type { ComponentSize } from '@element-plus/utils/types'
diff --git a/packages/components/message-box/src/messageBox.ts b/packages/components/message-box/src/messageBox.ts
index 955f103a65..b6ecfb6bba 100644
--- a/packages/components/message-box/src/messageBox.ts
+++ b/packages/components/message-box/src/messageBox.ts
@@ -1,7 +1,6 @@
 import { h, watch, render } from 'vue'
-import { hasOwn } from '@vue/shared'
 import { isClient } from '@vueuse/core'
-import { isVNode, isString } from '@element-plus/utils/util'
+import { isVNode, isString, hasOwn } from '@element-plus/utils-v2'
 import MessageBoxConstructor from './index.vue'
 
 import type { ComponentPublicInstance, VNode } from 'vue'
diff --git a/packages/components/message/__tests__/message.spec.ts b/packages/components/message/__tests__/message.spec.ts
index 5c8f9b45b6..0068ff1230 100644
--- a/packages/components/message/__tests__/message.spec.ts
+++ b/packages/components/message/__tests__/message.spec.ts
@@ -2,7 +2,7 @@ import { h, nextTick } from 'vue'
 import makeMount from '@element-plus/test-utils/make-mount'
 import { rAF } from '@element-plus/test-utils/tick'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { TypeComponentsMap } from '@element-plus/utils/icon'
+import { TypeComponentsMap } from '@element-plus/utils-v2'
 import Message from '../src/message.vue'
 import type { ComponentPublicInstance, CSSProperties, Component } from 'vue'
 
diff --git a/packages/components/message/index.ts b/packages/components/message/index.ts
index 91ac3af3e8..7d811335f3 100644
--- a/packages/components/message/index.ts
+++ b/packages/components/message/index.ts
@@ -1,4 +1,4 @@
-import { withInstallFunction } from '@element-plus/utils/with-install'
+import { withInstallFunction } from '@element-plus/utils-v2'
 
 import Message from './src/message-method'
 
diff --git a/packages/components/message/src/message-method.ts b/packages/components/message/src/message-method.ts
index 60c55b5185..a78298aa82 100644
--- a/packages/components/message/src/message-method.ts
+++ b/packages/components/message/src/message-method.ts
@@ -1,8 +1,7 @@
 import { createVNode, render } from 'vue'
 import { isClient } from '@vueuse/core'
-import { isVNode, isNumber } from '@element-plus/utils/util'
+import { isVNode, isNumber, debugWarn } from '@element-plus/utils-v2'
 import { useZIndex } from '@element-plus/hooks'
-import { debugWarn } from '@element-plus/utils/error'
 import { messageConfig } from '@element-plus/components/config-provider/src/config-provider'
 import MessageConstructor from './message.vue'
 import { messageTypes } from './message'
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index 041317117b..586c8950a5 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -1,6 +1,9 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-
-import type { VNode, ExtractPropTypes, Component } from 'vue'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+} from '@element-plus/utils-v2'
+import type { VNode, ExtractPropTypes } from 'vue'
 
 export const messageTypes = ['success', 'info', 'warning', 'error'] as const
 
@@ -26,7 +29,7 @@ export const messageProps = buildProps({
     default: 3000,
   },
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   id: {
diff --git a/packages/components/message/src/message.vue b/packages/components/message/src/message.vue
index dfe5acc024..a2b8ced638 100644
--- a/packages/components/message/src/message.vue
+++ b/packages/components/message/src/message.vue
@@ -48,7 +48,7 @@ import { useEventListener, useTimeoutFn } from '@vueuse/core'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import ElBadge from '@element-plus/components/badge'
 import { ElIcon } from '@element-plus/components/icon'
-import { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'
+import { TypeComponents, TypeComponentsMap } from '@element-plus/utils-v2'
 
 import { useNamespace } from '@element-plus/hooks'
 import { messageEmits, messageProps } from './message'
diff --git a/packages/components/notification/__tests__/notification.spec.ts b/packages/components/notification/__tests__/notification.spec.ts
index e3031879b3..f8902cac05 100644
--- a/packages/components/notification/__tests__/notification.spec.ts
+++ b/packages/components/notification/__tests__/notification.spec.ts
@@ -2,7 +2,7 @@ import { h, nextTick } from 'vue'
 import { rAF } from '@element-plus/test-utils/tick'
 import makeMount from '@element-plus/test-utils/make-mount'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { TypeComponentsMap } from '@element-plus/utils/icon'
+import { TypeComponentsMap } from '@element-plus/utils-v2'
 import { useZIndex } from '@element-plus/hooks'
 import Notification from '../src/notification.vue'
 
diff --git a/packages/components/notification/index.ts b/packages/components/notification/index.ts
index b418f764bb..b1cd2b6647 100644
--- a/packages/components/notification/index.ts
+++ b/packages/components/notification/index.ts
@@ -1,4 +1,4 @@
-import { withInstallFunction } from '@element-plus/utils/with-install'
+import { withInstallFunction } from '@element-plus/utils-v2'
 
 import Notify from './src/notify'
 
diff --git a/packages/components/notification/src/notification.ts b/packages/components/notification/src/notification.ts
index 2c421a2377..829f34ce7a 100644
--- a/packages/components/notification/src/notification.ts
+++ b/packages/components/notification/src/notification.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 
 import type { VNode, ExtractPropTypes } from 'vue'
 
diff --git a/packages/components/notification/src/notification.vue b/packages/components/notification/src/notification.vue
index 73cc670f19..7a3a5665c5 100644
--- a/packages/components/notification/src/notification.vue
+++ b/packages/components/notification/src/notification.vue
@@ -43,7 +43,7 @@ import { defineComponent, computed, ref, onMounted } from 'vue'
 import { useEventListener, useTimeoutFn } from '@vueuse/core'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { ElIcon } from '@element-plus/components/icon'
-import { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'
+import { TypeComponents, TypeComponentsMap } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { notificationProps, notificationEmits } from './notification'
 
diff --git a/packages/components/notification/src/notify.ts b/packages/components/notification/src/notify.ts
index defd14ba68..025dc9df60 100644
--- a/packages/components/notification/src/notify.ts
+++ b/packages/components/notification/src/notify.ts
@@ -1,8 +1,7 @@
 import { createVNode, render } from 'vue'
 import { isClient } from '@vueuse/core'
 import { useZIndex } from '@element-plus/hooks'
-import { isVNode } from '@element-plus/utils/util'
-import { debugWarn } from '@element-plus/utils/error'
+import { isVNode, debugWarn } from '@element-plus/utils-v2'
 import NotificationConstructor from './notification.vue'
 import { notificationTypes } from './notification'
 
diff --git a/packages/components/overlay/src/overlay.ts b/packages/components/overlay/src/overlay.ts
index 57d6e449c0..10b8ff0816 100644
--- a/packages/components/overlay/src/overlay.ts
+++ b/packages/components/overlay/src/overlay.ts
@@ -1,7 +1,6 @@
 import { createVNode, defineComponent, renderSlot, h } from 'vue'
-import { PatchFlags } from '@element-plus/utils/vnode'
+import { PatchFlags, buildProps, definePropType } from '@element-plus/utils-v2'
 import { useNamespace, useSameTarget } from '@element-plus/hooks'
-import { buildProps, definePropType } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes, CSSProperties } from 'vue'
 import type { ZIndexProperty } from 'csstype'
diff --git a/packages/components/page-header/index.ts b/packages/components/page-header/index.ts
index f78f4be13d..597a2f7f92 100644
--- a/packages/components/page-header/index.ts
+++ b/packages/components/page-header/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import PageHeader from './src/page-header.vue'
 
diff --git a/packages/components/pagination/index.ts b/packages/components/pagination/index.ts
index ea97112bb4..9015861a4f 100644
--- a/packages/components/pagination/index.ts
+++ b/packages/components/pagination/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Pagination from './src/pagination'
 
diff --git a/packages/components/pagination/src/components/sizes.vue b/packages/components/pagination/src/components/sizes.vue
index 14d90b07b4..7d6439d5dc 100644
--- a/packages/components/pagination/src/components/sizes.vue
+++ b/packages/components/pagination/src/components/sizes.vue
@@ -22,7 +22,7 @@ import { defineComponent, watch, computed, ref } from 'vue'
 import { isEqual } from 'lodash-unified'
 import { ElSelect, ElOption } from '@element-plus/components/select'
 import { useLocale } from '@element-plus/hooks'
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils-v2'
 import { usePagination } from '../usePagination'
 
 import type { Nullable } from '@element-plus/utils/types'
diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts
index cbf0229461..1e49314c8f 100644
--- a/packages/components/pagination/src/pagination.ts
+++ b/packages/components/pagination/src/pagination.ts
@@ -8,8 +8,12 @@ import {
   watch,
 } from 'vue'
 import { useLocale } from '@element-plus/hooks'
-import { debugWarn } from '@element-plus/utils/error'
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import {
+  debugWarn,
+  buildProps,
+  definePropType,
+  mutable,
+} from '@element-plus/utils-v2'
 import { elPaginationKey } from '@element-plus/tokens'
 
 import Prev from './components/prev.vue'
diff --git a/packages/components/popconfirm/index.ts b/packages/components/popconfirm/index.ts
index 606f30ec55..589f404d1a 100644
--- a/packages/components/popconfirm/index.ts
+++ b/packages/components/popconfirm/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Popconfirm from './src/popconfirm.vue'
 
diff --git a/packages/components/popconfirm/src/popconfirm.ts b/packages/components/popconfirm/src/popconfirm.ts
index 45ad6d6332..958e1a6555 100644
--- a/packages/components/popconfirm/src/popconfirm.ts
+++ b/packages/components/popconfirm/src/popconfirm.ts
@@ -1,54 +1,55 @@
 import { buttonType } from '@element-plus/components/button'
 import { QuestionFilled } from '@element-plus/icons-vue'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+} from '@element-plus/utils-v2'
 import { useTooltipContentProps } from '@element-plus/components/tooltip'
-
 import type { Component, ExtractPropTypes } from 'vue'
 
-export const popconfirmProps = {
-  ...buildProps({
-    title: {
-      type: String,
-    },
-    confirmButtonText: {
-      type: String,
-    },
-    cancelButtonText: {
-      type: String,
-    },
-    confirmButtonType: {
-      type: String,
-      values: buttonType,
-      default: 'primary',
-    },
-    cancelButtonType: {
-      type: String,
-      values: buttonType,
-      default: 'text',
-    },
-    icon: {
-      type: definePropType<string | Component>([String, Object]),
-      default: QuestionFilled as any,
-    },
-    iconColor: {
-      type: String,
-      default: '#f90',
-    },
-    hideIcon: {
-      type: Boolean,
-      default: false,
-    },
-    hideAfter: {
-      type: Number,
-      default: 200,
-    },
-    onConfirm: {
-      type: definePropType<(e: Event) => Promise<boolean> | boolean>(Function),
-    },
-    onCancel: {
-      type: definePropType<(e: Event) => Promise<boolean> | boolean>(Function),
-    },
-  } as const),
+export const popconfirmProps = buildProps({
+  title: {
+    type: String,
+  },
+  confirmButtonText: {
+    type: String,
+  },
+  cancelButtonText: {
+    type: String,
+  },
+  confirmButtonType: {
+    type: String,
+    values: buttonType,
+    default: 'primary',
+  },
+  cancelButtonType: {
+    type: String,
+    values: buttonType,
+    default: 'text',
+  },
+  icon: {
+    type: iconPropType,
+    default: QuestionFilled as Component,
+  },
+  iconColor: {
+    type: String,
+    default: '#f90',
+  },
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
+  hideAfter: {
+    type: Number,
+    default: 200,
+  },
+  onConfirm: {
+    type: definePropType<(e: Event) => Promise<boolean> | boolean>(Function),
+  },
+  onCancel: {
+    type: definePropType<(e: Event) => Promise<boolean> | boolean>(Function),
+  },
   teleported: useTooltipContentProps.teleported,
-}
+} as const)
 export type PopconfirmProps = ExtractPropTypes<typeof popconfirmProps>
diff --git a/packages/components/popover/index.ts b/packages/components/popover/index.ts
index c07adf2218..edcd5f4256 100644
--- a/packages/components/popover/index.ts
+++ b/packages/components/popover/index.ts
@@ -2,7 +2,7 @@ import Popover from './src/index.vue'
 import PopoverDirective, { VPopover } from './src/directive'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Popover.install = (app: App): void => {
   app.component(Popover.name, Popover)
diff --git a/packages/components/popover/src/index.vue b/packages/components/popover/src/index.vue
index 4da03e3671..7d01cf9e82 100644
--- a/packages/components/popover/src/index.vue
+++ b/packages/components/popover/src/index.vue
@@ -30,7 +30,7 @@
 import { defineComponent, computed, ref, unref } from 'vue'
 import ElTooltip from '@element-plus/components/tooltip'
 import { useDeprecateAppendToBody } from '@element-plus/components/popper'
-import { isString } from '@element-plus/utils/util'
+import { isString } from '@element-plus/utils-v2'
 import { usePopoverProps } from './popover'
 
 import type { StyleValue } from 'vue'
diff --git a/packages/components/popover/src/popover.ts b/packages/components/popover/src/popover.ts
index 562c9a4e46..9389f09983 100644
--- a/packages/components/popover/src/popover.ts
+++ b/packages/components/popover/src/popover.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import { useTooltipContentProps } from '@element-plus/components/tooltip'
 
 export const usePopoverProps = {
diff --git a/packages/components/popper/index.ts b/packages/components/popper/index.ts
index f68f10a302..d5f77f8392 100644
--- a/packages/components/popper/index.ts
+++ b/packages/components/popper/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Popper from './src/popper.vue'
 
 export { default as ElPopperArrow } from './src/arrow.vue'
diff --git a/packages/components/popper/src/container.ts b/packages/components/popper/src/container.ts
index 74984305b0..39ccb70f07 100644
--- a/packages/components/popper/src/container.ts
+++ b/packages/components/popper/src/container.ts
@@ -1,6 +1,6 @@
 import { onBeforeMount } from 'vue'
 import { isClient } from '@vueuse/core'
-import { generateId } from '@element-plus/utils/util'
+import { generateId } from '@element-plus/utils-v2'
 
 let cachedContainer: HTMLElement
 
diff --git a/packages/components/popper/src/deprecation.ts b/packages/components/popper/src/deprecation.ts
index 2a6f6d6c8a..a3e3d21576 100644
--- a/packages/components/popper/src/deprecation.ts
+++ b/packages/components/popper/src/deprecation.ts
@@ -1,13 +1,13 @@
 import { computed, getCurrentInstance } from 'vue'
 import { useDeprecated } from '@element-plus/hooks'
-import { isBool } from '@element-plus/utils/util'
+import { isBoolean } from '@element-plus/utils-v2'
 
 export function useDeprecateAppendToBody(scope: string, from: string) {
   const vm = getCurrentInstance()!
 
   const compatTeleported = computed(() => {
     return (
-      isBool(vm.props[from]) ? vm.props[from] : vm.props.teleported
+      isBoolean(vm.props[from]) ? vm.props[from] : vm.props.teleported
     ) as boolean
   })
 
@@ -19,7 +19,7 @@ export function useDeprecateAppendToBody(scope: string, from: string) {
       version: '2.1.0',
       ref: 'https://element-plus.org/en-US/component/tooltip.html#attributes',
     },
-    computed(() => isBool(vm.props[from]))
+    computed(() => isBoolean(vm.props[from]))
   )
 
   return {
diff --git a/packages/components/popper/src/popper.ts b/packages/components/popper/src/popper.ts
index 7ae3c8ef9f..5df1c4bc9d 100644
--- a/packages/components/popper/src/popper.ts
+++ b/packages/components/popper/src/popper.ts
@@ -1,5 +1,5 @@
 import { placements } from '@popperjs/core'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 
 import type { ExtractPropTypes, StyleValue } from 'vue'
 import type { Placement, Options } from '@popperjs/core'
diff --git a/packages/components/progress/index.ts b/packages/components/progress/index.ts
index f6d6de4ad4..1ee28f82a8 100644
--- a/packages/components/progress/index.ts
+++ b/packages/components/progress/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Progress from './src/progress.vue'
 
 export const ElProgress = withInstall(Progress)
diff --git a/packages/components/progress/src/progress.ts b/packages/components/progress/src/progress.ts
index 99d5d0c4df..588f020f81 100644
--- a/packages/components/progress/src/progress.ts
+++ b/packages/components/progress/src/progress.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import type { SVGAttributes, ExtractPropTypes } from 'vue'
 
 type Color = { color: string; percentage: number }
diff --git a/packages/components/radio/index.ts b/packages/components/radio/index.ts
index c95834a240..8ed9dc3bf0 100644
--- a/packages/components/radio/index.ts
+++ b/packages/components/radio/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Radio from './src/radio.vue'
 import RadioButton from './src/radio-button.vue'
diff --git a/packages/components/radio/src/radio-button.ts b/packages/components/radio/src/radio-button.ts
index 20a21d9172..711fd3299c 100644
--- a/packages/components/radio/src/radio-button.ts
+++ b/packages/components/radio/src/radio-button.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import { radioPropsBase } from './radio'
 import type { ExtractPropTypes } from 'vue'
 
diff --git a/packages/components/radio/src/radio-group.ts b/packages/components/radio/src/radio-group.ts
index 2418118730..05bbc79bc8 100644
--- a/packages/components/radio/src/radio-group.ts
+++ b/packages/components/radio/src/radio-group.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import { useSizeProp } from '@element-plus/hooks'
 import { radioEmits } from './radio'
 import type { ExtractPropTypes } from '@vue/runtime-core'
diff --git a/packages/components/radio/src/radio-group.vue b/packages/components/radio/src/radio-group.vue
index c2b2493846..3961f0bc7f 100644
--- a/packages/components/radio/src/radio-group.vue
+++ b/packages/components/radio/src/radio-group.vue
@@ -21,7 +21,7 @@ import {
   watch,
 } from 'vue'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { radioGroupKey } from '@element-plus/tokens'
 import { useFormItem } from '@element-plus/hooks'
 import { radioGroupEmits, radioGroupProps } from './radio-group'
diff --git a/packages/components/radio/src/radio.ts b/packages/components/radio/src/radio.ts
index 38eeddb564..dd96382869 100644
--- a/packages/components/radio/src/radio.ts
+++ b/packages/components/radio/src/radio.ts
@@ -1,7 +1,11 @@
 import { ref, computed, inject } from 'vue'
-import { buildProps } from '@element-plus/utils/props'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isBool, isString, isNumber } from '@element-plus/utils/util'
+import {
+  buildProps,
+  isBoolean,
+  isString,
+  isNumber,
+} from '@element-plus/utils-v2'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { radioGroupKey } from '@element-plus/tokens'
 import { useDisabled, useSize, useSizeProp } from '@element-plus/hooks'
 import type { ExtractPropTypes, SetupContext } from 'vue'
@@ -30,9 +34,9 @@ export type RadioProps = ExtractPropTypes<typeof radioProps>
 
 export const radioEmits = {
   [UPDATE_MODEL_EVENT]: (val: string | number | boolean) =>
-    isString(val) || isNumber(val) || isBool(val),
+    isString(val) || isNumber(val) || isBoolean(val),
   change: (val: string | number | boolean) =>
-    isString(val) || isNumber(val) || isBool(val),
+    isString(val) || isNumber(val) || isBoolean(val),
 }
 export type RadioEmits = typeof radioEmits
 
diff --git a/packages/components/rate/index.ts b/packages/components/rate/index.ts
index 2b0aff71aa..84492b6f5c 100644
--- a/packages/components/rate/index.ts
+++ b/packages/components/rate/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Rate from './src/rate.vue'
 
diff --git a/packages/components/rate/src/rate.ts b/packages/components/rate/src/rate.ts
index b1ae729467..80f7c78c29 100644
--- a/packages/components/rate/src/rate.ts
+++ b/packages/components/rate/src/rate.ts
@@ -1,8 +1,13 @@
 import { Star, StarFilled } from '@element-plus/icons-vue'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
-import { isValidComponentSize } from '@element-plus/utils/validators'
-import type { ComponentSize } from '@element-plus/utils/types'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import {
+  buildProps,
+  definePropType,
+  mutable,
+  isValidComponentSize,
+  iconPropType,
+} from '@element-plus/utils-v2'
+import type { ComponentSize } from '@element-plus/constants'
 import type { Component, ExtractPropTypes, PropType } from 'vue'
 import type Rate from './rate.vue'
 
@@ -47,11 +52,11 @@ export const rateProps = buildProps({
     default: () => [StarFilled, StarFilled, StarFilled],
   },
   voidIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: () => Star,
   },
   disabledvoidIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: () => StarFilled,
   },
   disabled: {
diff --git a/packages/components/rate/src/rate.vue b/packages/components/rate/src/rate.vue
index 7bd34a19af..82234a422f 100644
--- a/packages/components/rate/src/rate.vue
+++ b/packages/components/rate/src/rate.vue
@@ -48,7 +48,7 @@ import { elFormKey } from '@element-plus/tokens'
 import { hasClass } from '@element-plus/utils/dom'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { ElIcon } from '@element-plus/components/icon'
 import { StarFilled, Star } from '@element-plus/icons-vue'
 import { useNamespace, useSize } from '@element-plus/hooks'
diff --git a/packages/components/result/index.ts b/packages/components/result/index.ts
index 8373729e38..5c6467737d 100644
--- a/packages/components/result/index.ts
+++ b/packages/components/result/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Result from './src/result.vue'
 
 export const ElResult = withInstall(Result)
diff --git a/packages/components/result/src/result.ts b/packages/components/result/src/result.ts
index 607560fcd7..e7ecef2551 100644
--- a/packages/components/result/src/result.ts
+++ b/packages/components/result/src/result.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import {
   WarningFilled,
   CircleCheckFilled,
diff --git a/packages/components/roving-focus-group/src/roving-focus-group.ts b/packages/components/roving-focus-group/src/roving-focus-group.ts
index 0554146929..72b998359d 100644
--- a/packages/components/roving-focus-group/src/roving-focus-group.ts
+++ b/packages/components/roving-focus-group/src/roving-focus-group.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import { createCollectionWithScope } from '@element-plus/components/collection'
 import type { ExtractPropTypes, HTMLAttributes, StyleValue } from 'vue'
 
diff --git a/packages/components/row/index.ts b/packages/components/row/index.ts
index 4b65524906..689f0be89f 100644
--- a/packages/components/row/index.ts
+++ b/packages/components/row/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Row from './src/row'
 
 export const ElRow = withInstall(Row)
diff --git a/packages/components/row/src/row.ts b/packages/components/row/src/row.ts
index ab7bcfaf28..9b6ac3d0dc 100644
--- a/packages/components/row/src/row.ts
+++ b/packages/components/row/src/row.ts
@@ -1,5 +1,5 @@
 import { defineComponent, computed, h, provide } from 'vue'
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import type { ExtractPropTypes, CSSProperties } from 'vue'
 
diff --git a/packages/components/scrollbar/index.ts b/packages/components/scrollbar/index.ts
index 1e829330b4..99c089ff2f 100644
--- a/packages/components/scrollbar/index.ts
+++ b/packages/components/scrollbar/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Scrollbar from './src/scrollbar.vue'
 
diff --git a/packages/components/scrollbar/src/bar.ts b/packages/components/scrollbar/src/bar.ts
index 5dd090572a..50c7ec85c8 100644
--- a/packages/components/scrollbar/src/bar.ts
+++ b/packages/components/scrollbar/src/bar.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 
 export const barProps = buildProps({
diff --git a/packages/components/scrollbar/src/scrollbar.ts b/packages/components/scrollbar/src/scrollbar.ts
index 52694e3b55..3945e77ae0 100644
--- a/packages/components/scrollbar/src/scrollbar.ts
+++ b/packages/components/scrollbar/src/scrollbar.ts
@@ -1,5 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import { isNumber } from '@element-plus/utils/util'
+import { buildProps, definePropType, isNumber } from '@element-plus/utils-v2'
 import type { StyleValue, ExtractPropTypes } from 'vue'
 
 export const scrollbarProps = buildProps({
diff --git a/packages/components/scrollbar/src/scrollbar.vue b/packages/components/scrollbar/src/scrollbar.vue
index 974afc57ba..332fae913c 100644
--- a/packages/components/scrollbar/src/scrollbar.vue
+++ b/packages/components/scrollbar/src/scrollbar.vue
@@ -43,8 +43,7 @@ import {
   reactive,
 } from 'vue'
 import { useResizeObserver, useEventListener } from '@vueuse/core'
-import { addUnit, isNumber } from '@element-plus/utils/util'
-import { debugWarn } from '@element-plus/utils/error'
+import { isNumber, debugWarn, addUnit } from '@element-plus/utils-v2'
 import { scrollbarContextKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
 import Bar from './bar.vue'
diff --git a/packages/components/scrollbar/src/thumb.ts b/packages/components/scrollbar/src/thumb.ts
index 005d6043af..54f8b2329d 100644
--- a/packages/components/scrollbar/src/thumb.ts
+++ b/packages/components/scrollbar/src/thumb.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 
 export const thumbProps = buildProps({
diff --git a/packages/components/scrollbar/src/thumb.vue b/packages/components/scrollbar/src/thumb.vue
index 080e33935b..22f3cd3c8c 100644
--- a/packages/components/scrollbar/src/thumb.vue
+++ b/packages/components/scrollbar/src/thumb.vue
@@ -27,7 +27,7 @@ import {
 } from 'vue'
 import { useEventListener, isClient } from '@vueuse/core'
 import { scrollbarContextKey } from '@element-plus/tokens'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { BAR_MAP, renderThumbStyle } from './util'
 
diff --git a/packages/components/select-v2/index.ts b/packages/components/select-v2/index.ts
index 94dbbebc3e..ddbf4f8ff2 100644
--- a/packages/components/select-v2/index.ts
+++ b/packages/components/select-v2/index.ts
@@ -1,7 +1,7 @@
 import Select from './src/select.vue'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Select.install = (app: App): void => {
   app.component(Select.name, Select)
diff --git a/packages/components/select-v2/src/defaults.ts b/packages/components/select-v2/src/defaults.ts
index 5525beaa80..d4ef77ef23 100644
--- a/packages/components/select-v2/src/defaults.ts
+++ b/packages/components/select-v2/src/defaults.ts
@@ -1,9 +1,9 @@
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { useTooltipContentProps } from '@element-plus/components/tooltip'
 import { CircleClose } from '@element-plus/icons-vue'
 
 import type { PropType, Component } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 import type { OptionType } from './select.types'
 import type { Options } from '@element-plus/components/popper'
 
diff --git a/packages/components/select-v2/src/select-dropdown.vue b/packages/components/select-v2/src/select-dropdown.vue
index 1d3055ff63..a27c227cda 100644
--- a/packages/components/select-v2/src/select-dropdown.vue
+++ b/packages/components/select-v2/src/select-dropdown.vue
@@ -10,7 +10,8 @@ import {
   withKeys,
   withModifiers,
 } from 'vue'
-import { getValueByPath, isUndefined, isObject } from '@element-plus/utils/util'
+import { isUndefined, isObject } from '@element-plus/utils-v2'
+import { getValueByPath } from '@element-plus/utils/util'
 // import { addResizeListener, removeResizeListener, ResizableElement } from '@element-plus/utils/resize-event'
 import {
   FixedSizeList,
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index 1bc33bb0a6..07679a7e74 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -257,7 +257,7 @@ import { ClickOutside } from '@element-plus/directives'
 import ElTooltip from '@element-plus/components/tooltip'
 import ElTag from '@element-plus/components/tag'
 import ElIcon from '@element-plus/components/icon'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import ElSelectMenu from './select-dropdown.vue'
 import useSelect from './useSelect'
 import { selectV2InjectionKey } from './token'
diff --git a/packages/components/select-v2/src/useInput.ts b/packages/components/select-v2/src/useInput.ts
index e5e84b9653..4a22be619e 100644
--- a/packages/components/select-v2/src/useInput.ts
+++ b/packages/components/select-v2/src/useInput.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { isFunction } from '@vue/shared'
-import { isKorean } from '@element-plus/utils/isDef'
+import { isKorean } from '@element-plus/utils-v2'
 
 export function useInput(handleInput: (event: InputEvent) => void) {
   const isComposing = ref(false)
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index 5c1b2a56af..73f720e1f3 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -10,8 +10,8 @@ import {
 import { isArray, isFunction, isObject } from '@vue/shared'
 import { isEqual, debounce as lodashDebounce } from 'lodash-unified'
 import { useFormItem, useLocale, useSize } from '@element-plus/hooks'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
-import { ValidateComponentsMap } from '@element-plus/utils/icon'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
+import { ValidateComponentsMap } from '@element-plus/utils-v2'
 import {
   addResizeListener,
   removeResizeListener,
diff --git a/packages/components/select/index.ts b/packages/components/select/index.ts
index c9a7a35bb0..27c59e36cf 100644
--- a/packages/components/select/index.ts
+++ b/packages/components/select/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Select from './src/select.vue'
 import Option from './src/option.vue'
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index fca42190d4..db87652922 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -231,12 +231,12 @@ import ElScrollbar from '@element-plus/components/scrollbar'
 import ElTag from '@element-plus/components/tag'
 import ElIcon from '@element-plus/components/icon'
 import { useDeprecateAppendToBody } from '@element-plus/components/popper'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import {
   addResizeListener,
   removeResizeListener,
 } from '@element-plus/utils/resize-event'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { CircleClose, ArrowUp } from '@element-plus/icons-vue'
 import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
@@ -244,7 +244,7 @@ import { useSelect, useSelectStates } from './useSelect'
 import { selectKey } from './token'
 
 import type { PropType, Component } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 import type { SelectContext } from './token'
 
 const COMPONENT_NAME = 'ElSelect'
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 1bd7dab269..12eb166e54 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -11,11 +11,11 @@ import {
 import { isObject, toRawType } from '@vue/shared'
 import { debounce as lodashDebounce, isEqual } from 'lodash-unified'
 import { isClient } from '@vueuse/core'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { useLocale, useSize } from '@element-plus/hooks'
 import scrollIntoView from '@element-plus/utils/scroll-into-view'
-import { isKorean } from '@element-plus/utils/isDef'
+import { isKorean } from '@element-plus/utils-v2'
 import { getValueByPath } from '@element-plus/utils/util'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 
diff --git a/packages/components/skeleton/index.ts b/packages/components/skeleton/index.ts
index 28ceb57e0a..1674bea6a1 100644
--- a/packages/components/skeleton/index.ts
+++ b/packages/components/skeleton/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Skeleton from './src/skeleton.vue'
 import SkeletonItem from './src/skeleton-item.vue'
diff --git a/packages/components/skeleton/src/skeleton-item.ts b/packages/components/skeleton/src/skeleton-item.ts
index fc652c8046..ed22a61642 100644
--- a/packages/components/skeleton/src/skeleton-item.ts
+++ b/packages/components/skeleton/src/skeleton-item.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import type SkeletonItem from './skeleton-item.vue'
 import type { ExtractPropTypes } from 'vue'
 
diff --git a/packages/components/skeleton/src/skeleton.ts b/packages/components/skeleton/src/skeleton.ts
index da412923a5..da7b264c68 100644
--- a/packages/components/skeleton/src/skeleton.ts
+++ b/packages/components/skeleton/src/skeleton.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import type Skeleton from './skeleton.vue'
 import type { ExtractPropTypes } from 'vue'
 
diff --git a/packages/components/slider/index.ts b/packages/components/slider/index.ts
index 373afd9699..4e038556ad 100644
--- a/packages/components/slider/index.ts
+++ b/packages/components/slider/index.ts
@@ -1,7 +1,7 @@
 import Slider from './src/index.vue'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Slider.install = (app: App): void => {
   app.component(Slider.name, Slider)
diff --git a/packages/components/slider/src/button.vue b/packages/components/slider/src/button.vue
index 37e66f3f69..7e44e80a6b 100644
--- a/packages/components/slider/src/button.vue
+++ b/packages/components/slider/src/button.vue
@@ -39,7 +39,7 @@
 <script lang="ts">
 import { defineComponent, reactive, toRefs } from 'vue'
 import ElTooltip from '@element-plus/components/tooltip'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useSliderButton } from './useSliderButton'
 
 export default defineComponent({
diff --git a/packages/components/slider/src/index.vue b/packages/components/slider/src/index.vue
index 62e15591f9..5db11dfb5f 100644
--- a/packages/components/slider/src/index.vue
+++ b/packages/components/slider/src/index.vue
@@ -94,10 +94,9 @@ import {
   UPDATE_MODEL_EVENT,
   CHANGE_EVENT,
   INPUT_EVENT,
-} from '@element-plus/utils/constants'
+} from '@element-plus/constants'
 import { off, on } from '@element-plus/utils/dom'
-import { throwError } from '@element-plus/utils/error'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { throwError, isValidComponentSize } from '@element-plus/utils-v2'
 import { useSize } from '@element-plus/hooks'
 import SliderButton from './button.vue'
 import SliderMarker from './marker.vue'
@@ -106,7 +105,8 @@ import { useSlide } from './useSlide'
 import { useStops } from './useStops'
 
 import type { PropType, Ref } from 'vue'
-import type { ComponentSize, Nullable } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
+import type { Nullable } from '@element-plus/utils/types'
 
 export default defineComponent({
   name: 'ElSlider',
diff --git a/packages/components/slider/src/useSlide.ts b/packages/components/slider/src/useSlide.ts
index e6ff045f16..2678b0b487 100644
--- a/packages/components/slider/src/useSlide.ts
+++ b/packages/components/slider/src/useSlide.ts
@@ -3,7 +3,7 @@ import {
   CHANGE_EVENT,
   UPDATE_MODEL_EVENT,
   INPUT_EVENT,
-} from '@element-plus/utils/constants'
+} from '@element-plus/constants'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 import type { CSSProperties } from 'vue'
 import type { ButtonRefs, ISliderInitData, ISliderProps } from './slider.type'
diff --git a/packages/components/slider/src/useSliderButton.ts b/packages/components/slider/src/useSliderButton.ts
index cb3cc3a38e..2aebe3bc14 100644
--- a/packages/components/slider/src/useSliderButton.ts
+++ b/packages/components/slider/src/useSliderButton.ts
@@ -1,6 +1,6 @@
 import { computed, inject, nextTick, ref, watch } from 'vue'
 import { debounce } from 'lodash-unified'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { off, on } from '@element-plus/utils/dom'
 
 import type { ComputedRef, CSSProperties } from 'vue'
diff --git a/packages/components/slider/src/useStops.ts b/packages/components/slider/src/useStops.ts
index b66946abb8..a0f651795f 100644
--- a/packages/components/slider/src/useStops.ts
+++ b/packages/components/slider/src/useStops.ts
@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import type { ComputedRef, CSSProperties } from 'vue'
 import type { ISliderInitData, ISliderProps, Stops } from './slider.type'
 
diff --git a/packages/components/slot/__tests__/only-child.spec.ts b/packages/components/slot/__tests__/only-child.spec.ts
index 961fb1db1e..20b284596a 100644
--- a/packages/components/slot/__tests__/only-child.spec.ts
+++ b/packages/components/slot/__tests__/only-child.spec.ts
@@ -1,12 +1,12 @@
 import { ref, h, nextTick, Comment, Fragment } from 'vue'
 import { shallowMount } from '@vue/test-utils'
+import { debugWarn } from '@element-plus/utils-v2'
 import { FORWARD_REF_INJECTION_KEY } from '@element-plus/hooks'
-import { debugWarn } from '@element-plus/utils/error'
 import ElOnlyChild from '../src/only-child'
 
 import type { Slot } from 'vue'
 
-jest.mock('@element-plus/utils/error', () => ({
+jest.mock('@element-plus/utils-v2/error', () => ({
   debugWarn: jest.fn(),
 }))
 
diff --git a/packages/components/slot/src/only-child.ts b/packages/components/slot/src/only-child.ts
index 3cb378950f..16b918630d 100644
--- a/packages/components/slot/src/only-child.ts
+++ b/packages/components/slot/src/only-child.ts
@@ -13,7 +13,7 @@ import {
   FORWARD_REF_INJECTION_KEY,
   useForwardRefDirective,
 } from '@element-plus/hooks'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 
 import type { VNode } from 'vue'
 
diff --git a/packages/components/space/index.ts b/packages/components/space/index.ts
index 2d9b9f8b89..dee4606c61 100644
--- a/packages/components/space/index.ts
+++ b/packages/components/space/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Space from './src/space'
 
diff --git a/packages/components/space/src/item.vue b/packages/components/space/src/item.vue
index b70b3201d7..fd77bdda0f 100644
--- a/packages/components/space/src/item.vue
+++ b/packages/components/space/src/item.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 
 const spaceItem = buildProps({
diff --git a/packages/components/space/src/space.ts b/packages/components/space/src/space.ts
index 55cab7970c..0be4d5baf5 100644
--- a/packages/components/space/src/space.ts
+++ b/packages/components/space/src/space.ts
@@ -10,13 +10,12 @@ import {
   PatchFlags,
   isFragment,
   isValidElementNode,
-} from '@element-plus/utils/vnode'
-import { isArray, isNumber } from '@element-plus/utils/util'
-import {
   buildProps,
-  componentSize,
   definePropType,
-} from '@element-plus/utils/props'
+  isArray,
+  isNumber,
+} from '@element-plus/utils-v2'
+import { componentSizes } from '@element-plus/constants'
 import Item from './item.vue'
 import { useSpace } from './use-space'
 
@@ -76,7 +75,7 @@ export const spaceProps = buildProps({
 
   size: {
     type: [String, Array, Number],
-    values: componentSize,
+    values: componentSizes,
     validator: (val: unknown): val is [number, number] | number => {
       return (
         isNumber(val) ||
diff --git a/packages/components/space/src/use-space.ts b/packages/components/space/src/use-space.ts
index c2abaf62ed..1fea7b1b3e 100644
--- a/packages/components/space/src/use-space.ts
+++ b/packages/components/space/src/use-space.ts
@@ -1,10 +1,10 @@
 import { ref, computed, watchEffect } from 'vue'
-import { isNumber } from '@element-plus/utils/util'
+import { isNumber } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import type { SpaceProps } from './space'
 
 import type { CSSProperties, StyleValue } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 const SIZE_MAP: Record<ComponentSize, number> = {
   small: 8,
diff --git a/packages/components/steps/index.ts b/packages/components/steps/index.ts
index 20e9a31e14..e9150aeb70 100644
--- a/packages/components/steps/index.ts
+++ b/packages/components/steps/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Steps from './src/index.vue'
 import Step from './src/item.vue'
diff --git a/packages/components/steps/src/index.vue b/packages/components/steps/src/index.vue
index 94de51893f..3c5d9b2494 100644
--- a/packages/components/steps/src/index.vue
+++ b/packages/components/steps/src/index.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { defineComponent, watch, ref, provide } from 'vue'
 
-import { CHANGE_EVENT } from '@element-plus/utils/constants'
+import { CHANGE_EVENT } from '@element-plus/constants'
 
 export default defineComponent({
   name: 'ElSteps',
diff --git a/packages/components/switch/index.ts b/packages/components/switch/index.ts
index be40daad55..ac42cc12ca 100644
--- a/packages/components/switch/index.ts
+++ b/packages/components/switch/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Switch from './src/switch.vue'
 
 export const ElSwitch = withInstall(Switch)
diff --git a/packages/components/switch/src/switch.ts b/packages/components/switch/src/switch.ts
index 494f5866d6..1de1dec09a 100644
--- a/packages/components/switch/src/switch.ts
+++ b/packages/components/switch/src/switch.ts
@@ -1,14 +1,20 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+  isBoolean,
+  isNumber,
+  isString,
+  isValidComponentSize,
+} from '@element-plus/utils-v2'
 import {
   UPDATE_MODEL_EVENT,
   CHANGE_EVENT,
   INPUT_EVENT,
-} from '@element-plus/utils/constants'
-import { isBool, isNumber, isString } from '@element-plus/utils/util'
-import { isValidComponentSize } from '@element-plus/utils/validators'
-import type { ComponentSize } from '@element-plus/utils/types'
+} from '@element-plus/constants'
+import type { ComponentSize } from '@element-plus/constants'
 import type Switch from './switch.vue'
-import type { Component, ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 
 export const switchProps = buildProps({
   modelValue: {
@@ -32,11 +38,11 @@ export const switchProps = buildProps({
     default: false,
   },
   activeIcon: {
-    type: definePropType<string | Component>([String, Object, Function]),
+    type: iconPropType,
     default: '',
   },
   inactiveIcon: {
-    type: definePropType<string | Component>([String, Object, Function]),
+    type: iconPropType,
     default: '',
   },
   activeText: {
@@ -93,11 +99,11 @@ export type SwitchProps = ExtractPropTypes<typeof switchProps>
 
 export const switchEmits = {
   [UPDATE_MODEL_EVENT]: (val: boolean | string | number) =>
-    isBool(val) || isString(val) || isNumber(val),
+    isBoolean(val) || isString(val) || isNumber(val),
   [CHANGE_EVENT]: (val: boolean | string | number) =>
-    isBool(val) || isString(val) || isNumber(val),
+    isBoolean(val) || isString(val) || isNumber(val),
   [INPUT_EVENT]: (val: boolean | string | number) =>
-    isBool(val) || isString(val) || isNumber(val),
+    isBoolean(val) || isString(val) || isNumber(val),
 }
 export type SwitchEmits = typeof switchEmits
 
diff --git a/packages/components/switch/src/switch.vue b/packages/components/switch/src/switch.vue
index b5fdcde00b..6fd702115a 100644
--- a/packages/components/switch/src/switch.vue
+++ b/packages/components/switch/src/switch.vue
@@ -91,15 +91,14 @@
 <script lang="ts">
 import { defineComponent, computed, onMounted, ref, nextTick, watch } from 'vue'
 import { isPromise } from '@vue/shared'
-import { isBool } from '@element-plus/utils/util'
-import { throwError, debugWarn } from '@element-plus/utils/error'
+import { isBoolean, throwError, debugWarn } from '@element-plus/utils-v2'
 import ElIcon from '@element-plus/components/icon'
 import { Loading } from '@element-plus/icons-vue'
 import {
   UPDATE_MODEL_EVENT,
   CHANGE_EVENT,
   INPUT_EVENT,
-} from '@element-plus/utils/constants'
+} from '@element-plus/constants'
 import {
   useDisabled,
   useFormItem,
@@ -193,9 +192,10 @@ export default defineComponent({
 
       const shouldChange = beforeChange()
 
-      const isExpectType = [isPromise(shouldChange), isBool(shouldChange)].some(
-        (i) => i
-      )
+      const isExpectType = [
+        isPromise(shouldChange),
+        isBoolean(shouldChange),
+      ].some((i) => i)
       if (!isExpectType) {
         throwError(
           COMPONENT_NAME,
diff --git a/packages/components/table/index.ts b/packages/components/table/index.ts
index 4134a310d9..229d224eb6 100644
--- a/packages/components/table/index.ts
+++ b/packages/components/table/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 import Table from './src/table.vue'
 import TableColumn from './src/tableColumn'
 
diff --git a/packages/components/table/src/store/watcher.ts b/packages/components/table/src/store/watcher.ts
index db7c162735..2951bd371b 100644
--- a/packages/components/table/src/store/watcher.ts
+++ b/packages/components/table/src/store/watcher.ts
@@ -1,5 +1,5 @@
 import { ref, getCurrentInstance, unref, watch, toRefs } from 'vue'
-import { hasOwn } from '@vue/shared'
+import { hasOwn } from '@element-plus/utils-v2'
 import {
   getKeysMap,
   getRowIdentity,
diff --git a/packages/components/table/src/table-column/render-helper.ts b/packages/components/table/src/table-column/render-helper.ts
index ba6c54c9a6..a0595666ef 100644
--- a/packages/components/table/src/table-column/render-helper.ts
+++ b/packages/components/table/src/table-column/render-helper.ts
@@ -1,5 +1,5 @@
 import { getCurrentInstance, h, ref, computed, watchEffect, unref } from 'vue'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import {
   cellForced,
diff --git a/packages/components/table/src/table-column/watcher-helper.ts b/packages/components/table/src/table-column/watcher-helper.ts
index 0f2ed9cbc0..5454961e96 100644
--- a/packages/components/table/src/table-column/watcher-helper.ts
+++ b/packages/components/table/src/table-column/watcher-helper.ts
@@ -1,5 +1,5 @@
 import { watch, getCurrentInstance } from 'vue'
-import { hasOwn } from '@vue/shared'
+import { hasOwn } from '@element-plus/utils-v2'
 import { parseMinWidth, parseWidth } from '../util'
 
 import type { ComputedRef } from 'vue'
diff --git a/packages/components/table/src/table-layout.ts b/packages/components/table/src/table-layout.ts
index 31351322a0..4880e6dc16 100644
--- a/packages/components/table/src/table-layout.ts
+++ b/packages/components/table/src/table-layout.ts
@@ -1,6 +1,6 @@
 import { nextTick, ref, isRef } from 'vue'
-import { hasOwn } from '@vue/shared'
 import { isClient } from '@vueuse/core'
+import { hasOwn } from '@element-plus/utils-v2'
 import { parseHeight } from './util'
 import type { Ref } from 'vue'
 
diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts
index 220df13a7c..db471c2e5e 100644
--- a/packages/components/table/src/util.ts
+++ b/packages/components/table/src/util.ts
@@ -1,5 +1,5 @@
-import { hasOwn } from '@vue/shared'
 import { createPopper } from '@popperjs/core'
+import { hasOwn } from '@element-plus/utils-v2'
 import { useZIndex } from '@element-plus/hooks'
 import { getValueByPath } from '@element-plus/utils/util'
 import { off, on } from '@element-plus/utils/dom'
@@ -8,7 +8,7 @@ import type {
   PopperInstance,
   IPopperOptions,
 } from '@element-plus/components/popper'
-import type { Indexable, Nullable } from '@element-plus/utils/types'
+import type { Nullable } from '@element-plus/utils/types'
 import type { TableColumnCtx } from './table-column/defaults'
 
 export const getCell = function (event: Event): HTMLElement {
@@ -186,7 +186,7 @@ export function mergeOptions<T, K>(defaults: T, config: K): T & K {
     options[key] = defaults[key]
   }
   for (key in config) {
-    if (hasOwn(config as unknown as Indexable<any>, key)) {
+    if (hasOwn(config as unknown as Record<string, any>, key)) {
       const value = config[key]
       if (typeof value !== 'undefined') {
         options[key] = value
diff --git a/packages/components/tabs/index.ts b/packages/components/tabs/index.ts
index aadf20979e..bda0579b98 100644
--- a/packages/components/tabs/index.ts
+++ b/packages/components/tabs/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 import Tabs from './src/tabs'
 import TabPane from './src/tab-pane.vue'
 
diff --git a/packages/components/tabs/src/tab-bar.ts b/packages/components/tabs/src/tab-bar.ts
index 9821bdb10e..88c6bd61f3 100644
--- a/packages/components/tabs/src/tab-bar.ts
+++ b/packages/components/tabs/src/tab-bar.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils-v2'
 import type { TabsPaneContext } from '@element-plus/tokens'
 import type { ExtractPropTypes } from 'vue'
 
diff --git a/packages/components/tabs/src/tab-bar.vue b/packages/components/tabs/src/tab-bar.vue
index 2af2918dfb..ad1d95f0e3 100644
--- a/packages/components/tabs/src/tab-bar.vue
+++ b/packages/components/tabs/src/tab-bar.vue
@@ -17,7 +17,7 @@ import {
 import { capitalize } from '@vue/shared'
 import { useResizeObserver } from '@vueuse/core'
 import { tabsRootContextKey } from '@element-plus/tokens'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 import { tabBar } from './tab-bar'
 
 import type { CSSProperties } from 'vue'
diff --git a/packages/components/tabs/src/tab-nav.ts b/packages/components/tabs/src/tab-nav.ts
index bd110be3d5..aded1e0b1b 100644
--- a/packages/components/tabs/src/tab-nav.ts
+++ b/packages/components/tabs/src/tab-nav.ts
@@ -14,9 +14,13 @@ import {
   useDocumentVisibility,
   useWindowFocus,
 } from '@vueuse/core'
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import {
+  buildProps,
+  definePropType,
+  mutable,
+  throwError,
+} from '@element-plus/utils-v2'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { throwError } from '@element-plus/utils/error'
 import { ElIcon } from '@element-plus/components/icon'
 import { ArrowLeft, ArrowRight, Close } from '@element-plus/icons-vue'
 import { tabsRootContextKey } from '@element-plus/tokens'
diff --git a/packages/components/tabs/src/tab-pane.ts b/packages/components/tabs/src/tab-pane.ts
index be5184dc32..2d8dda74e0 100644
--- a/packages/components/tabs/src/tab-pane.ts
+++ b/packages/components/tabs/src/tab-pane.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 
 export const tabPaneProps = buildProps({
diff --git a/packages/components/tabs/src/tab-pane.vue b/packages/components/tabs/src/tab-pane.vue
index 340e5b44d5..b941d708a9 100644
--- a/packages/components/tabs/src/tab-pane.vue
+++ b/packages/components/tabs/src/tab-pane.vue
@@ -24,7 +24,7 @@ import {
 } from 'vue'
 import { eagerComputed } from '@vueuse/core'
 import { tabsRootContextKey } from '@element-plus/tokens'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 import { tabPaneProps } from './tab-pane'
 
 const COMPONENT_NAME = 'ElTabPane'
diff --git a/packages/components/tabs/src/tabs.ts b/packages/components/tabs/src/tabs.ts
index 86f27df795..34785396e7 100644
--- a/packages/components/tabs/src/tabs.ts
+++ b/packages/components/tabs/src/tabs.ts
@@ -15,8 +15,8 @@ import { isPromise, NOOP } from '@vue/shared'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import ElIcon from '@element-plus/components/icon'
 import { Plus } from '@element-plus/icons-vue'
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
+import { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { tabsRootContextKey } from '@element-plus/tokens'
 import TabNav from './tab-nav'
 import type { TabsPaneContext } from '@element-plus/tokens'
diff --git a/packages/components/tag/index.ts b/packages/components/tag/index.ts
index fcc3e234e9..aa93541681 100644
--- a/packages/components/tag/index.ts
+++ b/packages/components/tag/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Tag from './src/tag.vue'
 
diff --git a/packages/components/tag/src/tag.ts b/packages/components/tag/src/tag.ts
index dd133effad..36e6f37c78 100644
--- a/packages/components/tag/src/tag.ts
+++ b/packages/components/tag/src/tag.ts
@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 
 import type { ExtractPropTypes } from 'vue'
 
diff --git a/packages/components/teleport/index.ts b/packages/components/teleport/index.ts
index 607dcc348e..635e819364 100644
--- a/packages/components/teleport/index.ts
+++ b/packages/components/teleport/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Teleport from './src/teleport.vue'
 
 export const ElTeleport = withInstall(Teleport)
diff --git a/packages/components/teleport/src/teleport.ts b/packages/components/teleport/src/teleport.ts
index a14d9c16f7..329a4eb025 100644
--- a/packages/components/teleport/src/teleport.ts
+++ b/packages/components/teleport/src/teleport.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 
 import type { ExtractPropTypes, StyleValue } from 'vue'
 
diff --git a/packages/components/time-picker/index.ts b/packages/components/time-picker/index.ts
index c50ad3478e..ed53ee1c5e 100644
--- a/packages/components/time-picker/index.ts
+++ b/packages/components/time-picker/index.ts
@@ -3,7 +3,7 @@ import CommonPicker from './src/common/picker.vue'
 import TimePickPanel from './src/time-picker-com/panel-time-pick.vue'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 export * from './src/common/date-utils'
 export * from './src/common/constant'
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index 38714c4ce1..f16f95552f 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@@ -163,7 +163,7 @@ import ElInput from '@element-plus/components/input'
 import ElIcon from '@element-plus/components/icon'
 import ElTooltip from '@element-plus/components/tooltip'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { isEmpty } from '@element-plus/utils/util'
+import { isEmpty } from '@element-plus/utils-v2'
 import { Clock, Calendar } from '@element-plus/icons-vue'
 import { timePickerDefaultProps } from './props'
 
diff --git a/packages/components/time-picker/src/common/props.ts b/packages/components/time-picker/src/common/props.ts
index 6dfeef1b8b..419f34011d 100644
--- a/packages/components/time-picker/src/common/props.ts
+++ b/packages/components/time-picker/src/common/props.ts
@@ -1,9 +1,9 @@
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { CircleClose } from '@element-plus/icons-vue'
 
 import type { PropType, Component } from 'vue'
 import type { Options } from '@popperjs/core'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export const timePickerDefaultProps = {
   id: {
diff --git a/packages/components/time-select/index.ts b/packages/components/time-select/index.ts
index c94e5c0146..0581d01094 100644
--- a/packages/components/time-select/index.ts
+++ b/packages/components/time-select/index.ts
@@ -1,7 +1,7 @@
 import TimeSelect from './src/time-select.vue'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 TimeSelect.install = (app: App): void => {
   app.component(TimeSelect.name, TimeSelect)
diff --git a/packages/components/time-select/src/time-select.vue b/packages/components/time-select/src/time-select.vue
index 916fd9a8df..365aeba6e5 100644
--- a/packages/components/time-select/src/time-select.vue
+++ b/packages/components/time-select/src/time-select.vue
@@ -38,7 +38,7 @@ import ElIcon from '@element-plus/components/icon'
 import { CircleClose, Clock } from '@element-plus/icons-vue'
 
 import type { PropType, Component } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 dayjs.extend(customParseFormat)
 
 const { Option: ElOption } = ElSelect
diff --git a/packages/components/timeline/index.ts b/packages/components/timeline/index.ts
index 17ac3729b6..39a2c4bcdb 100644
--- a/packages/components/timeline/index.ts
+++ b/packages/components/timeline/index.ts
@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 import Timeline from './src/timeline'
 import TimelineItem from './src/timeline-item.vue'
 
diff --git a/packages/components/timeline/src/timeline-item.ts b/packages/components/timeline/src/timeline-item.ts
index 03b98f0839..f01257bac9 100644
--- a/packages/components/timeline/src/timeline-item.ts
+++ b/packages/components/timeline/src/timeline-item.ts
@@ -1,5 +1,5 @@
-import { definePropType, buildProps } from '@element-plus/utils/props'
-import type { Component, ExtractPropTypes } from 'vue'
+import { buildProps, iconPropType } from '@element-plus/utils-v2'
+import type { ExtractPropTypes } from 'vue'
 import type TimelineItem from './timeline-item.vue'
 
 export const timelineItemProps = buildProps({
@@ -32,7 +32,7 @@ export const timelineItemProps = buildProps({
     default: 'normal',
   },
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   hollow: {
diff --git a/packages/components/tooltip/__tests__/tooltip.spec.ts b/packages/components/tooltip/__tests__/tooltip.spec.ts
index 4e08f611fe..818324dc8f 100644
--- a/packages/components/tooltip/__tests__/tooltip.spec.ts
+++ b/packages/components/tooltip/__tests__/tooltip.spec.ts
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import { rAF } from '@element-plus/test-utils/tick'
 import { ElPopperTrigger } from '@element-plus/components/popper'
 import Tooltip from '../src/tooltip.vue'
@@ -9,7 +9,7 @@ import type { VNode } from 'vue'
 
 jest.useFakeTimers()
 
-jest.mock('@element-plus/utils/error', () => ({
+jest.mock('@element-plus/utils-v2/error', () => ({
   debugWarn: jest.fn(),
 }))
 
diff --git a/packages/components/tooltip/index.ts b/packages/components/tooltip/index.ts
index aa287898e9..dc6dfdb056 100644
--- a/packages/components/tooltip/index.ts
+++ b/packages/components/tooltip/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Tooltip from './src/tooltip.vue'
 
 export const ElTooltip = withInstall(Tooltip)
diff --git a/packages/components/tooltip/src/tooltip.ts b/packages/components/tooltip/src/tooltip.ts
index 8f8586e3cb..c6a640f4ba 100644
--- a/packages/components/tooltip/src/tooltip.ts
+++ b/packages/components/tooltip/src/tooltip.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import {
   usePopperTriggerProps,
   usePopperContentProps,
@@ -51,7 +51,7 @@ export const useTooltipContentProps = {
     disabled: {
       type: Boolean,
     },
-  }),
+  } as const),
 }
 
 export const useTooltipTriggerProps = {
diff --git a/packages/components/tooltip/src/tooltip.vue b/packages/components/tooltip/src/tooltip.vue
index 03b4573169..416c3303d0 100644
--- a/packages/components/tooltip/src/tooltip.vue
+++ b/packages/components/tooltip/src/tooltip.vue
@@ -58,8 +58,7 @@ import {
   usePopperArrowProps,
 } from '@element-plus/components/popper'
 
-import { debugWarn } from '@element-plus/utils/error'
-import { isBool, isUndefined } from '@element-plus/utils/util'
+import { debugWarn, isBoolean, isUndefined } from '@element-plus/utils-v2'
 import {
   usePopperContainer,
   useId,
@@ -112,7 +111,9 @@ export default defineComponent({
           '`visible-arrow` is about to be deprecated in the next major version, please use `show-arrow` instead'
         )
       }
-      return isBool(props.visibleArrow) ? props.visibleArrow : props.showArrow
+      return isBoolean(props.visibleArrow)
+        ? props.visibleArrow
+        : props.showArrow
     })
 
     const id = useId()
@@ -137,7 +138,7 @@ export default defineComponent({
       close: hide,
     })
 
-    const controlled = computed(() => isBool(props.visible))
+    const controlled = computed(() => isBoolean(props.visible))
 
     provide(TOOLTIP_INJECTION_KEY, {
       controlled,
diff --git a/packages/components/tooltip/src/utils.ts b/packages/components/tooltip/src/utils.ts
index a223aedecb..c12876e1dd 100644
--- a/packages/components/tooltip/src/utils.ts
+++ b/packages/components/tooltip/src/utils.ts
@@ -1,5 +1,5 @@
 import { unref } from 'vue'
-import { isArray } from '@element-plus/utils/util'
+import { isArray } from '@element-plus/utils-v2'
 import type { Ref } from 'vue'
 import type { Trigger } from './tooltip'
 
diff --git a/packages/components/transfer/index.ts b/packages/components/transfer/index.ts
index 2d4a578bc1..1f92f15f56 100644
--- a/packages/components/transfer/index.ts
+++ b/packages/components/transfer/index.ts
@@ -1,7 +1,7 @@
 import Transfer from './src/index.vue'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Transfer.install = (app: App): void => {
   app.component(Transfer.name, Transfer)
diff --git a/packages/components/transfer/src/index.vue b/packages/components/transfer/src/index.vue
index 9a15757838..94679dfff8 100644
--- a/packages/components/transfer/src/index.vue
+++ b/packages/components/transfer/src/index.vue
@@ -68,7 +68,7 @@ import ElButton from '@element-plus/components/button'
 import ElIcon from '@element-plus/components/icon'
 import { elFormItemKey } from '@element-plus/tokens'
 import { useLocale } from '@element-plus/hooks'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import TransferPanel from './transfer-panel.vue'
 import { useComputedData } from './useComputedData'
diff --git a/packages/components/transfer/src/transfer.ts b/packages/components/transfer/src/transfer.ts
index 897b664e89..2227f71360 100644
--- a/packages/components/transfer/src/transfer.ts
+++ b/packages/components/transfer/src/transfer.ts
@@ -1,4 +1,4 @@
-import { CHANGE_EVENT } from '@element-plus/utils/constants'
+import { CHANGE_EVENT } from '@element-plus/constants'
 
 import type { VNode } from 'vue'
 
diff --git a/packages/components/transfer/src/useMove.ts b/packages/components/transfer/src/useMove.ts
index ee0df53dce..f8cf5db6f9 100644
--- a/packages/components/transfer/src/useMove.ts
+++ b/packages/components/transfer/src/useMove.ts
@@ -1,4 +1,4 @@
-import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 
 import type { ComputedRef } from 'vue'
 import type {
diff --git a/packages/components/tree-v2/index.ts b/packages/components/tree-v2/index.ts
index 90f6bbc468..0d3987609d 100644
--- a/packages/components/tree-v2/index.ts
+++ b/packages/components/tree-v2/index.ts
@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import TreeV2 from './src/tree.vue'
 
 export const ElTreeV2 = withInstall(TreeV2)
diff --git a/packages/components/tree-v2/src/virtual-tree.ts b/packages/components/tree-v2/src/virtual-tree.ts
index ef65015d0b..eb606d5c50 100644
--- a/packages/components/tree-v2/src/virtual-tree.ts
+++ b/packages/components/tree-v2/src/virtual-tree.ts
@@ -1,4 +1,4 @@
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils-v2'
 import type { InjectionKey } from 'vue'
 import type { TreeNodeData } from '../../tree/src/tree.type'
 import type {
diff --git a/packages/components/tree/index.ts b/packages/components/tree/index.ts
index 6c542f8f79..b93fd14adc 100644
--- a/packages/components/tree/index.ts
+++ b/packages/components/tree/index.ts
@@ -1,7 +1,7 @@
 import Tree from './src/tree.vue'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Tree.install = (app: App): void => {
   app.component(Tree.name, Tree)
diff --git a/packages/components/tree/src/model/node.ts b/packages/components/tree/src/model/node.ts
index d689b6d0b0..7e5edd0803 100644
--- a/packages/components/tree/src/model/node.ts
+++ b/packages/components/tree/src/model/node.ts
@@ -1,5 +1,5 @@
 import { reactive } from 'vue'
-import { hasOwn } from '@vue/shared'
+import { hasOwn } from '@element-plus/utils-v2'
 import { markNodeData, NODE_KEY } from './util'
 import type TreeStore from './tree-store'
 
diff --git a/packages/components/tree/src/model/tree-store.ts b/packages/components/tree/src/model/tree-store.ts
index 77dbe18cf5..a5f7dffe4e 100644
--- a/packages/components/tree/src/model/tree-store.ts
+++ b/packages/components/tree/src/model/tree-store.ts
@@ -1,4 +1,4 @@
-import { hasOwn } from '@vue/shared'
+import { hasOwn } from '@element-plus/utils-v2'
 import Node from './node'
 import { getNodeKey } from './util'
 
diff --git a/packages/components/tree/src/tree-node.vue b/packages/components/tree/src/tree-node.vue
index d7001b372c..705f3b49b6 100644
--- a/packages/components/tree/src/tree-node.vue
+++ b/packages/components/tree/src/tree-node.vue
@@ -96,7 +96,7 @@ import ElCollapseTransition from '@element-plus/components/collapse-transition'
 import ElCheckbox from '@element-plus/components/checkbox'
 import { ElIcon } from '@element-plus/components/icon'
 import { CaretRight, Loading } from '@element-plus/icons-vue'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import NodeContent from './tree-node-content.vue'
 import { getNodeKey as getNodeKeyUtil } from './model/util'
 import { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'
diff --git a/packages/components/upload/index.ts b/packages/components/upload/index.ts
index c7cafeeb92..518ee6904a 100644
--- a/packages/components/upload/index.ts
+++ b/packages/components/upload/index.ts
@@ -1,7 +1,7 @@
 import Upload from './src/index.vue'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Upload.install = (app: App): void => {
   app.component(Upload.name, Upload)
diff --git a/packages/components/upload/src/ajax.ts b/packages/components/upload/src/ajax.ts
index edac8d2807..3eda3d328b 100644
--- a/packages/components/upload/src/ajax.ts
+++ b/packages/components/upload/src/ajax.ts
@@ -1,4 +1,4 @@
-import { hasOwn } from '@vue/shared'
+import { hasOwn } from '@element-plus/utils-v2'
 import type {
   ElUploadProgressEvent,
   ElUploadRequestOptions,
diff --git a/packages/components/upload/src/upload.vue b/packages/components/upload/src/upload.vue
index 528dc7b828..41cf66e4f8 100644
--- a/packages/components/upload/src/upload.vue
+++ b/packages/components/upload/src/upload.vue
@@ -27,13 +27,14 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-import { NOOP, hasOwn } from '@vue/shared'
+import { NOOP } from '@vue/shared'
+import { hasOwn } from '@element-plus/utils-v2'
 
 import ajax from './ajax'
 import UploadDragger from './upload-dragger.vue'
 
 import type { PropType } from 'vue'
-import type { Indexable, Nullable } from '@element-plus/utils/types'
+import type { Nullable } from '@element-plus/utils/types'
 import type { ListType, UploadFile, ElFile } from './upload.type'
 
 type IFileHanlder = (
@@ -152,7 +153,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const reqs = ref({} as Indexable<XMLHttpRequest | Promise<any>>)
+    const reqs = ref({} as Record<string, XMLHttpRequest | Promise<any>>)
     const mouseover = ref(false)
     const inputRef = ref(null as Nullable<HTMLInputElement>)
 
diff --git a/packages/components/virtual-list/src/builders/build-grid.ts b/packages/components/virtual-list/src/builders/build-grid.ts
index 9199858085..2400277c8c 100644
--- a/packages/components/virtual-list/src/builders/build-grid.ts
+++ b/packages/components/virtual-list/src/builders/build-grid.ts
@@ -10,12 +10,9 @@ import {
   h,
   unref,
 } from 'vue'
-import { hasOwn } from '@vue/shared'
-
 import { isClient } from '@vueuse/core'
-import { isNumber, isString } from '@element-plus/utils/util'
+import { hasOwn, isNumber, isString } from '@element-plus/utils-v2'
 import getScrollBarWidth from '@element-plus/utils/scrollbar-width'
-
 import Scrollbar from '../components/scrollbar'
 import { useGridWheel } from '../hooks/use-grid-wheel'
 import { useCache } from '../hooks/use-cache'
@@ -33,8 +30,7 @@ import {
   RTL_OFFSET_POS_ASC,
 } from '../defaults'
 
-import type { CSSProperties, VNode, VNodeChild } from 'vue'
-import type { StyleValue } from '@element-plus/utils/types'
+import type { CSSProperties, VNode, VNodeChild, StyleValue } from 'vue'
 import type { GridConstructorProps, Alignment, ScrollbarExpose } from '../types'
 import type { VirtualizedGridProps } from '../props'
 
diff --git a/packages/components/virtual-list/src/builders/build-list.ts b/packages/components/virtual-list/src/builders/build-list.ts
index cd13517888..d019cd7f1c 100644
--- a/packages/components/virtual-list/src/builders/build-list.ts
+++ b/packages/components/virtual-list/src/builders/build-list.ts
@@ -10,11 +10,8 @@ import {
   h,
   unref,
 } from 'vue'
-import { hasOwn } from '@vue/shared'
-
 import { isClient } from '@vueuse/core'
-import { isNumber, isString } from '@element-plus/utils/util'
-
+import { hasOwn, isNumber, isString } from '@element-plus/utils-v2'
 import { useCache } from '../hooks/use-cache'
 import useWheel from '../hooks/use-wheel'
 import Scrollbar from '../components/scrollbar'
diff --git a/packages/components/virtual-list/src/components/dynamic-size-grid.ts b/packages/components/virtual-list/src/components/dynamic-size-grid.ts
index 3a986d87af..15aa523827 100644
--- a/packages/components/virtual-list/src/components/dynamic-size-grid.ts
+++ b/packages/components/virtual-list/src/components/dynamic-size-grid.ts
@@ -1,5 +1,5 @@
 import { isFunction } from '@vue/shared'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 import createGrid from '../builders/build-grid'
 
 import {
diff --git a/packages/components/virtual-list/src/components/dynamic-size-list.ts b/packages/components/virtual-list/src/components/dynamic-size-list.ts
index 70c69bc39f..def1cc72e0 100644
--- a/packages/components/virtual-list/src/components/dynamic-size-list.ts
+++ b/packages/components/virtual-list/src/components/dynamic-size-list.ts
@@ -1,4 +1,4 @@
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 
 import createList from '../builders/build-list'
 
diff --git a/packages/components/virtual-list/src/components/fixed-size-grid.ts b/packages/components/virtual-list/src/components/fixed-size-grid.ts
index d99523c35a..b2a150103e 100644
--- a/packages/components/virtual-list/src/components/fixed-size-grid.ts
+++ b/packages/components/virtual-list/src/components/fixed-size-grid.ts
@@ -1,5 +1,4 @@
-import { isNumber } from '@element-plus/utils/util'
-import { throwError } from '@element-plus/utils/error'
+import { isNumber, throwError } from '@element-plus/utils-v2'
 import createGrid from '../builders/build-grid'
 
 import {
diff --git a/packages/components/virtual-list/src/components/fixed-size-list.ts b/packages/components/virtual-list/src/components/fixed-size-list.ts
index 830b1f023d..d65375b1fe 100644
--- a/packages/components/virtual-list/src/components/fixed-size-list.ts
+++ b/packages/components/virtual-list/src/components/fixed-size-list.ts
@@ -1,5 +1,4 @@
-import { isString } from '@element-plus/utils/util'
-import { throwError } from '@element-plus/utils/error'
+import { isString, throwError } from '@element-plus/utils-v2'
 import buildList from '../builders/build-list'
 import { isHorizontal } from '../utils'
 import {
diff --git a/packages/components/virtual-list/src/props.ts b/packages/components/virtual-list/src/props.ts
index cdfd85be21..528abd7e01 100644
--- a/packages/components/virtual-list/src/props.ts
+++ b/packages/components/virtual-list/src/props.ts
@@ -3,11 +3,10 @@ import {
   buildProps,
   definePropType,
   mutable,
-} from '@element-plus/utils/props'
+} from '@element-plus/utils-v2'
 import { VERTICAL } from './defaults'
 
-import type { ExtractPropTypes } from 'vue'
-import type { StyleValue } from '@element-plus/utils/types'
+import type { ExtractPropTypes, StyleValue } from 'vue'
 import type { ItemSize } from './types'
 
 const itemSize = buildProp({
diff --git a/packages/constants/date-pick.ts b/packages/constants/date-pick.ts
new file mode 100644
index 0000000000..4155b6738a
--- /dev/null
+++ b/packages/constants/date-pick.ts
@@ -0,0 +1,12 @@
+export const datePickTypes = [
+  'year',
+  'month',
+  'date',
+  'dates',
+  'week',
+  'datetime',
+  'datetimerange',
+  'daterange',
+  'monthrange',
+] as const
+export type DatePickType = typeof datePickTypes[number]
diff --git a/packages/utils/constants.ts b/packages/constants/event.ts
similarity index 99%
rename from packages/utils/constants.ts
rename to packages/constants/event.ts
index 4fa22c5787..643495d834 100644
--- a/packages/utils/constants.ts
+++ b/packages/constants/event.ts
@@ -1,4 +1,3 @@
 export const UPDATE_MODEL_EVENT = 'update:modelValue'
-
 export const CHANGE_EVENT = 'change'
 export const INPUT_EVENT = 'input'
diff --git a/packages/constants/index.ts b/packages/constants/index.ts
new file mode 100644
index 0000000000..492c2e2a06
--- /dev/null
+++ b/packages/constants/index.ts
@@ -0,0 +1,3 @@
+export * from './date-pick'
+export * from './event'
+export * from './size'
diff --git a/packages/constants/package.json b/packages/constants/package.json
new file mode 100644
index 0000000000..ac82cec1d2
--- /dev/null
+++ b/packages/constants/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "@element-plus/constants",
+  "private": true,
+  "license": "MIT"
+}
diff --git a/packages/constants/size.ts b/packages/constants/size.ts
new file mode 100644
index 0000000000..ffbe0926db
--- /dev/null
+++ b/packages/constants/size.ts
@@ -0,0 +1,2 @@
+export const componentSizes = ['default', 'small', 'large'] as const
+export type ComponentSize = typeof componentSizes[number]
diff --git a/packages/directives/mousewheel/index.ts b/packages/directives/mousewheel/index.ts
index ef2ce55aad..f22f5be80f 100644
--- a/packages/directives/mousewheel/index.ts
+++ b/packages/directives/mousewheel/index.ts
@@ -1,5 +1,5 @@
 import normalizeWheel from 'normalize-wheel-es'
-import { isFirefox } from '@element-plus/utils/util'
+import { isFirefox } from '@element-plus/utils-v2'
 import type { ObjectDirective, DirectiveBinding } from 'vue'
 
 const mousewheel = function (element, callback) {
diff --git a/packages/hooks/__tests__/use-deprecated.spec.ts b/packages/hooks/__tests__/use-deprecated.spec.ts
index d4edeb615b..7a38c89bdd 100644
--- a/packages/hooks/__tests__/use-deprecated.spec.ts
+++ b/packages/hooks/__tests__/use-deprecated.spec.ts
@@ -1,9 +1,9 @@
 import { computed, defineComponent, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import { useDeprecated } from '../use-deprecated'
 
-jest.mock('@element-plus/utils/error', () => {
+jest.mock('@element-plus/utils-v2/error', () => {
   return {
     debugWarn: jest.fn(),
   }
diff --git a/packages/hooks/use-attrs/index.ts b/packages/hooks/use-attrs/index.ts
index c0ac7b944e..53190109a7 100644
--- a/packages/hooks/use-attrs/index.ts
+++ b/packages/hooks/use-attrs/index.ts
@@ -1,6 +1,6 @@
 import { getCurrentInstance, computed } from 'vue'
 import { fromPairs } from 'lodash-unified'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 
 import type { ComputedRef } from 'vue'
 
diff --git a/packages/hooks/use-common-props/index.ts b/packages/hooks/use-common-props/index.ts
index 5ea531ef76..859137836e 100644
--- a/packages/hooks/use-common-props/index.ts
+++ b/packages/hooks/use-common-props/index.ts
@@ -1,14 +1,15 @@
 import { ref, unref, inject, computed } from 'vue'
 import { elFormItemKey, elFormKey } from '@element-plus/tokens'
-import { buildProp, componentSize } from '@element-plus/utils/props'
+import { buildProp } from '@element-plus/utils-v2'
+import { componentSizes } from '@element-plus/constants'
 import { useProp } from '../use-prop'
 import { useGlobalConfig } from '../use-global-config'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 import type { MaybeRef } from '@vueuse/core'
 
 export const useSizeProp = buildProp({
   type: String,
-  values: componentSize,
+  values: componentSizes,
   required: false,
 } as const)
 
diff --git a/packages/hooks/use-delayed-toggle/index.ts b/packages/hooks/use-delayed-toggle/index.ts
index d162395058..caa2a14d6a 100644
--- a/packages/hooks/use-delayed-toggle/index.ts
+++ b/packages/hooks/use-delayed-toggle/index.ts
@@ -1,5 +1,5 @@
 import { unref } from 'vue'
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import { useTimeout } from '../use-timeout'
 
 import type { ToRefs, ExtractPropTypes } from 'vue'
diff --git a/packages/hooks/use-deprecated/index.ts b/packages/hooks/use-deprecated/index.ts
index 2f135340ec..82fddbd25d 100644
--- a/packages/hooks/use-deprecated/index.ts
+++ b/packages/hooks/use-deprecated/index.ts
@@ -1,5 +1,5 @@
 import { unref, watch } from 'vue'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 
 import type { MaybeRef } from '@vueuse/core'
 
diff --git a/packages/hooks/use-draggable/index.ts b/packages/hooks/use-draggable/index.ts
index 020e57729d..aa6b42febd 100644
--- a/packages/hooks/use-draggable/index.ts
+++ b/packages/hooks/use-draggable/index.ts
@@ -1,5 +1,5 @@
 import { onBeforeUnmount, onMounted, watchEffect } from 'vue'
-import { addUnit } from '@element-plus/utils/util'
+import { addUnit } from '@element-plus/utils-v2'
 import type { Ref, ComputedRef } from 'vue'
 
 export const useDraggable = (
diff --git a/packages/hooks/use-global-config/index.ts b/packages/hooks/use-global-config/index.ts
index d980627643..32643e5f82 100644
--- a/packages/hooks/use-global-config/index.ts
+++ b/packages/hooks/use-global-config/index.ts
@@ -1,7 +1,7 @@
 import { inject, ref, computed, unref, provide, getCurrentInstance } from 'vue'
 import { configProviderContextKey } from '@element-plus/tokens'
+import { debugWarn } from '@element-plus/utils-v2'
 import { merge } from '@element-plus/utils/util'
-import { debugWarn } from '@element-plus/utils/error'
 import type { MaybeRef } from '@vueuse/core'
 import type { Ref, App } from 'vue'
 import type { ConfigProviderContext } from '@element-plus/tokens'
diff --git a/packages/hooks/use-id/index.ts b/packages/hooks/use-id/index.ts
index f795e8ee91..8f71d16164 100644
--- a/packages/hooks/use-id/index.ts
+++ b/packages/hooks/use-id/index.ts
@@ -1,6 +1,6 @@
 import { computed, inject, unref } from 'vue'
 import { isClient } from '@vueuse/core'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 
 import type { InjectionKey, Ref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
diff --git a/packages/hooks/use-lockscreen/index.ts b/packages/hooks/use-lockscreen/index.ts
index ed95983b7e..6783542c16 100644
--- a/packages/hooks/use-lockscreen/index.ts
+++ b/packages/hooks/use-lockscreen/index.ts
@@ -2,7 +2,7 @@ import { watch, isRef, onScopeDispose } from 'vue'
 
 import { isClient } from '@vueuse/core'
 import getScrollBarWidth from '@element-plus/utils/scrollbar-width'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 import {
   addClass,
   removeClass,
diff --git a/packages/hooks/use-model-toggle/index.ts b/packages/hooks/use-model-toggle/index.ts
index e58223ed62..ae9d756252 100644
--- a/packages/hooks/use-model-toggle/index.ts
+++ b/packages/hooks/use-model-toggle/index.ts
@@ -1,8 +1,7 @@
 import { computed, getCurrentInstance, watch, onMounted } from 'vue'
 import { isFunction } from '@vue/shared'
 import { isClient } from '@vueuse/core'
-import { isBool } from '@element-plus/utils/util'
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { isBoolean, buildProp, definePropType } from '@element-plus/utils-v2'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
 import type { Ref, ComponentPublicInstance, ExtractPropTypes } from 'vue'
@@ -97,7 +96,7 @@ export const createModelToggleComposable = (name: string) => {
     }
 
     const onChange = (val: boolean) => {
-      if (!isBool(val)) return
+      if (!isBoolean(val)) return
       if (props.disabled && val) {
         if (hasUpdateHandler.value) {
           emit(updateEventKey, false)
diff --git a/packages/hooks/use-popper-container/index.ts b/packages/hooks/use-popper-container/index.ts
index 858d6b2695..c99efc1d0d 100644
--- a/packages/hooks/use-popper-container/index.ts
+++ b/packages/hooks/use-popper-container/index.ts
@@ -1,6 +1,6 @@
 import { onBeforeMount } from 'vue'
 import { isClient } from '@vueuse/core'
-import { generateId } from '@element-plus/utils/util'
+import { generateId } from '@element-plus/utils-v2'
 
 let cachedContainer: HTMLElement
 
diff --git a/packages/tokens/form.ts b/packages/tokens/form.ts
index 48d84816b9..cd4fc88f72 100644
--- a/packages/tokens/form.ts
+++ b/packages/tokens/form.ts
@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue'
 import type { ValidateFieldsError } from 'async-validator'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export interface ElFormContext {
   registerLabelWidth(width: number, oldWidth: number): void
diff --git a/packages/utils-v2/arrays.ts b/packages/utils-v2/arrays.ts
new file mode 100644
index 0000000000..72d4677c21
--- /dev/null
+++ b/packages/utils-v2/arrays.ts
@@ -0,0 +1 @@
+export const unique = <T>(arr: T[]) => [...new Set(arr)]
diff --git a/packages/utils-v2/browser.ts b/packages/utils-v2/browser.ts
new file mode 100644
index 0000000000..d4468ad891
--- /dev/null
+++ b/packages/utils-v2/browser.ts
@@ -0,0 +1,4 @@
+import { isClient } from '@vueuse/core'
+
+export const isFirefox = (): boolean =>
+  isClient && /firefox/i.test(window.navigator.userAgent)
diff --git a/packages/utils/error.ts b/packages/utils-v2/error.ts
similarity index 100%
rename from packages/utils/error.ts
rename to packages/utils-v2/error.ts
diff --git a/packages/utils-v2/i18n.ts b/packages/utils-v2/i18n.ts
new file mode 100644
index 0000000000..4c6fdf25b2
--- /dev/null
+++ b/packages/utils-v2/i18n.ts
@@ -0,0 +1,2 @@
+export const isKorean = (text: string) =>
+  /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(text)
diff --git a/packages/utils-v2/index.ts b/packages/utils-v2/index.ts
new file mode 100644
index 0000000000..2b765c9184
--- /dev/null
+++ b/packages/utils-v2/index.ts
@@ -0,0 +1,11 @@
+// Internal code, don't use in your app!
+export * from './vue'
+export * from './arrays'
+export * from './browser'
+export * from './error'
+export * from './i18n'
+export * from './objects'
+export * from './rand'
+export * from './strings'
+export * from './types'
+export * from './typescript'
diff --git a/packages/utils-v2/objects.ts b/packages/utils-v2/objects.ts
new file mode 100644
index 0000000000..ab32b25e0a
--- /dev/null
+++ b/packages/utils-v2/objects.ts
@@ -0,0 +1,2 @@
+export const keyOf = <T>(arr: T) => Object.keys(arr) as Array<keyof T>
+export { hasOwn } from '@vue/shared'
diff --git a/packages/utils-v2/package.json b/packages/utils-v2/package.json
new file mode 100644
index 0000000000..0965dc28aa
--- /dev/null
+++ b/packages/utils-v2/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@element-plus/utils-v2",
+  "private": true,
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  }
+}
diff --git a/packages/utils-v2/rand.ts b/packages/utils-v2/rand.ts
new file mode 100644
index 0000000000..bed98dd792
--- /dev/null
+++ b/packages/utils-v2/rand.ts
@@ -0,0 +1,12 @@
+/**
+ * Generate random number in range [0, 1000]
+ * Maybe replace with [uuid](https://www.npmjs.com/package/uuid)
+ */
+export const generateId = (): number => Math.floor(Math.random() * 10000)
+
+/**
+ * Generating a random int in range (0, max - 1)
+ * @param max {number}
+ */
+export const getRandomInt = (max: number) =>
+  Math.floor(Math.random() * Math.floor(max))
diff --git a/packages/utils-v2/strings.ts b/packages/utils-v2/strings.ts
new file mode 100644
index 0000000000..3ae5ee84b7
--- /dev/null
+++ b/packages/utils-v2/strings.ts
@@ -0,0 +1,6 @@
+export {
+  camelize,
+  capitalize,
+  hyphenate,
+  hyphenate as kebabCase, // alias
+} from '@vue/shared'
diff --git a/packages/utils/tests/prop.spec.ts b/packages/utils-v2/tests/prop.spec.ts
similarity index 75%
rename from packages/utils/tests/prop.spec.ts
rename to packages/utils-v2/tests/prop.spec.ts
index f16a7d5924..179ef9edb5 100644
--- a/packages/utils/tests/prop.spec.ts
+++ b/packages/utils-v2/tests/prop.spec.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-types */
 
 import { expectTypeOf } from 'expect-type'
-import { buildProp, definePropType, mutable, keyOf, buildProps } from '../props'
-import type { propKey } from '../props'
+import { buildProp, definePropType, mutable, keyOf, buildProps } from '..'
+import type { propKey } from '../vue/prop'
 
 import type { PropType, ExtractPropTypes } from 'vue'
 
@@ -355,85 +355,92 @@ describe('buildProps', () => {
       } as const,
     } as const)
 
-    expectTypeOf(props).toEqualTypeOf<{
-      readonly type: {
-        readonly type: PropType<string>
-        readonly required: false
-        readonly default: 'hello'
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-      }
+    expectTypeOf(props.type).toEqualTypeOf<{
+      readonly type: PropType<string>
+      readonly required: false
+      readonly default: 'hello'
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+    }>()
 
-      readonly key1: {
-        readonly type: PropType<'a' | 'b'>
-        readonly required: false
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-        readonly default: undefined
-      }
-      readonly key2: {
-        readonly type: PropType<1 | 2 | 3 | 4>
-        readonly required: false
-        readonly default: undefined
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-      }
-      readonly key3: {
-        readonly type: PropType<1 | 2 | 3 | 4>
-        readonly required: false
-        readonly default: 2
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-      }
-      readonly key4: {
-        readonly type: PropType<'a' | 'b'>
-        readonly required: false
-        readonly default: 'a'
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-      }
-      readonly key5: BooleanConstructor
-      readonly key6: StringConstructor
-      readonly key7: null
-      readonly key8: ObjectConstructor
-      readonly key9: DateConstructor
-      readonly key10: SetConstructor
-      readonly key11: undefined
-      readonly key12: {
-        readonly type: PropType<string>
-        readonly required: false
-        readonly default: undefined
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-      }
-      readonly key13: {
-        readonly type: PropType<string | number | Function>
-        readonly required: false
-        readonly default: '123'
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-      }
-      readonly key14: {
-        readonly type: PropType<Function>
-        readonly required: false
-        readonly default: () => '123'
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-      }
-      readonly key15: {
-        readonly type: PropType<Function>
-        readonly required: false
-        readonly default: () => () => '123'
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-      }
-      readonly key16: {
-        readonly type: PropType<string>
-        readonly required: false
-        readonly default: '123'
-        readonly validator: ((val: unknown) => boolean) | undefined
-        [propKey]: true
-      }
+    expectTypeOf(props.key1).toEqualTypeOf<{
+      readonly type: PropType<'a' | 'b'>
+      readonly required: false
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+      readonly default: undefined
+    }>()
+
+    expectTypeOf(props.key2).toEqualTypeOf<{
+      readonly type: PropType<1 | 2 | 3 | 4>
+      readonly required: false
+      readonly default: undefined
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+    }>()
+
+    expectTypeOf(props.key3).toEqualTypeOf<{
+      readonly type: PropType<1 | 2 | 3 | 4>
+      readonly required: false
+      readonly default: 2
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+    }>()
+
+    expectTypeOf(props.key4).toEqualTypeOf<{
+      readonly type: PropType<'a' | 'b'>
+      readonly required: false
+      readonly default: 'a'
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+    }>()
+
+    expectTypeOf(props.key5).toEqualTypeOf<BooleanConstructor>()
+    expectTypeOf(props.key6).toEqualTypeOf<StringConstructor>()
+    expectTypeOf(props.key7).toEqualTypeOf<null>()
+    expectTypeOf(props.key8).toEqualTypeOf<ObjectConstructor>()
+    expectTypeOf(props.key9).toEqualTypeOf<DateConstructor>()
+    expectTypeOf(props.key10).toEqualTypeOf<SetConstructor>()
+    expectTypeOf(props.key11).toEqualTypeOf<undefined>()
+
+    expectTypeOf(props.key12).toEqualTypeOf<{
+      readonly type: PropType<string>
+      readonly required: false
+      readonly default: undefined
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+    }>()
+
+    expectTypeOf(props.key13).toEqualTypeOf<{
+      readonly type: PropType<string | number | Function>
+      readonly required: false
+      readonly default: '123'
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+    }>()
+
+    expectTypeOf(props.key14).toEqualTypeOf<{
+      readonly type: PropType<Function>
+      readonly required: false
+      readonly default: () => '123'
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+    }>()
+
+    expectTypeOf(props.key15).toEqualTypeOf<{
+      readonly type: PropType<Function>
+      readonly required: false
+      readonly default: () => () => '123'
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+    }>()
+
+    expectTypeOf(props.key16).toEqualTypeOf<{
+      readonly type: PropType<string>
+      readonly required: false
+      readonly default: '123'
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 })
diff --git a/packages/utils-v2/types.ts b/packages/utils-v2/types.ts
new file mode 100644
index 0000000000..32cdcabe54
--- /dev/null
+++ b/packages/utils-v2/types.ts
@@ -0,0 +1,20 @@
+import { isArray, isObject } from '@vue/shared'
+
+export {
+  isArray,
+  isFunction,
+  isObject,
+  isString,
+  isDate,
+  isPromise,
+  isSymbol,
+} from '@vue/shared'
+export { isBoolean, isNumber } from '@vueuse/core'
+export { isVNode } from 'vue'
+
+export const isUndefined = (val: any): val is undefined => val === undefined
+
+export const isEmpty = (val: unknown) =>
+  (!val && val !== 0) ||
+  (isArray(val) && val.length === 0) ||
+  (isObject(val) && !Object.keys(val).length)
diff --git a/packages/utils-v2/typescript.ts b/packages/utils-v2/typescript.ts
new file mode 100644
index 0000000000..860e4acc58
--- /dev/null
+++ b/packages/utils-v2/typescript.ts
@@ -0,0 +1,6 @@
+export const mutable = <T extends readonly any[] | Record<string, unknown>>(
+  val: T
+) => val as Mutable<typeof val>
+export type Mutable<T> = { -readonly [P in keyof T]: T[P] }
+
+export type HTMLElementCustomized<T> = HTMLElement & T
diff --git a/packages/utils/icon.ts b/packages/utils-v2/vue/icon.ts
similarity index 94%
rename from packages/utils/icon.ts
rename to packages/utils-v2/vue/icon.ts
index cb672baff5..fcbb72c5ab 100644
--- a/packages/utils/icon.ts
+++ b/packages/utils-v2/vue/icon.ts
@@ -8,7 +8,7 @@ import {
   CircleCheck,
   CircleClose,
 } from '@element-plus/icons-vue'
-import { definePropType } from './props'
+import { definePropType } from './prop'
 import type { Component } from 'vue'
 
 export const iconPropType = definePropType<string | Component>([String, Object])
diff --git a/packages/utils-v2/vue/index.ts b/packages/utils-v2/vue/index.ts
new file mode 100644
index 0000000000..cdadd9479a
--- /dev/null
+++ b/packages/utils-v2/vue/index.ts
@@ -0,0 +1,7 @@
+export * from './icon'
+export * from './install'
+export * from './prop'
+export * from './style'
+export * from './typescript'
+export * from './validator'
+export * from './vnode'
diff --git a/packages/utils/with-install.ts b/packages/utils-v2/vue/install.ts
similarity index 94%
rename from packages/utils/with-install.ts
rename to packages/utils-v2/vue/install.ts
index 650d6907b7..d16feec144 100644
--- a/packages/utils/with-install.ts
+++ b/packages/utils-v2/vue/install.ts
@@ -1,5 +1,5 @@
 import { NOOP } from '@vue/shared'
-import type { SFCWithInstall } from './types'
+import type { SFCWithInstall } from './typescript'
 
 export const withInstall = <T, E extends Record<string, any>>(
   main: T,
diff --git a/packages/utils/props.ts b/packages/utils-v2/vue/prop.ts
similarity index 93%
rename from packages/utils/props.ts
rename to packages/utils-v2/vue/prop.ts
index 6f144652b3..99bdf33d37 100644
--- a/packages/utils/props.ts
+++ b/packages/utils-v2/vue/prop.ts
@@ -1,8 +1,7 @@
 import { warn } from 'vue'
-import { isObject } from '@vue/shared'
 import { fromPairs } from 'lodash-unified'
-import type { ExtractPropTypes, PropType } from '@vue/runtime-core'
-import type { Mutable } from './types'
+import { isObject } from '../types'
+import type { ExtractPropTypes, PropType } from 'vue'
 
 const wrapperKey = Symbol()
 export type PropWrapper<T> = { [wrapperKey]: T }
@@ -201,10 +200,3 @@ export const buildProps = <
 
 export const definePropType = <T>(val: any) =>
   ({ [wrapperKey]: val } as PropWrapper<T>)
-
-export const keyOf = <T>(arr: T) => Object.keys(arr) as Array<keyof T>
-export const mutable = <T extends readonly any[] | Record<string, unknown>>(
-  val: T
-) => val as Mutable<typeof val>
-
-export const componentSize = ['large', 'default', 'small'] as const
diff --git a/packages/utils-v2/vue/style.ts b/packages/utils-v2/vue/style.ts
new file mode 100644
index 0000000000..2391559e34
--- /dev/null
+++ b/packages/utils-v2/vue/style.ts
@@ -0,0 +1,14 @@
+import { isString, isNumber } from '../types'
+import { debugWarn } from '../error'
+
+const SCOPE = 'utils-v2/vue/style'
+
+export function addUnit(value: string | number, defaultUnit = 'px') {
+  if (isString(value)) {
+    return value
+  } else if (isNumber(value)) {
+    return `${value}${defaultUnit}`
+  }
+  debugWarn(SCOPE, 'binding value must be a string or number')
+  return ''
+}
diff --git a/packages/utils-v2/vue/typescript.ts b/packages/utils-v2/vue/typescript.ts
new file mode 100644
index 0000000000..0b178dcfff
--- /dev/null
+++ b/packages/utils-v2/vue/typescript.ts
@@ -0,0 +1,3 @@
+import type { Plugin } from 'vue'
+
+export type SFCWithInstall<T> = T & Plugin
diff --git a/packages/utils-v2/vue/validator.ts b/packages/utils-v2/vue/validator.ts
new file mode 100644
index 0000000000..b0b8524c67
--- /dev/null
+++ b/packages/utils-v2/vue/validator.ts
@@ -0,0 +1,8 @@
+import { componentSizes, datePickTypes } from '@element-plus/constants'
+import type { ComponentSize, DatePickType } from '@element-plus/constants'
+
+export const isValidComponentSize = (val: string): val is ComponentSize | '' =>
+  ['', ...componentSizes].includes(val)
+
+export const isValidDatePickType = (val: string): val is DatePickType =>
+  ([...datePickTypes] as string[]).includes(val)
diff --git a/packages/utils-v2/vue/vnode.ts b/packages/utils-v2/vue/vnode.ts
new file mode 100644
index 0000000000..174348ca02
--- /dev/null
+++ b/packages/utils-v2/vue/vnode.ts
@@ -0,0 +1,127 @@
+import {
+  Fragment,
+  Text,
+  Comment,
+  createBlock,
+  openBlock,
+  createCommentVNode,
+  isVNode,
+  camelize,
+} from 'vue'
+import { hasOwn } from '../objects'
+import { debugWarn } from '../error'
+import type { VNode, VNodeChild, VNodeNormalizedChildren } from 'vue'
+
+const SCOPE = 'utils-v2/vue/vnode'
+
+export enum PatchFlags {
+  TEXT = 1,
+  CLASS = 2,
+  STYLE = 4,
+  PROPS = 8,
+  FULL_PROPS = 16,
+  HYDRATE_EVENTS = 32,
+  STABLE_FRAGMENT = 64,
+  KEYED_FRAGMENT = 128,
+  UNKEYED_FRAGMENT = 256,
+  NEED_PATCH = 512,
+  DYNAMIC_SLOTS = 1024,
+  HOISTED = -1,
+  BAIL = -2,
+}
+
+export function isFragment(node: VNode): boolean
+export function isFragment(node: unknown): node is VNode
+export function isFragment(node: unknown): node is VNode {
+  return isVNode(node) && node.type === Fragment
+}
+
+export function isText(node: VNode): boolean
+export function isText(node: unknown): node is VNode
+export function isText(node: unknown): node is VNode {
+  return isVNode(node) && node.type === Text
+}
+
+export function isComment(node: VNode): boolean
+export function isComment(node: unknown): node is VNode
+export function isComment(node: unknown): node is VNode {
+  return isVNode(node) && node.type === Comment
+}
+
+const TEMPLATE = 'template'
+export function isTemplate(node: VNode): boolean
+export function isTemplate(node: unknown): node is VNode
+export function isTemplate(node: unknown): node is VNode {
+  return isVNode(node) && node.type === TEMPLATE
+}
+
+/**
+ * determine if the element is a valid element type rather than fragments and comment e.g. <template> v-if
+ * @param node {VNode} node to be tested
+ */
+export function isValidElementNode(node: VNode): boolean
+export function isValidElementNode(node: unknown): node is VNode
+export function isValidElementNode(node: unknown): node is VNode {
+  return isVNode(node) && !isFragment(node) && !isComment(node)
+}
+
+/**
+ * get a valid child node (not fragment nor comment)
+ * @param node {VNode} node to be searched
+ * @param depth {number} depth to be searched
+ */
+function getChildren(
+  node: VNodeNormalizedChildren | VNodeChild,
+  depth: number
+): VNodeNormalizedChildren | VNodeChild {
+  if (isComment(node)) return
+  if (isFragment(node) || isTemplate(node)) {
+    return depth > 0 ? getFirstValidNode(node.children, depth - 1) : undefined
+  }
+  return node
+}
+
+export const getFirstValidNode = (
+  nodes: VNodeNormalizedChildren,
+  maxDepth = 3
+) => {
+  if (Array.isArray(nodes)) {
+    return getChildren(nodes[0], maxDepth)
+  } else {
+    return getChildren(nodes, maxDepth)
+  }
+}
+
+export function renderIf(
+  condition: boolean,
+  ...args: Parameters<typeof createBlock>
+) {
+  return condition ? renderBlock(...args) : createCommentVNode('v-if', true)
+}
+
+export function renderBlock(...args: Parameters<typeof createBlock>) {
+  return openBlock(), createBlock(...args)
+}
+
+export const getNormalizedProps = (node: VNode) => {
+  if (!isVNode(node)) {
+    debugWarn(SCOPE, '[getNormalizedProps] must be a VNode')
+    return {}
+  }
+
+  const raw = node.props || {}
+  const type = (isVNode(node.type) ? node.type.props : undefined) || {}
+  const props: Record<string, any> = {}
+
+  Object.keys(type).forEach((key) => {
+    if (hasOwn(type[key], 'default')) {
+      props[key] = type[key].default
+    }
+  })
+
+  Object.keys(raw).forEach((key) => {
+    props[camelize(key)] = raw[key]
+  })
+
+  return props
+}
diff --git a/packages/utils/aria.ts b/packages/utils/aria.ts
index 431483521c..6fcfb61923 100644
--- a/packages/utils/aria.ts
+++ b/packages/utils/aria.ts
@@ -1,4 +1,4 @@
-import type { Nullable } from '@element-plus/utils/types'
+import type { Nullable } from './types'
 export const EVENT_CODE = {
   tab: 'Tab',
   enter: 'Enter',
diff --git a/packages/utils/dom.ts b/packages/utils/dom.ts
index e9720cc78b..15833c5b17 100644
--- a/packages/utils/dom.ts
+++ b/packages/utils/dom.ts
@@ -1,5 +1,5 @@
+import { camelize, isObject } from '@vue/shared'
 import { isClient } from '@vueuse/core'
-import { camelize, isObject } from './util'
 import type { CSSProperties, ComponentPublicInstance, Ref } from 'vue'
 
 import type { Nullable } from './types'
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
new file mode 100644
index 0000000000..a3d8e382fa
--- /dev/null
+++ b/packages/utils/index.ts
@@ -0,0 +1,11 @@
+export * from './animation'
+export * from './aria'
+export * from './dom'
+export * from './global-nodes'
+export * from './raf'
+export * from './resize-event'
+export * from './scroll-into-view'
+export * from './scrollbar-width'
+export * from './types'
+export * from './util'
+export * from './menu'
diff --git a/packages/utils/isDef.ts b/packages/utils/isDef.ts
deleted file mode 100644
index 2ab4d41867..0000000000
--- a/packages/utils/isDef.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export function isKorean(text: string): boolean {
-  const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi
-  return reg.test(text)
-}
diff --git a/packages/utils/menu/index.ts b/packages/utils/menu/index.ts
new file mode 100644
index 0000000000..5e0084c46b
--- /dev/null
+++ b/packages/utils/menu/index.ts
@@ -0,0 +1,3 @@
+export * from './menu-bar'
+export * from './menu-item'
+export * from './submenu'
diff --git a/packages/utils/resize-event.ts b/packages/utils/resize-event.ts
index 72afc7492f..29cc552d2a 100644
--- a/packages/utils/resize-event.ts
+++ b/packages/utils/resize-event.ts
@@ -1,8 +1,8 @@
 import { isClient } from '@vueuse/core'
 
-import type { CustomizedHTMLElement } from './types'
+import type { HTMLElementCustomized } from '@element-plus/utils-v2'
 
-export type ResizableElement = CustomizedHTMLElement<{
+export type ResizableElement = HTMLElementCustomized<{
   __resizeListeners__?: Array<(...args: unknown[]) => unknown>
   __ro__?: ResizeObserver
 }>
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index eba25ff846..02cd293175 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -1,53 +1,8 @@
-import type { CSSProperties, Plugin } from 'vue'
-
-type OptionalKeys<T extends Record<string, unknown>> = {
-  [K in keyof T]: T extends Record<K, T[K]> ? never : K
-}[keyof T]
-
-type RequiredKeys<T extends Record<string, unknown>> = Exclude<
-  keyof T,
-  OptionalKeys<T>
->
-
-type MonoArgEmitter<T, Keys extends keyof T> = <K extends Keys>(
-  evt: K,
-  arg?: T[K]
-) => void
-
-type BiArgEmitter<T, Keys extends keyof T> = <K extends Keys>(
-  evt: K,
-  arg: T[K]
-) => void
-
-export type EventEmitter<T extends Record<string, unknown>> = MonoArgEmitter<
-  T,
-  OptionalKeys<T>
-> &
-  BiArgEmitter<T, RequiredKeys<T>>
-
 export type AnyFunction<T> = (...args: any[]) => T
 
 export type PartialReturnType<T extends (...args: unknown[]) => unknown> =
   Partial<ReturnType<T>>
 
-export type SFCWithInstall<T> = T & Plugin
-
 export type Nullable<T> = T | null
 
 export type RefElement = Nullable<HTMLElement>
-
-export type CustomizedHTMLElement<T> = HTMLElement & T
-
-export type Indexable<T> = {
-  [key: string]: T
-}
-
-export type Hash<T> = Indexable<T>
-
-export type TimeoutHandle = number
-
-export type ComponentSize = 'large' | 'default' | 'small'
-
-export type StyleValue = string | CSSProperties | Array<StyleValue>
-
-export type Mutable<T> = { -readonly [P in keyof T]: T[P] }
diff --git a/packages/utils/util.ts b/packages/utils/util.ts
index 739008de1f..faa8a49800 100644
--- a/packages/utils/util.ts
+++ b/packages/utils/util.ts
@@ -1,24 +1,10 @@
-import {
-  camelize,
-  capitalize,
-  extend,
-  hasOwn,
-  hyphenate,
-  isArray,
-  isObject,
-  isString,
-  isFunction,
-  looseEqual,
-  toRawType,
-} from '@vue/shared'
+import { extend, hasOwn, isFunction, looseEqual } from '@vue/shared'
 import { isEqualWith } from 'lodash-unified'
-import { isClient } from '@vueuse/core'
-import { debugWarn, throwError } from './error'
-
+import { isNumber, throwError } from '@element-plus/utils-v2'
 import type { ComponentPublicInstance, CSSProperties, Ref } from 'vue'
-import type { TimeoutHandle, Nullable } from './types'
+import type { Nullable } from './types'
 
-export const SCOPE = 'Util'
+const SCOPE = 'Util'
 
 export function toObject<T>(arr: Array<T>): Record<string, T> {
   const res = {}
@@ -82,12 +68,6 @@ export function getPropByPath(
   }
 }
 
-/**
- * Generate random number in range [0, 1000]
- * Maybe replace with [uuid](https://www.npmjs.com/package/uuid)
- */
-export const generateId = (): number => Math.floor(Math.random() * 10000)
-
 // use isEqual instead
 // export const valueEquals
 
@@ -104,14 +84,6 @@ export const coerceTruthyValueToArray = (arr) => {
   return Array.isArray(arr) ? arr : [arr]
 }
 
-// drop IE and (Edge < 79) support
-// export const isIE
-// export const isEdge
-
-export const isFirefox = function (): boolean {
-  return isClient && !!window.navigator.userAgent.match(/firefox/i)
-}
-
 export const autoprefixer = function (style: CSSProperties): CSSProperties {
   const rules = ['transform', 'transition', 'animation']
   const prefixes = ['ms-', 'webkit-']
@@ -126,26 +98,8 @@ export const autoprefixer = function (style: CSSProperties): CSSProperties {
   return style
 }
 
-export const kebabCase = hyphenate
-
 // reexport from lodash & vue shared
-export { isVNode } from 'vue'
-export {
-  hasOwn,
-  // isEmpty,
-  // isEqual,
-  isObject,
-  isArray,
-  isString,
-  capitalize,
-  camelize,
-  looseEqual,
-  extend,
-}
-
-export const isBool = (val: unknown): val is boolean => typeof val === 'boolean'
-export const isNumber = (val: unknown): val is number => typeof val === 'number'
-export const isHTMLElement = (val: unknown) => toRawType(val).startsWith('HTML')
+export { looseEqual, extend }
 
 export function rafThrottle<T extends (...args: any) => any>(fn: T): T {
   let locked = false
@@ -160,34 +114,11 @@ export function rafThrottle<T extends (...args: any) => any>(fn: T): T {
   } as T
 }
 
-export const clearTimer = (timer: Ref<TimeoutHandle>) => {
-  clearTimeout(timer.value)
+export const clearTimer = (timer: Ref<Nullable<number>>) => {
+  if (isNumber(timer.value)) clearTimeout(timer.value)
   timer.value = null
 }
 
-/**
- * Generating a random int in range (0, max - 1)
- * @param max {number}
- */
-export function getRandomInt(max: number) {
-  return Math.floor(Math.random() * Math.floor(max))
-}
-
-export function isUndefined(val: any): val is undefined {
-  return val === undefined
-}
-
-export function isEmpty(val: unknown) {
-  if (
-    (!val && val !== 0) ||
-    (isArray(val) && !val.length) ||
-    (isObject(val) && !Object.keys(val).length)
-  )
-    return true
-
-  return false
-}
-
 export function arrayFlat(arr: unknown[]) {
   return arr.reduce((acm: unknown[], item) => {
     const val = Array.isArray(item) ? arrayFlat(item) : item
@@ -195,20 +126,6 @@ export function arrayFlat(arr: unknown[]) {
   }, [])
 }
 
-export function deduplicate<T>(arr: T[]) {
-  return Array.from(new Set(arr))
-}
-
-export function addUnit(value: string | number) {
-  if (isString(value)) {
-    return value
-  } else if (isNumber(value)) {
-    return `${value}px`
-  }
-  debugWarn(SCOPE, 'binding value must be a string or number')
-  return ''
-}
-
 /**
  * Enhance `lodash.isEqual` for it always return false even two functions have completely same statements.
  * @param obj The value to compare
diff --git a/packages/utils/validators.ts b/packages/utils/validators.ts
deleted file mode 100644
index bea765eee9..0000000000
--- a/packages/utils/validators.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const isValidComponentSize = (val: string) =>
-  ['', 'large', 'default', 'small'].includes(val)
-
-export const isValidDatePickType = (val: string) =>
-  [
-    'year',
-    'month',
-    'date',
-    'dates',
-    'week',
-    'datetime',
-    'datetimerange',
-    'daterange',
-    'monthrange',
-  ].includes(val)
diff --git a/packages/utils/vnode.ts b/packages/utils/vnode.ts
deleted file mode 100644
index 4158511a43..0000000000
--- a/packages/utils/vnode.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import {
-  Fragment,
-  Text,
-  Comment,
-  createBlock,
-  openBlock,
-  createCommentVNode,
-  isVNode,
-  camelize,
-} from 'vue'
-
-import { hasOwn } from '@vue/shared'
-import { debugWarn } from './error'
-import type { VNode, VNodeTypes, VNodeChild } from 'vue'
-
-type Children = VNodeTypes[] | VNodeTypes
-
-const TEMPLATE = 'template'
-
-export const SCOPE = 'VNode'
-
-export enum PatchFlags {
-  TEXT = 1,
-  CLASS = 2,
-  STYLE = 4,
-  PROPS = 8,
-  FULL_PROPS = 16,
-  HYDRATE_EVENTS = 32,
-  STABLE_FRAGMENT = 64,
-  KEYED_FRAGMENT = 128,
-  UNKEYED_FRAGMENT = 256,
-  NEED_PATCH = 512,
-  DYNAMIC_SLOTS = 1024,
-  HOISTED = -1,
-  BAIL = -2,
-}
-
-export const isFragment = (node: unknown): node is VNode =>
-  isVNode(node) && node.type === Fragment
-
-export const isText = (node: VNodeChild) => (node as VNode).type === Text
-
-export const isComment = (node: VNodeChild) => (node as VNode).type === Comment
-
-export const isTemplate = (node: VNodeChild) =>
-  (node as VNode).type === TEMPLATE
-
-/**
- * get a valid child node (not fragment nor comment)
- * @param node {VNode} node to be searched
- * @param depth {number} depth to be searched
- */
-function getChildren(node: VNode, depth: number): undefined | VNode {
-  if (isComment(node)) return
-  if (isFragment(node) || isTemplate(node)) {
-    return depth > 0
-      ? getFirstValidNode(node.children as VNodeChild, depth - 1)
-      : undefined
-  }
-  return node
-}
-
-/**
- * determine if the element is a valid element type rather than fragments and comment e.g. <template> v-if
- * @param node {VNode} node to be tested
- */
-export const isValidElementNode = (node: unknown): node is VNode =>
-  isVNode(node) && !isFragment(node) && !isComment(node)
-
-export const getFirstValidNode = (
-  nodes: VNodeChild,
-  maxDepth = 3
-): ReturnType<typeof getChildren> => {
-  if (Array.isArray(nodes)) {
-    return getChildren(nodes[0] as VNode, maxDepth)
-  } else {
-    return getChildren(nodes as VNode, maxDepth)
-  }
-}
-
-export function renderIf(
-  condition: boolean,
-  node: VNodeTypes,
-  props: any,
-  children?: Children,
-  patchFlag?: number,
-  patchProps?: string[]
-) {
-  return condition
-    ? renderBlock(node, props, children, patchFlag, patchProps)
-    : createCommentVNode('v-if', true)
-}
-
-export function renderBlock(
-  node: VNodeTypes,
-  props: any,
-  children?: Children,
-  patchFlag?: number,
-  patchProps?: string[]
-) {
-  return openBlock(), createBlock(node, props, children, patchFlag, patchProps)
-}
-
-/**
- * todo
- * get normalized props from VNode
- * @param node
- */
-export const getNormalizedProps = (node: VNode) => {
-  if (!isVNode(node)) {
-    debugWarn(SCOPE, 'value must be a VNode')
-    return
-  }
-
-  const raw = node.props || {}
-  const type = (node.type as any).props || {}
-  const props = {} as any
-
-  Object.keys(type).forEach((key) => {
-    if (hasOwn(type[key], 'default')) {
-      props[key] = type[key].default
-    }
-  })
-
-  Object.keys(raw).forEach((key) => {
-    props[camelize(key)] = raw[key]
-  })
-
-  return props
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1e38b0eac5..5a14b6cefa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,7 @@ importers:
       '@commitlint/cli': 16.1.0
       '@commitlint/config-conventional': 16.0.0
       '@element-plus/components': workspace:*
+      '@element-plus/constants': workspace:*
       '@element-plus/directives': workspace:*
       '@element-plus/hooks': workspace:*
       '@element-plus/icons-vue': ^0.2.6
@@ -15,6 +16,7 @@ importers:
       '@element-plus/theme-chalk': workspace:*
       '@element-plus/tokens': workspace:*
       '@element-plus/utils': workspace:*
+      '@element-plus/utils-v2': workspace:*
       '@pnpm/find-workspace-packages': 3.1.40
       '@pnpm/logger': 4.0.0
       '@pnpm/types': 7.9.0
@@ -80,6 +82,7 @@ importers:
       vue-tsc: 0.31.2
     dependencies:
       '@element-plus/components': link:packages/components
+      '@element-plus/constants': link:packages/constants
       '@element-plus/directives': link:packages/directives
       '@element-plus/hooks': link:packages/hooks
       '@element-plus/icons-vue': 0.2.6_vue@3.2.27
@@ -88,6 +91,7 @@ importers:
       '@element-plus/theme-chalk': link:packages/theme-chalk
       '@element-plus/tokens': link:packages/tokens
       '@element-plus/utils': link:packages/utils
+      '@element-plus/utils-v2': link:packages/utils-v2
       '@popperjs/core': 2.11.2
       '@vueuse/core': 7.5.5_vue@3.2.27
       async-validator: 4.0.7
@@ -205,6 +209,9 @@ importers:
   packages/components:
     specifiers: {}
 
+  packages/constants:
+    specifiers: {}
+
   packages/directives:
     specifiers: {}
 
@@ -280,6 +287,9 @@ importers:
   packages/utils:
     specifiers: {}
 
+  packages/utils-v2:
+    specifiers: {}
+
   play:
     specifiers:
       '@element-plus/icons-vue': ^0.2.6