diff --git a/.github/workflows/docs-deploy.yml b/.github/workflows/docs-deploy.yml
index 130b3c932..354c6882a 100644
--- a/.github/workflows/docs-deploy.yml
+++ b/.github/workflows/docs-deploy.yml
@@ -9,6 +9,9 @@ on:
     branches: [main]
     paths:
       - 'docs/**'
+      - 'frontend/src/components/**'
+      - 'frontend/.storybook/**'
+      - 'frontend/package-lock.json'
       - '.github/workflows/docs-deploy.yml'
   workflow_dispatch:
 
@@ -35,7 +38,7 @@ jobs:
           version: 11
       - uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version-file: .nvmrc
           cache: pnpm
           cache-dependency-path: docs/pnpm-lock.yaml
       - run: pnpm install --frozen-lockfile
@@ -52,6 +55,13 @@ jobs:
         # in place. That way both /docs/... and /en/docs/... resolve. Other
         # locales stay under /fa, /ru, /zh.
         run: cp -a out/en/. out/
+      - name: Build the component Storybook (frontend/)
+        working-directory: frontend
+        run: |
+          npm ci
+          npm run build-storybook
+      - name: Bundle Storybook at /storybook
+        run: cp -a ../frontend/storybook-static out/storybook
       - uses: actions/upload-pages-artifact@v5
         with:
           path: docs/out
diff --git a/docs/lib/layout.shared.tsx b/docs/lib/layout.shared.tsx
index fa29d070c..296e32e23 100644
--- a/docs/lib/layout.shared.tsx
+++ b/docs/lib/layout.shared.tsx
@@ -2,7 +2,7 @@ import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 import { Heart } from 'lucide-react';
 import { Logo } from '@/components/logo';
 import { TelegramIcon } from '@/components/icons';
-import { appName, productRepoUrl, telegramChannel, telegramChannelUrl, donateUrl } from './shared';
+import { appName, productRepoUrl, telegramChannel, telegramChannelUrl, donateUrl, siteUrl } from './shared';
 import { getSiteMessages } from './site-i18n';
 
 // Build locale-aware shared layout options. With `hideLocale: 'default-locale'`,
@@ -28,6 +28,12 @@ export function baseOptions(lang: string): BaseLayoutProps {
         url: `${prefix}/docs`,
         active: 'nested-url',
       },
+      // Live component workbench built from frontend/ and published alongside the docs.
+      {
+        text: 'Storybook',
+        url: `${siteUrl}/storybook/`,
+        external: true,
+      },
       {
         type: 'icon',
         label: `Telegram channel (@${telegramChannel})`,