diff --git a/.gitignore b/.gitignore
index f023ec78c..d3230b3a4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,4 +17,3 @@ es
 coverage
 /fonts
 /site
-/src-mirror
diff --git a/build/before-build.js b/build/before-build.js
deleted file mode 100644
index 6a082c530..000000000
--- a/build/before-build.js
+++ /dev/null
@@ -1,67 +0,0 @@
-const fs = require('fs-extra')
-const path = require('path')
-const rollup = require('rollup')
-const vuePlugin = require('rollup-plugin-vue')
-
-const srcDir = path.resolve(__dirname, '../src')
-const srcMirrorDir = path.resolve(__dirname, '../src-mirror')
-const projectDir = path.resolve(__dirname, '..')
-
-async function findAndReplace (filePath, pattern, target) {
-  const content = (await fs.readFile(filePath)).toString()
-  if (pattern.test(content)) {
-    await fs.writeFile(filePath, content.replace(pattern, target))
-  }
-}
-
-async function traverse (root) {
-  const dir = await fs.opendir(root)
-  for await (const dirent of dir) {
-    const { name } = dirent
-    if (dirent.isDirectory()) {
-      await traverse(path.resolve(root, dirent.name))
-    } else {
-      const filePath = path.resolve(root, name)
-      // change all vue import to js
-      await findAndReplace(filePath, /\.vue/g, '.js')
-      // build js output for vue file
-      if (filePath.endsWith('.vue')) {
-        console.log('make', filePath.replace(projectDir, ''))
-        const rollupInputOptions = {
-          input: filePath,
-          external: (id) => {
-            return !/\.vue\?vue/.test(id)
-          },
-          plugins: [
-            vuePlugin({
-              file: false
-            })
-          ]
-        }
-        const rollupOutputOptions = {
-          format: 'esm',
-          file: filePath.replace(/\.vue$/, '.js')
-        }
-        const bundle = await rollup.rollup(rollupInputOptions)
-        await bundle.write(rollupOutputOptions)
-        // remove original file
-        await fs.unlink(filePath)
-      }
-    }
-  }
-}
-
-;(async () => {
-  try {
-    if (await fs.pathExists(srcMirrorDir)) {
-      await fs.emptyDir(srcMirrorDir)
-      await fs.remove(srcMirrorDir)
-    }
-    await fs.mkdir(srcMirrorDir)
-    await fs.copy(srcDir, srcMirrorDir)
-    await fs.emptyDir(path.resolve(srcMirrorDir, '_deprecated/icons'))
-    traverse(srcMirrorDir)
-  } catch (err) {
-    console.log(err)
-  }
-})()
diff --git a/build/build-icons.js b/build/build-icons.js
index 26d37ce93..93d447f1d 100644
--- a/build/build-icons.js
+++ b/build/build-icons.js
@@ -7,7 +7,7 @@
 const fs = require('fs-extra')
 const path = require('path')
 
-const iconPath = path.resolve(__dirname, '..', 'src', '_deprecated', 'icons')
+const iconPath = path.resolve(__dirname, '..', 'compat', 'icons')
 
 const cjsIconPath = path.resolve(__dirname, '..', 'lib', 'icons')
 const esmIconPath = path.resolve(__dirname, '..', 'es', 'icons')
diff --git a/package.json b/package.json
index 840e6c051..9c3464f16 100644
--- a/package.json
+++ b/package.json
@@ -7,14 +7,15 @@
   "scripts": {
     "start": "npm run dev",
     "deprecated:build:icons": "npm run clean && node build/build-icons.js",
-    "build:js": "npm run gen-version && npm run clean && node build/before-build.js && rollup -c",
-    "build:package": "npm run gen-version && npm run clean && node build/build-icons.js && node build/before-build.js && rollup -c",
+    "build:js": "npm run gen-version && npm run clean && tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json",
+    "build:package": "npm run gen-version && npm run clean && node build/build-icons.js && tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json",
     "build:site": "npm run build:package && ./build/before-build-site.sh && node build/restore-side-effects.js && cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && rm -rf node_modules/naive-ui && cp site/index.html site/404.html && node build/clear-side-effects.js",
     "build:doc": "npm run gen-version && npm run build && rm -rf build-doc/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js",
-    "clean": "rm -rf site lib es src-mirror node_modules/naive-ui",
+    "clean": "rm -rf site lib es node_modules/naive-ui",
     "dev": "npm run clean && npm run gen-version && cross-env NODE_ENV=development vite",
     "dev:ts": "npm run clean && npm run gen-version && cross-env NODE_ENV=development TUSIMPLE=true vite",
-    "lint": "npm run lint:code",
+    "lint": "npm run lint:code && npm run lint:type",
+    "lint:type": "tsc --noEmit",
     "lint:code": "eslint --fix \"{src,build,scripts,demo}/**/*.{js,vue,md}\"",
     "format": "npm run format:code && npm run format:md",
     "format:code": "prettier --write \"(src|demo)/**/*.(vue|js)\"",
@@ -34,6 +35,7 @@
     "registry": "***REMOVED***"
   },
   "files": [
+    "compat",
     "es",
     "lib",
     "src",
@@ -124,13 +126,13 @@
     "highlight.js": "^10.4.1",
     "lodash-es": "^4.17.15",
     "resize-observer-polyfill": "^1.5.1",
-    "seemly": "^0.1.5",
+    "seemly": "^0.1.6",
     "treemate": "^0.2.4",
     "vdirs": "^0.0.3",
     "vfonts": "^0.0.1",
     "vooks": "0.0.8",
     "vue": "^3.0.5",
-    "vueuc": "^0.1.1"
+    "vueuc": "^0.1.2"
   },
   "husky": {
     "hooks": {
diff --git a/src/_deprecated/nimbus-service-layout/src/ServiceLayout.ts b/src/_deprecated/nimbus-service-layout/src/ServiceLayout.ts
index 49f027db7..81bfd8938 100644
--- a/src/_deprecated/nimbus-service-layout/src/ServiceLayout.ts
+++ b/src/_deprecated/nimbus-service-layout/src/ServiceLayout.ts
@@ -150,11 +150,12 @@ export default defineComponent({
       ref: 'bodyLayoutInstRef',
       nativeScrollbar: false,
       scrollbarProps: {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         contentStyle: {
           width: '100%',
           boxSizing: 'border-box',
-          padding: this.paddingBody ? '21px 48px' : null
-        }
+          padding: this.paddingBody ? '21px 48px' : ''
+        } as CSSProperties
       }
     }
     const headerProps = {
diff --git a/src/_mixins/use-form-item.ts b/src/_mixins/use-form-item.ts
index 5192e5541..ab21a80aa 100644
--- a/src/_mixins/use-form-item.ts
+++ b/src/_mixins/use-form-item.ts
@@ -23,7 +23,7 @@ type UseFormItemProps<T> =
   }
   | {}
 
-interface UseFormItem<T> {
+export interface UseFormItem<T> {
   mergedSize: ComputedRef<T>
   nTriggerFormBlur: () => void
   nTriggerFormChange: () => void
diff --git a/src/card/src/Card.tsx b/src/card/src/Card.tsx
index 310ee39cd..e9b79b446 100644
--- a/src/card/src/Card.tsx
+++ b/src/card/src/Card.tsx
@@ -14,7 +14,7 @@ import { cardLight } from '../styles'
 import type { CardTheme } from '../styles'
 import style from './styles/index.cssr'
 
-interface Segmented {
+export interface Segmented {
   content?: boolean | 'soft'
   footer?: boolean | 'soft'
   action?: boolean | 'soft'
diff --git a/src/create.ts b/src/create.ts
index 967fbe7a3..ecd4c9c56 100644
--- a/src/create.ts
+++ b/src/create.ts
@@ -39,7 +39,7 @@ function createLocalesObject (
   }, defaultLocaleMap)
 }
 
-interface NaiveUI {
+export interface NaiveUI {
   version: string
   use: (plugin: any) => void
   install: Function
diff --git a/src/layout/src/interface.ts b/src/layout/src/interface.ts
index c9009c4b9..3eb304a0e 100644
--- a/src/layout/src/interface.ts
+++ b/src/layout/src/interface.ts
@@ -3,7 +3,7 @@ import { PropType } from 'vue'
 export const positionProp = {
   type: String as PropType<'static' | 'absolute'>,
   default: 'static'
-}
+} as const
 
 export interface LayoutRef {
   scrollTo: ((options: ScrollToOptions) => void) &
diff --git a/src/menu/src/interface.ts b/src/menu/src/interface.ts
index a7fccba30..81b9b4b59 100644
--- a/src/menu/src/interface.ts
+++ b/src/menu/src/interface.ts
@@ -3,7 +3,7 @@ import { VNodeChild } from 'vue'
 
 export type Key = string | number
 
-interface MenuOptionBase {
+export interface MenuOptionBase {
   key: Key
   disabled?: boolean
   icon?: () => VNodeChild
@@ -12,7 +12,7 @@ interface MenuOptionBase {
   [key: string]: unknown
 }
 
-interface MenuGroupOptionBase extends MenuOptionBase {
+export interface MenuGroupOptionBase extends MenuOptionBase {
   type: 'group'
   children: Array<MenuOption | MenuGroupOption>
 }
diff --git a/src/radio/src/use-radio.ts b/src/radio/src/use-radio.ts
index e60409cf6..eb3f7737a 100644
--- a/src/radio/src/use-radio.ts
+++ b/src/radio/src/use-radio.ts
@@ -55,7 +55,7 @@ export interface RadioGroupInjection {
   doUpdateValue: (value: string | number) => void
 }
 
-interface UseRadio {
+export interface UseRadio {
   inputRef: Ref<HTMLElement | null>
   labelRef: Ref<HTMLElement | null>
   mergedName: Ref<string | undefined>
diff --git a/src/scrollbar/src/ScrollBar.tsx b/src/scrollbar/src/ScrollBar.tsx
index 33feb1c54..6a99a2b97 100644
--- a/src/scrollbar/src/ScrollBar.tsx
+++ b/src/scrollbar/src/ScrollBar.tsx
@@ -22,7 +22,7 @@ import { scrollbarLight } from '../styles'
 import type { ScrollbarTheme } from '../styles'
 import style from './styles/index.cssr'
 
-interface ScrollTo {
+export interface ScrollTo {
   (x: number, y: number): void
   (options: {
     left?: number
diff --git a/tsconfig.cjs.json b/tsconfig.cjs.json
new file mode 100644
index 000000000..675de9728
--- /dev/null
+++ b/tsconfig.cjs.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "module": "CommonJS",
+    "target": "ES6"
+  }
+}
\ No newline at end of file
diff --git a/tsconfig.esm.json b/tsconfig.esm.json
index 24d20f345..b9b6bf0a3 100644
--- a/tsconfig.esm.json
+++ b/tsconfig.esm.json
@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "es",
-    "module": "ESNext"
+    "module": "ESNext",
+    "target": "ESNext"
   }
 }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 3aa99e48f..e57052992 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
     "jsxFragmentFactory": "Fragment",
     "module": "ES6",
     "moduleResolution": "Node",
+    "declaration": true,
     "lib": [
       "ESNext",
       "DOM"
diff --git a/vue3.md b/vue3.md
index dbbf0d66c..291f21af4 100644
--- a/vue3.md
+++ b/vue3.md
@@ -7,9 +7,9 @@
 - fonts
   - `naive-ui/lib|es/styles/fonts/*` has been removed, use [`vfonts`](https://www.npmjs.com/package/vfonts)
 - icons
-  - `naive-ui/lib|es/icons/*` is deprecated, use [`vicons`](https://www.npmjs.com/package/vicons) instead.
+  - `naive-ui/lib|es/icons/*` is deprecated (vue-loader is required), use [`vicons`](https://www.npmjs.com/package/vicons) instead.
+- `n-nimbus-icon` is moved to `naive-ui/compat/nimbus-icon` (vue-loader is required)
 - `n-nimbus-form-card` is removed
-- `n-nimbus-icon` is removed
 
 ## Components
 
@@ -422,13 +422,14 @@
   - [x] form item no label css
   - [x] unify treemate ignored
   - [ ] fix menu extra
-  - [ ] build icon
-  - [ ] compat
+  - [x] build icon
+  - [x] compat
   - [ ] on update value api
-  - [ ] fix upload dragger
+  - [x] fix upload dragger
   - [x] fix table sorter
   - [x] tree 多选节点第二个 demo
   - [ ] table treemate!!!
+  - [ ] createTheme
 
 ## Info