diff --git a/packages/document/package.json b/packages/document/package.json
index e01f408e1..e71f901c8 100644
--- a/packages/document/package.json
+++ b/packages/document/package.json
@@ -17,7 +17,7 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@rstack-dev/doc-ui": "^1.2.0",
+    "@rstack-dev/doc-ui": "1.4.2",
     "@types/react": "^18.3.3",
     "framer-motion": "11.3.2",
     "rsbuild-plugin-google-analytics": "^1.0.2",
diff --git a/packages/document/rspress.config.ts b/packages/document/rspress.config.ts
index ae8d48138..1baad3284 100644
--- a/packages/document/rspress.config.ts
+++ b/packages/document/rspress.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'rspress/config';
-import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
 import { pluginGoogleAnalytics } from 'rsbuild-plugin-google-analytics';
+import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
 import { pluginFontOpenSans } from 'rspress-plugin-font-open-sans';
+import { defineConfig } from 'rspress/config';
 
 export default defineConfig({
   root: 'docs',
diff --git a/packages/document/theme/components/Benchmark/ProgressBar.tsx b/packages/document/theme/components/Benchmark/ProgressBar.tsx
deleted file mode 100644
index 41a9b64e6..000000000
--- a/packages/document/theme/components/Benchmark/ProgressBar.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useState } from 'react';
-import { motion } from 'framer-motion';
-import styles from './index.module.scss';
-
-export function formatTime(time: number, totalTime: number) {
-  if (totalTime < 1000) {
-    return `${time.toFixed(0)}ms`;
-  }
-
-  return `${(time / 1000).toFixed(2)}s`;
-}
-
-export function ProgressBar({ value, max }: { value: number; max: number }) {
-  const [elapsedTime, setElapsedTime] = useState(0);
-  const TOTAL_TIME = value * 1000;
-  const isMobile = window.innerWidth < 768;
-  const progressBarWidth = isMobile ? 70 : 35;
-  const variants = {
-    initial: { width: 0 },
-    animate: { width: '100%' },
-  };
-  const formattedTime = formatTime(elapsedTime, TOTAL_TIME);
-  return (
-    <div
-      className={`${styles['progress-bar-container']} flex justify-between items-center`}
-      style={{
-        width: `${progressBarWidth}vw`,
-      }}
-    >
-      <div
-        className={`${styles['progress-bar-inner-container']} flex justify-between`}
-        style={{
-          width: `${(value / max) * 0.8 * progressBarWidth}vw`,
-        }}
-      >
-        <motion.div
-          className={styles['progress-bar']}
-          initial="initial"
-          animate="animate"
-          variants={variants}
-          onUpdate={(latest: { width: string }) => {
-            const width = Number.parseFloat(latest.width);
-            setElapsedTime((width / 100) * TOTAL_TIME);
-          }}
-          // 2x speed
-          transition={{ duration: value / 2, ease: 'linear' }}
-        />
-      </div>
-      <div className={`${styles['font-mono']} text-sm sm:text-base`}>
-        {formattedTime}
-      </div>
-    </div>
-  );
-}
diff --git a/packages/document/theme/components/Benchmark/index.module.scss b/packages/document/theme/components/Benchmark/index.module.scss
deleted file mode 100644
index 10853976d..000000000
--- a/packages/document/theme/components/Benchmark/index.module.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-.title {
-  background: linear-gradient(to right, #514fe6, #6a93f1, #2fa5e0);
-  // line-gradient blue color
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.motion-container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: 40px 0;
-  margin-top: 60px;
-  .top-tip {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-  }
-}
-
-.progress-bar-container {
-  width: 50vw;
-  height: 50px;
-  border-radius: var(--rp-radius-small);
-  padding: 4px;
-  padding-right: 15px;
-  border: 1px solid var(--rp-c-gray-light-4);
-  box-sizing: content-box;
-}
-
-.progress-bar-inner-container {
-  height: 50px;
-  background: var(--rp-c-gray-light-4);
-  border-radius: var(--rp-radius-small);
-}
-
-.progress-bar {
-  height: 100%;
-  background: linear-gradient(to right, #514fe6, #6a93f1, #2fa5e0);
-  border-radius: var(--rp-radius-small);
-}
-
-.font-mono {
-  font-family:
-    Menlo,
-    Monaco,
-    Lucida Console,
-    Liberation Mono,
-    DejaVu Sans Mono,
-    Bitstream Vera Sans Mono,
-    Courier New,
-    monospace;
-}
-
-:global(.dark) {
-  .progress-bar-inner-container {
-    background: var(--rp-c-gray-dark-2);
-  }
-}
-
-@media (max-width: 768px) {
-  .progress-bar-container,
-  .progress-bar-inner-container {
-    height: 30px;
-  }
-}
diff --git a/packages/document/theme/components/Benchmark/index.scss b/packages/document/theme/components/Benchmark/index.scss
new file mode 100644
index 000000000..be94ff26d
--- /dev/null
+++ b/packages/document/theme/components/Benchmark/index.scss
@@ -0,0 +1,8 @@
+html {
+  --rs-benchmark-bar-background: linear-gradient(
+    to right,
+    #514fe6,
+    #6a93f1,
+    #2fa5e0
+  );
+}
diff --git a/packages/document/theme/components/Benchmark/index.tsx b/packages/document/theme/components/Benchmark/index.tsx
index 4c2aaf47e..27c9ecdaa 100644
--- a/packages/document/theme/components/Benchmark/index.tsx
+++ b/packages/document/theme/components/Benchmark/index.tsx
@@ -1,111 +1,63 @@
-import { useState } from 'react';
-import { Tabs, Tab } from 'rspress/theme';
-import { NoSSR, useI18n } from 'rspress/runtime';
-import { ProgressBar } from './ProgressBar';
+import {
+  Benchmark as BaseBenchmark,
+  type BenchmarkData,
+} from '@rstack-dev/doc-ui/benchmark';
+import './index.scss';
 
-const BENCHMARK_DATA = {
-  start: [
-    {
-      name: 'Rspress',
-      // The unit is seconds
-      time: 0.786,
-    },
-    {
-      name: 'Docusaurus',
-      time: 8.46,
-    },
-    {
-      name: 'Nextra',
-      time: 8.2,
-    },
-  ],
-  hmr: [
-    {
-      name: 'Rspress',
-      time: 0.07,
-    },
-    {
-      name: 'Docusaurus',
-      time: 0.12,
-    },
-    {
-      name: 'Nextra',
-      time: 0.18,
-    },
-  ],
-  build: [
-    {
-      name: 'Rspress',
-      time: 2.51,
-    },
-    {
-      name: 'Docusaurus',
-      time: 14.91,
-    },
-    {
-      name: 'Nextra',
-      time: 17.25,
-    },
-  ],
+const BENCHMARK_DATA: BenchmarkData = {
+  rspress: {
+    label: 'Rspress',
+    metrics: [
+      {
+        time: 0.07,
+        desc: 'hmr',
+      },
+      {
+        time: 0.786,
+        desc: 'dev',
+      },
+      {
+        time: 2.51,
+        desc: 'build',
+      },
+    ],
+  },
+  docusaurus: {
+    label: 'Docusaurus',
+    metrics: [
+      {
+        time: 0.12,
+        desc: 'hmr',
+      },
+      {
+        time: 8.46,
+        desc: 'dev',
+      },
+      {
+        time: 14.91,
+        desc: 'build',
+      },
+    ],
+  },
+  nextra: {
+    label: 'Nextra',
+    metrics: [
+      {
+        time: 0.18,
+        desc: 'hmr',
+      },
+      {
+        time: 8.2,
+        desc: 'dev',
+      },
+      {
+        time: 17.25,
+        desc: 'build',
+      },
+    ],
+  },
 };
 
 export function Benchmark() {
-  const SCENE = ['start', 'hmr', 'build'];
-  const t = useI18n();
-  const [activeScene, setActiveScene] =
-    useState<keyof typeof BENCHMARK_DATA>('start');
-  const performanceInfoList = BENCHMARK_DATA[activeScene];
-  return (
-    <NoSSR>
-      <div className="relative flex flex-col justify-center py-10 mt-15 h-auto">
-        <div
-          className="flex flex-col items-center z-1"
-          style={{
-            padding: '16px 0',
-          }}
-        >
-          <Tabs
-            values={SCENE.map(item => ({
-              label: t(item as keyof typeof BENCHMARK_DATA),
-            }))}
-            onChange={index =>
-              setActiveScene(SCENE[index] as keyof typeof BENCHMARK_DATA)
-            }
-            tabPosition="center"
-          >
-            {SCENE.map(scene => (
-              <Tab key={scene}>
-                {performanceInfoList.map(info => (
-                  <div
-                    key={info.name}
-                    className="flex flex-center justify-start flex-col sm:flex-row"
-                    style={{
-                      margin: '16px 16px 16px 0',
-                    }}
-                  >
-                    {
-                      <>
-                        <p
-                          className="mr-2 mb-2 w-20 text-center text-gray-500 dark:text-light-500"
-                          style={{ minWidth: '140px' }}
-                        >
-                          {info.name}
-                        </p>
-                        <ProgressBar
-                          value={info.time}
-                          max={Math.max(
-                            ...performanceInfoList.map(info => info.time),
-                          )}
-                        />
-                      </>
-                    }
-                  </div>
-                ))}
-              </Tab>
-            ))}
-          </Tabs>
-        </div>
-      </div>
-    </NoSSR>
-  );
+  return <BaseBenchmark data={BENCHMARK_DATA} />;
 }
diff --git a/packages/document/theme/components/ToolStack.module.scss b/packages/document/theme/components/ToolStack.module.scss
index 2134e0c57..cf278c2fd 100644
--- a/packages/document/theme/components/ToolStack.module.scss
+++ b/packages/document/theme/components/ToolStack.module.scss
@@ -6,6 +6,9 @@
   padding-top: 5rem;
   padding-bottom: 6rem;
   height: auto;
+
+  max-width: 72rem;
+  margin: 0 auto;
 }
 
 .header {
diff --git a/packages/document/theme/components/ToolStack.tsx b/packages/document/theme/components/ToolStack.tsx
index ccd27f347..fd6f0471d 100644
--- a/packages/document/theme/components/ToolStack.tsx
+++ b/packages/document/theme/components/ToolStack.tsx
@@ -1,5 +1,5 @@
 import { ToolStack as BaseToolStack } from '@rstack-dev/doc-ui/tool-stack';
-import { useLang, useI18n } from 'rspress/runtime';
+import { useI18n, useLang } from 'rspress/runtime';
 import styles from './ToolStack.module.scss';
 
 export function ToolStack() {
diff --git a/packages/document/theme/index.tsx b/packages/document/theme/index.tsx
index 1b6f1b84f..28f239ea4 100644
--- a/packages/document/theme/index.tsx
+++ b/packages/document/theme/index.tsx
@@ -1,5 +1,5 @@
-import Theme from 'rspress/theme';
 import { NavIcon } from '@rstack-dev/doc-ui/nav-icon';
+import Theme from 'rspress/theme';
 import { HomeLayout as BasicHomeLayout } from 'rspress/theme';
 import { ToolStack } from './components/ToolStack';
 import './index.css';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 095d6563e..ae42ca9db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -754,8 +754,8 @@ importers:
   packages/document:
     devDependencies:
       '@rstack-dev/doc-ui':
-        specifier: ^1.2.0
-        version: 1.2.0
+        specifier: 1.4.2
+        version: 1.4.2
       '@types/react':
         specifier: ^18.3.3
         version: 18.3.3
@@ -776,7 +776,7 @@ importers:
         version: 1.0.0
       ts-node:
         specifier: ^10.9.1
-        version: 10.9.1(@types/node@22.5.1)(typescript@5.5.3)
+        version: 10.9.1(@types/node@18.11.17)(typescript@5.5.3)
       typescript:
         specifier: ^5.5.3
         version: 5.5.3
@@ -4153,8 +4153,8 @@ packages:
       '@rspress/mdx-rs-win32-x64-msvc': 0.5.7
     dev: false
 
-  /@rstack-dev/doc-ui@1.2.0:
-    resolution: {integrity: sha512-/slMk3IPj9EQcdDnVriZce9qGavU+LJiHeylhgThEBfJBJT2MPUig/hMTpERlDtaJ0+Y/YE4THS1R2DsVG/W0A==}
+  /@rstack-dev/doc-ui@1.4.2:
+    resolution: {integrity: sha512-dC1L65hIqzO0OwPtKXf7Y+wJJCy5FudEibUf8XW9AAaTM47/izBR768zTdhv+IIwk+40ZsBp7jnIIEsR05BnNQ==}
     dependencies:
       framer-motion: 11.3.8
     transitivePeerDependencies:
@@ -4378,12 +4378,6 @@ packages:
   /@types/node@18.11.17:
     resolution: {integrity: sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==}
 
-  /@types/node@22.5.1:
-    resolution: {integrity: sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==}
-    dependencies:
-      undici-types: 6.19.8
-    dev: true
-
   /@types/normalize-package-data@2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
 
@@ -10489,37 +10483,6 @@ packages:
       yn: 3.1.1
     dev: true
 
-  /ts-node@10.9.1(@types/node@22.5.1)(typescript@5.5.3):
-    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 22.5.1
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.5.3
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    dev: true
-
   /tsconfig-paths-webpack-plugin@4.1.0:
     resolution: {integrity: sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==}
     engines: {node: '>=10.13.0'}
@@ -10673,10 +10636,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /undici-types@6.19.8:
-    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
-    dev: true
-
   /unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
     dependencies: