diff --git a/.github/workflows/publish-ui-storybook.yml b/.github/workflows/publish-ui-storybook.yml
new file mode 100644
index 0000000000..af19f68546
--- /dev/null
+++ b/.github/workflows/publish-ui-storybook.yml
@@ -0,0 +1,51 @@
+name: Publish UI Storybook
+
+env:
+  NODE_OPTIONS: --max-old-space-size=4096
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - canary
+  pull_request:
+    branches:
+      - canary
+    paths-ignore:
+      - README.md
+      - .github/**
+      - packages/backend/server
+      - packages/frontend/electron
+      - '!.github/workflows/publish-storybook.yml'
+
+jobs:
+  publish-ui-storybook:
+    name: Publish UI Storybook
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.merge_commit_sha }}
+          # This is required to fetch all commits for chromatic
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+        with:
+          electron-install: false
+      - uses: chromaui/action-next@v1
+        with:
+          workingDir: packages/frontend/component
+          buildScriptName: build:storybook
+          exitOnceUploaded: true
+          onlyChanged: false
+          diagnostics: true
+        env:
+          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_UI_PROJECT_TOKEN }}
+          NODE_OPTIONS: ${{ env.NODE_OPTIONS }}
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: chromatic-build-artifacts-${{ github.run_id }}
+          path: |
+            chromatic-diagnostics.json
+            **/build-storybook.log
diff --git a/packages/frontend/component/.storybook/main.ts b/packages/frontend/component/.storybook/main.ts
index 2e6b6a0463..7d73913425 100644
--- a/packages/frontend/component/.storybook/main.ts
+++ b/packages/frontend/component/.storybook/main.ts
@@ -34,7 +34,6 @@ export default {
         }),
       ],
       define: {
-        'process.on': '(() => void 0)',
         'process.env': {},
         'process.env.COVERAGE': JSON.stringify(!!process.env.COVERAGE),
         'process.env.SHOULD_REPORT_TRACE': `${Boolean(
diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index 89b084797d..2f5b3dfbf8 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -9,7 +9,8 @@
     "./*": "./src/components/*/index.tsx"
   },
   "scripts": {
-    "dev": "storybook dev -p 6006"
+    "dev": "storybook dev -p 6006",
+    "build:storybook": "storybook build"
   },
   "peerDependencies": {
     "@blocksuite/blocks": "*",