diff --git a/package.json b/package.json
index b582b9057..5e542c583 100644
--- a/package.json
+++ b/package.json
@@ -180,6 +180,7 @@
     "tdesign-icons-view": "^0.0.2",
     "tdesign-publish-cli": "^0.0.9",
     "tdesign-site-components": "^0.9.0",
+    "tdesign-theme-generator": "^0.1.0-alpha.4",
     "ts-jest": "^27.1.2",
     "ts-morph": "^13.0.02",
     "ts-node": "^10.4.0",
diff --git a/site/src/App.jsx b/site/src/App.jsx
index aca9cb529..d9083ca44 100644
--- a/site/src/App.jsx
+++ b/site/src/App.jsx
@@ -109,6 +109,7 @@ function Components() {
           <td-doc-footer slot="doc-footer"></td-doc-footer>
         </td-doc-content>
       </td-doc-layout>
+      <tdesign-theme-generator />
     </ConfigProvider>
   );
 }
diff --git a/site/src/main.jsx b/site/src/main.jsx
index 85173daa6..0075c08f4 100644
--- a/site/src/main.jsx
+++ b/site/src/main.jsx
@@ -14,6 +14,8 @@ import 'tdesign-site-components/lib/styles/prism-theme-dark.less';
 
 import 'tdesign-icons-view';
 
+import 'tdesign-theme-generator';
+
 ReactDOM.render(
   <React.StrictMode>
     <App />