diff --git a/packages/plugin-sample-preview/src/index.tsx b/packages/plugin-sample-preview/src/index.tsx
index 7435f5ed2..c5cb139b2 100644
--- a/packages/plugin-sample-preview/src/index.tsx
+++ b/packages/plugin-sample-preview/src/index.tsx
@@ -2,85 +2,10 @@ import React, { useState, ComponentType } from 'react';
 import { Button, Dialog } from '@alifd/next';
 import { PluginProps, NpmInfo } from '@ali/lowcode-types';
 import { Designer } from '@ali/lowcode-designer';
-import { isReactComponent, isESModule } from '@ali/lowcode-utils';
+import { buildComponents } from '@ali/lowcode-utils';
 import ReactRenderer from '@ali/lowcode-react-renderer';
 import './index.scss';
 
-interface LibraryMap {
-  [key: string]: string;
-}
-
-function accessLibrary(library: string | object) {
-  if (typeof library !== 'string') {
-    return library;
-  }
-
-  return (window as any)[library];
-}
-
-function getSubComponent(library: any, paths: string[]) {
-  const l = paths.length;
-  if (l < 1 || !library) {
-    return library;
-  }
-  let i = 0;
-  let component: any;
-  while (i < l) {
-    const key = paths[i]!;
-    let ex: any;
-    try {
-      component = library[key];
-    } catch (e) {
-      ex = e;
-      component = null;
-    }
-    if (i === 0 && component == null && key === 'default') {
-      if (ex) {
-        return l === 1 ? library : null;
-      }
-      component = library;
-    } else if (component == null) {
-      return null;
-    }
-    library = component;
-    i++;
-  }
-  return component;
-}
-
-function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmInfo) {
-  if (!npm) {
-    return accessLibrary(componentName);
-  }
-  const exportName = npm.exportName || npm.componentName || componentName;
-  const libraryName = libraryMap[npm.package] || exportName;
-  const library = accessLibrary(libraryName);
-  const paths = npm.exportName && npm.subName ? npm.subName.split('.') : [];
-  if (npm.destructuring) {
-    paths.unshift(exportName);
-  } else if (isESModule(library)) {
-    paths.unshift('default');
-  }
-  return getSubComponent(library, paths);
-}
-
-function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> }) {
-  const components: any = {
-  };
-  Object.keys(componentsMap).forEach((componentName) => {
-    let component = componentsMap[componentName];
-    if (isReactComponent(component)) {
-      components[componentName] = component;
-    } else {
-      component = findComponent(libraryMap, componentName, component);
-      if (component) {
-        components[componentName] = component;
-      }
-    }
-  });
-  return components;
-}
-
 const SamplePreview = ({ editor }: PluginProps) => {
   const [data, setData] = useState({});
   const [visible, setVisible] = useState(false);
@@ -93,7 +18,7 @@ const SamplePreview = ({ editor }: PluginProps) => {
       const assets = await editor.get('assets');
       console.info('save schema:', designer, assets);
 
-      const libraryMap: LibraryMap = {};
+      const libraryMap = {};
       assets.packages.forEach(({ package, library }) => {
         libraryMap[package] = library;
       });
diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts
index dd578ce4b..653f4d36f 100644
--- a/packages/react-simulator-renderer/src/renderer.ts
+++ b/packages/react-simulator-renderer/src/renderer.ts
@@ -3,12 +3,12 @@ import { render as reactRender } from 'react-dom';
 import { host } from './host';
 import SimulatorRendererView from './renderer-view';
 import { computed, obx } from '@recore/obx';
-import { Asset, isReactComponent } from '@ali/lowcode-utils';
+import { Asset } from '@ali/lowcode-utils';
 import { getClientRects } from './utils/get-client-rects';
 import loader from './utils/loader';
 import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes';
-import { isESModule, isElement, cursor, setNativeSelection } from '@ali/lowcode-utils';
-import { RootSchema, NpmInfo, ComponentSchema, TransformStage } from '@ali/lowcode-types';
+import { isElement, cursor, setNativeSelection, buildComponents, getSubComponent } from '@ali/lowcode-utils';
+import { RootSchema, ComponentSchema, TransformStage } from '@ali/lowcode-types';
 // just use types
 import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer';
 import Slot from './builtin-components/slot';
@@ -74,7 +74,10 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
   }
   private _libraryMap: { [key: string]: string } = {};
   private buildComponents() {
-    this._components = buildComponents(this._libraryMap, this._componentsMap);
+    this._components = {
+      ...builtinComponents,
+      ...buildComponents(this._libraryMap, this._componentsMap)
+    };
   }
   @obx.ref private _components: any = {};
   @computed get components(): object {
@@ -315,70 +318,6 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
   }
 }
 
-function accessLibrary(library: string | object) {
-  if (typeof library !== 'string') {
-    return library;
-  }
-
-  return (window as any)[library];
-}
-
-function getSubComponent(library: any, paths: string[]) {
-  const l = paths.length;
-  if (l < 1 || !library) {
-    return library;
-  }
-  let i = 0;
-  let component: any;
-  while (i < l) {
-    const key = paths[i]!;
-    let ex: any;
-    try {
-      component = library[key];
-    } catch (e) {
-      ex = e;
-      component = null;
-    }
-    if (i === 0 && component == null && key === 'default') {
-      if (ex) {
-        return l === 1 ? library : null;
-      }
-      component = library;
-    } else if (component == null) {
-      return null;
-    }
-    library = component;
-    i++;
-  }
-  return component;
-}
-
-function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmInfo) {
-  if (!npm) {
-    return accessLibrary(componentName);
-  }
-  // libraryName the key access to global
-  // export { exportName } from xxx exportName === global.libraryName.exportName
-  // export exportName from xxx   exportName === global.libraryName.default || global.libraryName
-  // export { exportName as componentName } from package
-  // if exportName == null exportName === componentName;
-  // const componentName = exportName.subName, if exportName empty subName donot use
-  const exportName = npm.exportName || npm.componentName || componentName;
-  const libraryName = libraryMap[npm.package] || exportName;
-  const library = accessLibrary(libraryName);
-  const paths = npm.exportName && npm.subName ? npm.subName.split('.') : [];
-  if (npm.destructuring) {
-    paths.unshift(exportName);
-  } else if (isESModule(library)) {
-    paths.unshift('default');
-  }
-  return getSubComponent(library, paths);
-}
-
-export interface LibraryMap {
-  [key: string]: string;
-}
-
 // Slot/Leaf and Fragment|FunctionComponent polyfill(ref)
 
 const builtinComponents = {
@@ -386,24 +325,6 @@ const builtinComponents = {
   Leaf,
 };
 
-function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> }) {
-  const components: any = {
-    ...builtinComponents
-  };
-  Object.keys(componentsMap).forEach((componentName) => {
-    let component = componentsMap[componentName];
-    if (isReactComponent(component)) {
-      components[componentName] = component;
-    } else {
-      component = findComponent(libraryMap, componentName, component);
-      if (component) {
-        components[componentName] = component;
-      }
-    }
-  });
-  return components;
-}
-
 let REACT_KEY = '';
 function cacheReactKey(el: Element): Element {
   if (REACT_KEY !== '') {
diff --git a/packages/utils/src/build-components.ts b/packages/utils/src/build-components.ts
new file mode 100644
index 000000000..92c74b026
--- /dev/null
+++ b/packages/utils/src/build-components.ts
@@ -0,0 +1,85 @@
+import { ComponentType } from 'react';
+import { NpmInfo} from '@ali/lowcode-types';
+import { isReactComponent } from './is-react';
+import { isESModule } from './is-es-module';
+
+interface LibraryMap {
+  [key: string]: string;
+}
+
+function accessLibrary(library: string | object) {
+  if (typeof library !== 'string') {
+    return library;
+  }
+
+  return (window as any)[library];
+}
+
+export function getSubComponent(library: any, paths: string[]) {
+  const l = paths.length;
+  if (l < 1 || !library) {
+    return library;
+  }
+  let i = 0;
+  let component: any;
+  while (i < l) {
+    const key = paths[i]!;
+    let ex: any;
+    try {
+      component = library[key];
+    } catch (e) {
+      ex = e;
+      component = null;
+    }
+    if (i === 0 && component == null && key === 'default') {
+      if (ex) {
+        return l === 1 ? library : null;
+      }
+      component = library;
+    } else if (component == null) {
+      return null;
+    }
+    library = component;
+    i++;
+  }
+  return component;
+}
+
+function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmInfo) {
+  if (!npm) {
+    return accessLibrary(componentName);
+  }
+  // libraryName the key access to global
+  // export { exportName } from xxx exportName === global.libraryName.exportName
+  // export exportName from xxx   exportName === global.libraryName.default || global.libraryName
+  // export { exportName as componentName } from package
+  // if exportName == null exportName === componentName;
+  // const componentName = exportName.subName, if exportName empty subName donot use
+  const exportName = npm.exportName || npm.componentName || componentName;
+  const libraryName = libraryMap[npm.package] || exportName;
+  const library = accessLibrary(libraryName);
+  const paths = npm.exportName && npm.subName ? npm.subName.split('.') : [];
+  if (npm.destructuring) {
+    paths.unshift(exportName);
+  } else if (isESModule(library)) {
+    paths.unshift('default');
+  }
+  return getSubComponent(library, paths);
+}
+
+export function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo | ComponentType<any> }) {
+  const components: any = {
+  };
+  Object.keys(componentsMap).forEach((componentName) => {
+    let component = componentsMap[componentName];
+    if (isReactComponent(component)) {
+      components[componentName] = component;
+    } else {
+      component = findComponent(libraryMap, componentName, component);
+      if (component) {
+        components[componentName] = component;
+      }
+    }
+  });
+  return components;
+}
\ No newline at end of file
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 3df01d928..08d5342b1 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -18,3 +18,4 @@ export * from './set-prototype-of';
 export * from './shallow-equal';
 export * from './svg-icon';
 export * from './unique-id';
+export * from './build-components';