diff --git a/.github/workflows/diff.yml b/.github/workflows/diff.yml
new file mode 100644
index 000000000..28f1e17b9
--- /dev/null
+++ b/.github/workflows/diff.yml
@@ -0,0 +1,49 @@
+name: Diff
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches: [main]
+
+jobs:
+  Build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup Pnpm
+        run: |
+          npm install -g corepack@latest --force
+          corepack enable
+
+      - name: Setup Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        with:
+          node-version: 22
+          cache: 'pnpm'
+
+      - name: Install Dependencies and Build
+        run: |
+          pnpm install
+
+      - name: Build Demo Project
+        run: |
+          cd website
+          pnpm install
+          RSDOCTOR=1 pnpm run build
+
+      - name: Report Compressed Size
+        uses: web-infra-dev/rsdoctor-action@main
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          file_path: 'website/doc_build/web/rsdoctor-data.json'
+          target_branch: 'main'
diff --git a/.github/workflows/ecosystem-ci.yml b/.github/workflows/ecosystem-ci.yml
new file mode 100644
index 000000000..c62b07e04
--- /dev/null
+++ b/.github/workflows/ecosystem-ci.yml
@@ -0,0 +1,70 @@
+name: Ecosystem CI
+
+on:
+  push:
+    branches: ['main']
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'The branch of the Ecosystem CI run'
+        required: true
+        default: 'main'
+
+permissions:
+  contents: write
+  issues: write
+  pull-requests: write
+
+jobs:
+  changes:
+    runs-on: ubuntu-latest
+    if: github.repository == 'web-infra-dev/rspress' && github.event_name != 'workflow_dispatch'
+    outputs:
+      changed: ${{ steps.changes.outputs.changed }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+        with:
+          fetch-depth: 1
+
+      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          predicate-quantifier: 'every'
+          filters: |
+            changed:
+              - "!**/*.md"
+              - "!**/*.mdx"
+              - "!**/_meta.json"
+              - "!**/dictionary.txt"
+              - "!document/**"
+
+  ecosystem_ci_dispatch:
+    name: Dispatch ecosystem CI
+    runs-on: ubuntu-latest
+    if: github.repository == 'web-infra-dev/rspress' && github.event_name == 'workflow_dispatch'
+    steps:
+      - name: Trigger Ecosystem CI
+        uses: rspack-contrib/rstack-ecosystem-ci/.github/actions/ecosystem_ci_dispatch@main
+        with:
+          github-token: ${{ secrets.REPO_rspress_ECO_CI_GITHUB_TOKEN_NEXT }}
+          ecosystem-owner: web-infra-dev
+          ecosystem-repo: rspress
+          workflow-file: rspress-ecosystem-ci-selected.yml
+          client-payload: '{"ref":"${{ github.event.inputs.branch }}","repo":"web-infra-dev/rspress","suite":"-","suiteRefType":"precoded","suiteRef":"precoded"}'
+          branch: ${{ github.event.inputs.branch }}
+
+  ecosystem_ci_per_commit:
+    name: Run ecosystem CI per commit
+    needs: changes
+    runs-on: ubuntu-latest
+    if: github.repository == 'web-infra-dev/rspress' && github.event_name != 'workflow_dispatch' && needs.changes.outputs.changed == 'true'
+    steps:
+      - name: Trigger Ecosystem CI
+        uses: rspack-contrib/rstack-ecosystem-ci/.github/actions/ecosystem_ci_per_commit@main
+        with:
+          github-token: ${{ secrets.REPO_RSPRESS_ECO_CI_GITHUB_TOKEN_NEXT }}
+          ecosystem-owner: web-infra-dev
+          ecosystem-repo: rspress
+          workflow-file: rspress-ecosystem-ci-from-commit.yml
+          client-payload: '{"commitSHA":"${{ github.sha }}","updateComment":true,"repo":"web-infra-dev/rspress","suite":"-","suiteRefType":"precoded","suiteRef":"precoded"}'
diff --git a/e2e/fixtures/tabs-component/doc/index.mdx b/e2e/fixtures/tabs-component/doc/index.mdx
index f4c3d8acc..6ebc9e5da 100644
--- a/e2e/fixtures/tabs-component/doc/index.mdx
+++ b/e2e/fixtures/tabs-component/doc/index.mdx
@@ -4,13 +4,13 @@ import { Tabs, Tab } from '@rspress/core/theme';
 
 ## Tab a
 
-<Tabs tabContainerClassName="tabs-a">
+<Tabs className="tabs-a">
   <Tab label="label1">content1</Tab>
 </Tabs>
 
 ## Tab b
 
-<Tabs tabContainerClassName="tabs-b">
+<Tabs className="tabs-b">
   <Tab label="label2">content2</Tab>
   <Tab label="label3">content3</Tab>
   <Tab label="label4">content4</Tab>
@@ -18,4 +18,4 @@ import { Tabs, Tab } from '@rspress/core/theme';
 
 ## Tab c
 
-<Tabs tabContainerClassName="tabs-c"></Tabs>
+<Tabs className="tabs-c"></Tabs>
diff --git a/packages/core/package.json b/packages/core/package.json
index 6282f0b1c..28d9dc70d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -37,6 +37,9 @@
     "./shiki-transformers": {
       "types": "./dist/shiki-transformers.d.ts",
       "default": "./dist/shiki-transformers.js"
+    },
+    "./_private/react": {
+      "default": "./dist/_private/react/index.js"
     }
   },
   "main": "./dist/index.js",
@@ -81,6 +84,7 @@
     "hast-util-to-jsx-runtime": "^2.3.6",
     "html-to-text": "^9.0.5",
     "lodash-es": "^4.17.21",
+    "mdast-util-mdx": "^3.0.0",
     "mdast-util-mdxjs-esm": "^2.0.1",
     "medium-zoom": "1.1.0",
     "nprogress": "^0.2.0",
@@ -88,10 +92,12 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-lazy-with-preload": "^2.2.1",
+    "react-reconciler": "0.33.0",
     "react-router-dom": "^6.30.1",
     "rehype-external-links": "^3.0.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-mdx": "^3.1.1",
     "scroll-into-view-if-needed": "^3.1.0",
     "shiki": "^3.12.2",
     "tinyglobby": "^0.2.15",
@@ -115,6 +121,7 @@
     "@types/nprogress": "^0.2.3",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
+    "@types/react-reconciler": "^0.32.1",
     "@types/web": "^0.0.288",
     "execa": "8.0.1",
     "mdast-util-directive": "^3.1.0",
diff --git a/packages/core/rslib.config.ts b/packages/core/rslib.config.ts
index d31f157e9..44b5987aa 100644
--- a/packages/core/rslib.config.ts
+++ b/packages/core/rslib.config.ts
@@ -1,4 +1,3 @@
-import path from 'node:path';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
@@ -22,6 +21,22 @@ const COMMON_EXTERNALS = [
 export default defineConfig({
   plugins: [pluginPublint()],
   lib: [
+    {
+      bundle: false,
+      dts: false,
+      format: 'esm',
+      syntax: 'es2022',
+      source: {
+        entry: {
+          index: './src/node/ssg-md/react/*.ts',
+        },
+      },
+      output: {
+        distPath: {
+          root: './dist/_private/react',
+        },
+      },
+    },
     {
       format: 'esm',
       syntax: 'es2022',
diff --git a/packages/core/src/node/PluginDriver.ts b/packages/core/src/node/PluginDriver.ts
index 5cb756dae..a91c7fd82 100644
--- a/packages/core/src/node/PluginDriver.ts
+++ b/packages/core/src/node/PluginDriver.ts
@@ -1,8 +1,10 @@
-import type {
-  PageIndexInfo,
-  RouteMeta,
-  RspressPlugin,
-  UserConfig,
+import {
+  addLeadingSlash,
+  addTrailingSlash,
+  type PageIndexInfo,
+  type RouteMeta,
+  type RspressPlugin,
+  type UserConfig,
 } from '@rspress/shared';
 import { haveNavSidebarConfig } from './auto-nav-sidebar';
 import type { RouteService } from './route/RouteService';
@@ -108,7 +110,17 @@ export class PluginDriver {
     }
   }
 
+  private async normalizeConfig() {
+    this.#config.ssg ??= true;
+    this.#config.llms ??= false;
+    this.#config.base = addTrailingSlash(
+      addLeadingSlash(this.#config.base ?? '/'),
+    );
+  }
+
   async modifyConfig() {
+    this.normalizeConfig();
+
     let config = this.#config;
 
     for (let i = 0; i < this.#plugins.length; i++) {
diff --git a/packages/core/src/node/auto-nav-sidebar/utils.ts b/packages/core/src/node/auto-nav-sidebar/utils.ts
index d4a9cdfc7..3e22461f5 100644
--- a/packages/core/src/node/auto-nav-sidebar/utils.ts
+++ b/packages/core/src/node/auto-nav-sidebar/utils.ts
@@ -24,6 +24,7 @@ export async function extractInfoFromFrontmatterWithAbsolutePath(
   overviewHeaders: number[] | undefined;
   context: string | undefined;
   tag: string | undefined;
+  description: string | undefined;
 }> {
   const fileHandle = await fs.open(absolutePath, 'r');
   try {
@@ -112,6 +113,7 @@ export async function extractInfoFromFrontmatterWithAbsolutePath(
       overviewHeaders: frontmatter.overviewHeaders,
       context: frontmatter.context,
       tag: frontmatter.tag,
+      description: frontmatter.description,
     };
   } finally {
     await fileHandle.close();
diff --git a/packages/core/src/node/build.ts b/packages/core/src/node/build.ts
index 2bb7eca26..46f9cc768 100644
--- a/packages/core/src/node/build.ts
+++ b/packages/core/src/node/build.ts
@@ -17,7 +17,9 @@ export async function build(options: BuildOptions) {
   // 1. create PluginDriver
   const pluginDriver = await PluginDriver.create(config, configFilePath, true);
   const modifiedConfig = await pluginDriver.modifyConfig();
-  const ssgConfig = Boolean(modifiedConfig.ssg ?? true);
+  const enableSSG = Boolean(
+    (modifiedConfig.ssg || modifiedConfig.llms) ?? true,
+  );
 
   // 2. create RouteService
   const additionalPages = await pluginDriver.addPages();
@@ -42,7 +44,7 @@ export async function build(options: BuildOptions) {
       modifiedConfig,
       pluginDriver,
       routeService,
-      ssgConfig,
+      enableSSG,
     );
     await rsbuild.build();
   } finally {
@@ -50,7 +52,7 @@ export async function build(options: BuildOptions) {
   }
   await pluginDriver.afterBuild();
 
-  if (!ssgConfig) {
+  if (!enableSSG) {
     hintSSGFalse();
   }
 }
diff --git a/packages/core/src/node/constants.ts b/packages/core/src/node/constants.ts
index cd71437d2..04dbf0e6d 100644
--- a/packages/core/src/node/constants.ts
+++ b/packages/core/src/node/constants.ts
@@ -53,6 +53,13 @@ export const SSR_SERVER_ENTRY = path.join(
   'ssrServerEntry.js',
 );
 
+export const SSG_MD_SERVER_ENTRY = path.join(
+  PACKAGE_ROOT,
+  'dist',
+  'runtime',
+  'ssrMdServerEntry.js',
+);
+
 export const OUTPUT_DIR = 'doc_build';
 
 export const APP_HTML_MARKER = '<!--<?- DOC_CONTENT ?>-->';
@@ -65,3 +72,6 @@ export const PUBLIC_DIR = 'public';
 // Prevent the risk of naming conflicts with the user's folders
 export const NODE_SSG_BUNDLE_FOLDER = '__ssg__';
 export const NODE_SSG_BUNDLE_NAME = 'rspress-ssg-entry.cjs';
+
+export const NODE_SSG_MD_BUNDLE_FOLDER = '__ssg_md__';
+export const NODE_SSG_MD_BUNDLE_NAME = 'rspress-ssg-md-entry.cjs';
diff --git a/packages/core/src/node/initRsbuild.ts b/packages/core/src/node/initRsbuild.ts
index ce700c3a4..4bca02d30 100644
--- a/packages/core/src/node/initRsbuild.ts
+++ b/packages/core/src/node/initRsbuild.ts
@@ -21,9 +21,12 @@ import {
   isProduction,
   NODE_SSG_BUNDLE_FOLDER,
   NODE_SSG_BUNDLE_NAME,
+  NODE_SSG_MD_BUNDLE_FOLDER,
+  NODE_SSG_MD_BUNDLE_NAME,
   OUTPUT_DIR,
   PACKAGE_ROOT,
   PUBLIC_DIR,
+  SSG_MD_SERVER_ENTRY,
   SSR_CLIENT_ENTRY,
   SSR_SERVER_ENTRY,
   TEMPLATE_PATH,
@@ -45,6 +48,7 @@ import { socialLinksVMPlugin } from './runtimeModule/socialLinks';
 import type { FactoryContext } from './runtimeModule/types';
 import { rsbuildPluginCSR } from './ssg/rsbuildPluginCSR';
 import { rsbuildPluginSSG } from './ssg/rsbuildPluginSSG';
+import { rsbuildPluginSSGMD } from './ssg-md/rsbuildPluginSSGMD';
 import {
   detectReactVersion,
   resolveReactAlias,
@@ -127,6 +131,7 @@ async function createInternalBuildConfig(
     detectCustomIcon(CUSTOM_THEME_DIR),
     resolveReactAlias(reactVersion, false),
     enableSSG ? resolveReactAlias(reactVersion, true) : Promise.resolve({}),
+    resolveReactAlias(reactVersion, true),
     resolveReactRouterDomAlias(),
   ]);
 
@@ -182,7 +187,7 @@ async function createInternalBuildConfig(
           ...siteDataVMPlugin(context),
         },
       }),
-      enableSSG
+      enableSSG && config.ssg
         ? rsbuildPluginSSG({
             routeService,
             config,
@@ -191,6 +196,12 @@ async function createInternalBuildConfig(
             routeService,
             config,
           }),
+      enableSSG && config.llms
+        ? rsbuildPluginSSGMD({
+            routeService,
+            config,
+          })
+        : null,
     ],
     server: {
       port:
@@ -247,6 +258,12 @@ async function createInternalBuildConfig(
       },
     },
     source: {
+      preEntry: [
+        // ensure CSS orders and access @theme before @rspress/theme-default to avoid circular dependency
+        path.join(DEFAULT_THEME, './styles/index.js'), // 1. @rspress/theme-default global styles
+        'virtual-global-styles', // 2. virtual-global-styles
+        '@theme', // 3. import './index.css'; from 'theme/index.tsx'
+      ],
       include: [PACKAGE_ROOT],
       define: {
         'process.env.TEST': JSON.stringify(process.env.TEST),
@@ -300,6 +317,8 @@ async function createInternalBuildConfig(
     },
     tools: {
       bundlerChain(chain, { CHAIN_ID, environment }) {
+        const isSsg = environment.name === 'node';
+        const isSsgMd = environment.name === 'node_md';
         const jsModuleRule = chain.module.rule(CHAIN_ID.RULE.JS);
 
         const swcLoaderOptions = jsModuleRule
@@ -327,6 +346,7 @@ async function createInternalBuildConfig(
             docDirectory: userDocRoot,
             routeService,
             pluginDriver,
+            isSsgMd,
           })
           .end();
 
@@ -355,13 +375,20 @@ async function createInternalBuildConfig(
           .test(/\.rspress[\\/]runtime[\\/]virtual-global-styles/)
           .merge({ sideEffects: true });
 
-        if (environment.name === 'node') {
+        if (isSsg || isSsgMd) {
+          chain.optimization.splitChunks({});
+        }
+
+        if (isSsg) {
           chain.output.filename(
             `${NODE_SSG_BUNDLE_FOLDER}/${NODE_SSG_BUNDLE_NAME}`,
           );
           chain.output.chunkFilename(`${NODE_SSG_BUNDLE_FOLDER}/[name].cjs`);
-          // For perf
-          chain.output.set('asyncChunks', false);
+        } else if (isSsgMd) {
+          chain.output.filename(
+            `${NODE_SSG_MD_BUNDLE_FOLDER}/${NODE_SSG_MD_BUNDLE_NAME}`,
+          );
+          chain.output.chunkFilename(`${NODE_SSG_MD_BUNDLE_FOLDER}/[name].cjs`);
         }
       },
     },
@@ -378,12 +405,9 @@ async function createInternalBuildConfig(
             index:
               enableSSG && isProduction() ? SSR_CLIENT_ENTRY : CSR_CLIENT_ENTRY,
           },
-          preEntry: [
-            path.join(DEFAULT_THEME, './styles/index.js'),
-            'virtual-global-styles',
-          ],
           define: {
             'process.env.__SSR__': JSON.stringify(false),
+            'process.env.__SSR_MD__': JSON.stringify(false),
           },
         },
         output: {
@@ -393,7 +417,7 @@ async function createInternalBuildConfig(
           },
         },
       },
-      ...(enableSSG
+      ...(enableSSG && config.ssg
         ? {
             node: {
               resolve: {
@@ -408,6 +432,46 @@ async function createInternalBuildConfig(
                 },
                 define: {
                   'process.env.__SSR__': JSON.stringify(true),
+                  'process.env.__SSR_MD__': JSON.stringify(false),
+                },
+              },
+              performance: {
+                printFileSize: {
+                  compressed: true,
+                },
+              },
+              output: {
+                emitAssets: false,
+                target: 'node',
+                minify: false,
+              },
+            },
+          }
+        : {}),
+      ...(enableSSG && config.llms
+        ? {
+            node_md: {
+              resolve: {
+                alias: {
+                  ...reactSSRAlias,
+                  ...reactRouterDomAlias,
+                },
+              },
+              tools: {
+                rspack: {
+                  optimization: {
+                    moduleIds: 'named',
+                    chunkIds: 'named',
+                  },
+                },
+              },
+              source: {
+                entry: {
+                  index: SSG_MD_SERVER_ENTRY,
+                },
+                define: {
+                  'process.env.__SSR__': JSON.stringify(true),
+                  'process.env.__SSR_MD__': JSON.stringify(true),
                 },
               },
               performance: {
diff --git a/packages/core/src/node/mdx/loader.ts b/packages/core/src/node/mdx/loader.ts
index 2095a51ae..b29aa955f 100644
--- a/packages/core/src/node/mdx/loader.ts
+++ b/packages/core/src/node/mdx/loader.ts
@@ -1,4 +1,4 @@
-import { logger, type Rspack } from '@rsbuild/core';
+import type { Rspack } from '@rsbuild/core';
 
 import { compile, compileWithCrossCompilerCache } from './processor';
 import type { MdxLoaderOptions } from './types';
@@ -12,13 +12,23 @@ export default async function mdxLoader(
 
   const options = this.getOptions();
   const filepath = this.resourcePath;
-  const { config, docDirectory, routeService, pluginDriver } = options;
+  const {
+    config,
+    docDirectory,
+    routeService,
+    pluginDriver,
+    isSsgMd = false,
+  } = options;
 
   const crossCompilerCache = config?.markdown?.crossCompilerCache ?? true;
 
   try {
     // TODO wrong but good enough for now (example: "build --watch")
-    if (crossCompilerCache && process.env.NODE_ENV === 'production') {
+    if (
+      crossCompilerCache &&
+      process.env.NODE_ENV === 'production' &&
+      !isSsgMd
+    ) {
       const compileResult = await compileWithCrossCompilerCache({
         source,
         filepath,
@@ -37,16 +47,30 @@ export default async function mdxLoader(
         pluginDriver,
         routeService,
         addDependency: this.addDependency,
+        isSsgMd,
       });
       callback(null, compileResult);
     }
   } catch (e) {
     if (e instanceof Error) {
-      logger.debug(e);
+      // Enhance the message with filepath context for better error reporting
+      const message = `MDX compile error: ${e.message} in ${filepath}`;
+      let stack: string | undefined = e.stack;
+      // Truncate stack trace to first 10 lines for better readability
+      if (stack) {
+        const stackLines = stack.split('\n');
+        if (stackLines.length > 10) {
+          stack = stackLines.slice(0, 10).join('\n') + '\n    ... (truncated)';
+        }
+      }
+      // why not `callback(e)` ?
+      // https://github.com/web-infra-dev/rspack/issues/12080
       callback({
-        message: `MDX compile error: ${e.message} in ${filepath}`,
-        name: `${filepath} compile error`,
-      });
+        message,
+        ...(stack ? { stack } : {}),
+        name: e.name,
+        cause: e.cause,
+      } as Error);
     }
   }
 }
diff --git a/packages/core/src/node/mdx/options.ts b/packages/core/src/node/mdx/options.ts
index 6b8a605a6..eadac4be2 100644
--- a/packages/core/src/node/mdx/options.ts
+++ b/packages/core/src/node/mdx/options.ts
@@ -9,6 +9,7 @@ import remarkGFM from 'remark-gfm';
 import type { PluggableList } from 'unified';
 import type { PluginDriver } from '../PluginDriver';
 import type { RouteService } from '../route/RouteService';
+import { remarkSplitMdx } from '../ssg-md/remarkSplitMdx';
 import { rehypeCodeMeta } from './rehypePlugins/codeMeta';
 import { rehypeHeaderAnchor } from './rehypePlugins/headerAnchor';
 import { createRehypeShikiOptions } from './rehypePlugins/shiki';
@@ -26,6 +27,7 @@ export async function createMDXOptions(options: {
   routeService: RouteService | null;
   pluginDriver: PluginDriver | null;
   addDependency?: Rspack.LoaderContext['addDependency'];
+  isSsgMd?: boolean;
 }): Promise<ProcessorOptions> {
   const {
     docDirectory,
@@ -34,6 +36,7 @@ export async function createMDXOptions(options: {
     filepath,
     pluginDriver,
     addDependency,
+    isSsgMd = false,
   } = options;
   const remarkLinkOptions = config?.markdown?.link;
   const format = path.extname(filepath).slice(1) as 'mdx' | 'md';
@@ -64,19 +67,35 @@ export async function createMDXOptions(options: {
     remarkPlugins: [
       remarkGFM,
       remarkToc,
-      remarkContainerSyntax,
+      !isSsgMd && remarkContainerSyntax,
       [remarkFileCodeBlock, { filepath, addDependency }],
       [
         remarkLink,
-        {
-          // we do cleanUrls in runtime side
-          cleanUrls: false,
-          root: docDirectory,
-          routeService,
-          remarkLinkOptions,
-        },
+        isSsgMd
+          ? {
+              cleanUrls: '.md',
+              root: docDirectory,
+              routeService,
+              remarkLinkOptions: {
+                checkDeadLinks: false,
+                autoPrefix: true,
+              },
+            }
+          : {
+              // we do cleanUrls in runtime side
+              cleanUrls: false,
+              root: docDirectory,
+              routeService,
+              remarkLinkOptions,
+            },
       ],
       remarkImage,
+      isSsgMd && [
+        remarkSplitMdx,
+        typeof config?.llms === 'object'
+          ? config.llms.remarkSplitMdxOptions
+          : undefined,
+      ],
       globalComponents.length && [
         remarkBuiltin,
         {
@@ -86,29 +105,33 @@ export async function createMDXOptions(options: {
       ...remarkPluginsFromConfig,
       ...remarkPluginsFromPlugins,
     ].filter(Boolean) as PluggableList,
-    rehypePlugins: [
-      rehypeHeaderAnchor,
-      ...(format === 'md'
-        ? [
-            // make the code node compatible with `rehype-raw` which will remove `node.data` unconditionally
-            rehypeCodeMeta,
-            // why adding rehype-raw?
-            // This is what permits to embed HTML elements with format 'md'
-            // See https://github.com/facebook/docusaurus/pull/8960
-            // See https://github.com/mdx-js/mdx/pull/2295#issuecomment-1540085960
-            [rehypeRaw, { passThrough: nodeTypes }],
-          ]
-        : []),
-      [rehypeShiki, createRehypeShikiOptions(showLineNumbers, shiki)],
-      [
-        rehypeExternalLinks,
-        {
-          target: '_blank',
-          rel: 'noopener noreferrer',
-        },
-      ],
-      ...rehypePluginsFromConfig,
-      ...rehypePluginsFromPlugins,
-    ] as PluggableList,
+    ...(isSsgMd
+      ? {}
+      : {
+          rehypePlugins: [
+            rehypeHeaderAnchor,
+            ...(format === 'md'
+              ? [
+                  // make the code node compatible with `rehype-raw` which will remove `node.data` unconditionally
+                  rehypeCodeMeta,
+                  // why adding rehype-raw?
+                  // This is what permits to embed HTML elements with format 'md'
+                  // See https://github.com/facebook/docusaurus/pull/8960
+                  // See https://github.com/mdx-js/mdx/pull/2295#issuecomment-1540085960
+                  [rehypeRaw, { passThrough: nodeTypes }],
+                ]
+              : []),
+            [rehypeShiki, createRehypeShikiOptions(showLineNumbers, shiki)],
+            [
+              rehypeExternalLinks,
+              {
+                target: '_blank',
+                rel: 'noopener noreferrer',
+              },
+            ],
+            ...rehypePluginsFromConfig,
+            ...rehypePluginsFromPlugins,
+          ] as PluggableList,
+        }),
   };
 }
diff --git a/packages/core/src/node/mdx/processor.ts b/packages/core/src/node/mdx/processor.ts
index 54e47bacf..d1dd1bbbb 100644
--- a/packages/core/src/node/mdx/processor.ts
+++ b/packages/core/src/node/mdx/processor.ts
@@ -26,6 +26,11 @@ interface CompileOptions {
   pluginDriver: PluginDriver | null;
 
   addDependency?: Rspack.LoaderContext['addDependency']; // remarkFileCodeBlock hmr
+
+  /**
+   * @default false
+   */
+  isSsgMd?: boolean;
 }
 
 async function compile(options: CompileOptions): Promise<string> {
@@ -37,6 +42,7 @@ async function compile(options: CompileOptions): Promise<string> {
     routeService,
     pluginDriver,
     addDependency,
+    isSsgMd = false,
   } = options;
 
   const mdxOptions = await createMDXOptions({
@@ -46,6 +52,7 @@ async function compile(options: CompileOptions): Promise<string> {
     pluginDriver,
     routeService,
     addDependency,
+    isSsgMd,
   });
   // Separate frontmatter and content in MDX source
   const { frontmatter, emptyLinesSource } = loadFrontMatter(
diff --git a/packages/core/src/node/mdx/remarkPlugins/containerSyntax.test.ts b/packages/core/src/node/mdx/remarkPlugins/containerSyntax.test.ts
index f0365154e..884a54635 100644
--- a/packages/core/src/node/mdx/remarkPlugins/containerSyntax.test.ts
+++ b/packages/core/src/node/mdx/remarkPlugins/containerSyntax.test.ts
@@ -333,6 +333,18 @@ Line 2 with [link](http://example.com).
     expect(result).toMatchSnapshot();
   });
 
+  test('error when container type is unknown', async () => {
+    await expect(
+      process(`
+:::Tip
+This is a tip.
+:::
+`),
+    ).rejects.toThrow(
+      '[remarkContainerSyntax] Unknown container directive type "Tip". Supported types: tip, note, warning, caution, danger, info, details',
+    );
+  });
+
   test('empty blockquote', async () => {
     const result = await process(`
 
diff --git a/packages/core/src/node/mdx/remarkPlugins/containerSyntax.ts b/packages/core/src/node/mdx/remarkPlugins/containerSyntax.ts
index dea971351..be5bb0bd9 100644
--- a/packages/core/src/node/mdx/remarkPlugins/containerSyntax.ts
+++ b/packages/core/src/node/mdx/remarkPlugins/containerSyntax.ts
@@ -12,6 +12,7 @@
  * So the plugin is used to solve the problem and support both syntaxes in above cases.
  */
 /// <reference types="mdast-util-mdx-expression" />
+
 import type {
   BlockContent,
   Literal,
@@ -41,6 +42,7 @@ export const TITLE_REGEX_IN_MD = /{\s*title=["']?(.+)}\s*/;
 export const TITLE_REGEX_IN_MDX = /\s*title=["']?(.+)\s*/;
 
 const CALLOUT_COMPONENT = '$$$callout$$$'; // in md, we can not add import statement, so we use a special component name to avoid conflict with user components
+const ERROR_PREFIX = '[remarkContainerSyntax]';
 
 export type DirectiveType = (typeof DIRECTIVE_TYPES)[number];
 
@@ -104,262 +106,284 @@ const createContainer = (
  * 2. If it is, crawl the next nodes, if there is a paragraph node, we need to check if it is the end of the container directive. If not, we need to push it to the children of the container directive node.
  * 3. If we find the end of the container directive, we remove the visited node and insert the custom container directive node.
  */
-function transformer(tree: Parent) {
+function transformer(
+  tree: Parent,
+  warnUnknownType: (type: string | undefined) => void,
+) {
   let i = 0;
-  try {
-    while (i < tree.children.length) {
-      const node = tree.children[i];
+  while (i < tree.children.length) {
+    const node = tree.children[i];
+
+    if ('children' in node) {
+      transformer(node, warnUnknownType);
+    }
 
-      if ('children' in node) {
-        transformer(node);
+    if (node.type === 'containerDirective') {
+      const type = node.name as string;
+      if (type === CALLOUT_COMPONENT) {
+        i++;
+        continue;
       }
+      if (DIRECTIVE_TYPES.includes(type as DirectiveType)) {
+        tree.children.splice(
+          i,
+          1,
+          createContainer(
+            type,
+            node.attributes?.title ?? type.toUpperCase(),
+            node.children as BlockContent[],
+          ) as RootContent,
+        );
+      } else {
+        warnUnknownType(type);
+      }
+    } else if (
+      /**
+       * Support for Github Alerts
+       * > [!TIP]
+       * > This is a tip
+       *
+       * will be transformed to:
+       *
+       * <div class="rspress-directive tip">
+       *   <div class="rspress-directive-title">TIP</div>
+       *   <div class="rspress-directive-content">
+       *     <p>This is a tip</p>
+       *   </div>
+       * </div>
+       */
+      node.type === 'blockquote' &&
+      node.children[0]?.type === 'paragraph' &&
+      node.children[0].children?.[0] &&
+      'value' in node.children[0].children[0]
+    ) {
+      const initiatorTag = node.children[0].children[0].value;
+      const match = initiatorTag.match(REGEX_GH_BEGIN);
 
-      if (node.type === 'containerDirective') {
-        const type = node.name as DirectiveType;
-        if (DIRECTIVE_TYPES.includes(type)) {
-          tree.children.splice(
-            i,
-            1,
-            createContainer(
-              type,
-              node.attributes?.title ?? type.toUpperCase(),
-              node.children as BlockContent[],
-            ) as RootContent,
-          );
+      if (match) {
+        const [, type] = match;
+        if (!DIRECTIVE_TYPES.includes(type.toLowerCase() as DirectiveType)) {
+          warnUnknownType(type);
+          i++;
+          continue;
         }
-      } else if (
-        /**
-         * Support for Github Alerts
-         * > [!TIP]
-         * > This is a tip
-         *
-         * will be transformed to:
-         *
-         * <div class="rspress-directive tip">
-         *   <div class="rspress-directive-title">TIP</div>
-         *   <div class="rspress-directive-content">
-         *     <p>This is a tip</p>
-         *   </div>
-         * </div>
-         */
-        node.type === 'blockquote' &&
-        node.children[0]?.type === 'paragraph' &&
-        node.children[0].children?.[0] &&
-        'value' in node.children[0].children[0]
-      ) {
-        const initiatorTag = node.children[0].children[0].value;
-        const match = initiatorTag.match(REGEX_GH_BEGIN);
-
-        if (match) {
-          const [, type] = match;
-          if (!DIRECTIVE_TYPES.includes(type.toLowerCase() as DirectiveType)) {
-            i++;
-            continue;
-          }
-          if (
-            node.children.length === 1 &&
-            node.children[0].type === 'paragraph'
-          ) {
-            node.children[0].children[0].value = match[2] ?? '';
-          }
-          const newChild = createContainer(
-            type.toLowerCase(),
-            type.toUpperCase(),
-            (node.children.slice(1).length === 0
-              ? node.children.slice(0)
-              : node.children.slice(1)) as BlockContent[],
-          );
-          tree.children.splice(i, 1, newChild as RootContent);
+        if (
+          node.children.length === 1 &&
+          node.children[0].type === 'paragraph'
+        ) {
+          node.children[0].children[0].value = match[2] ?? '';
         }
+        const newChild = createContainer(
+          type.toLowerCase(),
+          type.toUpperCase(),
+          (node.children.slice(1).length === 0
+            ? node.children.slice(0)
+            : node.children.slice(1)) as BlockContent[],
+        );
+        tree.children.splice(i, 1, newChild as RootContent);
       }
+    }
+
+    if (
+      node.type !== 'paragraph' ||
+      // 1. We get the paragraph and check if it is a container directive
+      node.children[0].type !== 'text'
+    ) {
+      i++;
+      continue;
+    }
 
+    const firstTextNode = node.children[0];
+    const text = firstTextNode.value;
+    const metaText = text.split('\n')[0];
+    const content = text.slice(metaText.length);
+    const match = metaText.match(REGEX_BEGIN);
+    if (!match) {
+      i++;
+      continue;
+    }
+    const [, type, rawTitle] = match;
+    // In .md, we can get :::tip{title="foo"} in the first text node
+    // In .mdx, we get :::tip in first node and {title="foo"} in second node
+    let title = parseTitle(rawTitle);
+    // :::tip{title="foo"}
+    const titleExpressionNode =
+      node.children[1] && node.children[1].type === 'mdxTextExpression'
+        ? node.children[1]
+        : null;
+    // Handle the case of `::: tip {title="foo"}`
+    if (titleExpressionNode) {
+      title = parseTitle((titleExpressionNode as Literal).value, true);
+      // {title="foo"} is not a part of the content, So we need to remove it
+      node.children.splice(1, 1);
+    }
+    if (!DIRECTIVE_TYPES.includes(type as DirectiveType)) {
+      warnUnknownType(type);
+      i++;
+      continue;
+    }
+    // 2. If it is, we remove the paragraph and create a container directive
+    const wrappedChildren: (BlockContent | PhrasingContent)[] = [];
+    // 2.1 case: with no newline between `:::` and `:::`, for example
+    // ::: tip
+    // This is a tip
+    // :::
+    // Here the content is `::: tip\nThis is a tip\n:::`
+    if (content?.endsWith(':::')) {
+      wrappedChildren.push({
+        type: 'paragraph',
+        children: [
+          {
+            type: 'text',
+            value: content.replace(REGEX_END, ''),
+          },
+        ],
+      });
+      const newChild = createContainer(type, title, wrappedChildren);
+      tree.children.splice(i, 1, newChild as RootContent);
+    } else {
+      // 2.2 case: with newline before the end of container, for example:
+      // ::: tip
+      // This is a tip
+      //
+      // :::
+      // Here the content is `::: tip\nThis is a tip`
+      const paragraphChild: Paragraph = {
+        type: 'paragraph',
+        children: [] as PhrasingContent[],
+      };
+      wrappedChildren.push(paragraphChild);
+      if (content.length) {
+        paragraphChild.children.push({
+          type: 'text',
+          value: content,
+        });
+      }
+      paragraphChild.children.push(...node.children.slice(1, -1));
+      // If the inserted paragraph is empty, we remove it
+      if (paragraphChild.children.length === 0) {
+        wrappedChildren.pop();
+      }
+      const lastChildInNode = node.children[node.children.length - 1];
+      // We find the end of the container directive in current paragraph
       if (
-        node.type !== 'paragraph' ||
-        // 1. We get the paragraph and check if it is a container directive
-        node.children[0].type !== 'text'
+        lastChildInNode.type === 'text' &&
+        REGEX_END.test(lastChildInNode.value)
       ) {
+        const lastChildInNodeText = lastChildInNode.value;
+        const matchedEndContent = lastChildInNodeText.slice(0, -3).trimEnd();
+        // eslint-disable-next-line max-depth
+        if (wrappedChildren.length) {
+          (wrappedChildren[0] as Paragraph).children.push({
+            type: 'text',
+            value: matchedEndContent,
+          });
+        } else if (matchedEndContent) {
+          wrappedChildren.push({
+            type: 'paragraph',
+            children: [
+              {
+                type: 'text',
+                value: matchedEndContent,
+              },
+            ],
+          });
+        }
+        const newChild = createContainer(type, title, wrappedChildren);
+        tree.children.splice(i, 1, newChild as RootContent);
         i++;
         continue;
       }
 
-      const firstTextNode = node.children[0];
-      const text = firstTextNode.value;
-      const metaText = text.split('\n')[0];
-      const content = text.slice(metaText.length);
-      const match = metaText.match(REGEX_BEGIN);
-      if (!match) {
-        i++;
-        continue;
+      if (lastChildInNode !== firstTextNode && wrappedChildren.length) {
+        // We don't find the end of the container directive in current paragraph
+        (wrappedChildren[0] as Paragraph).children.push(lastChildInNode);
       }
-      const [, type, rawTitle] = match;
-      // In .md, we can get :::tip{title="foo"} in the first text node
-      // In .mdx, we get :::tip in first node and {title="foo"} in second node
-      let title = parseTitle(rawTitle);
-      // :::tip{title="foo"}
-      const titleExpressionNode =
-        node.children[1] && node.children[1].type === 'mdxTextExpression'
-          ? node.children[1]
-          : null;
-      // Handle the case of `::: tip {title="foo"}`
-      if (titleExpressionNode) {
-        title = parseTitle((titleExpressionNode as Literal).value, true);
-        // {title="foo"} is not a part of the content, So we need to remove it
-        node.children.splice(1, 1);
-      }
-      if (!DIRECTIVE_TYPES.includes(type as DirectiveType)) {
-        i++;
-        continue;
-      }
-      // 2. If it is, we remove the paragraph and create a container directive
-      const wrappedChildren: (BlockContent | PhrasingContent)[] = [];
-      // 2.1 case: with no newline between `:::` and `:::`, for example
+
+      // 2.3 The final case: has newline after the start of container, for example:
       // ::: tip
+      //
       // This is a tip
       // :::
-      // Here the content is `::: tip\nThis is a tip\n:::`
-      if (content?.endsWith(':::')) {
-        wrappedChildren.push({
-          type: 'paragraph',
-          children: [
-            {
-              type: 'text',
-              value: content.replace(REGEX_END, ''),
-            },
-          ],
-        });
-        const newChild = createContainer(type, title, wrappedChildren);
-        tree.children.splice(i, 1, newChild as RootContent);
-      } else {
-        // 2.2 case: with newline before the end of container, for example:
-        // ::: tip
-        // This is a tip
-        //
-        // :::
-        // Here the content is `::: tip\nThis is a tip`
-        const paragraphChild: Paragraph = {
-          type: 'paragraph',
-          children: [] as PhrasingContent[],
-        };
-        wrappedChildren.push(paragraphChild);
-        if (content.length) {
-          paragraphChild.children.push({
-            type: 'text',
-            value: content,
-          });
-        }
-        paragraphChild.children.push(...node.children.slice(1, -1));
-        // If the inserted paragraph is empty, we remove it
-        if (paragraphChild.children.length === 0) {
-          wrappedChildren.pop();
+
+      // All of the above cases need to crawl the children of the container directive node.
+      // In other word, We look for the next paragraph nodes and collect all the content until we find the end of the container directive
+      let j = i + 1;
+      while (j < tree.children.length) {
+        const currentParagraph = tree.children[j];
+        if (currentParagraph.type !== 'paragraph') {
+          wrappedChildren.push(currentParagraph as BlockContent);
+          j++;
+          continue;
         }
-        const lastChildInNode = node.children[node.children.length - 1];
-        // We find the end of the container directive in current paragraph
+        const lastChild =
+          currentParagraph.children[currentParagraph.children.length - 1];
+        // The whole paragraph doesn't arrive at the end of the container directive, we collect the whole paragraph
         if (
-          lastChildInNode.type === 'text' &&
-          REGEX_END.test(lastChildInNode.value)
+          lastChild !== firstTextNode &&
+          (lastChild.type !== 'text' || !REGEX_END.test(lastChild.value))
         ) {
-          const lastChildInNodeText = lastChildInNode.value;
-          const matchedEndContent = lastChildInNodeText.slice(0, -3).trimEnd();
-          // eslint-disable-next-line max-depth
-          if (wrappedChildren.length) {
-            (wrappedChildren[0] as Paragraph).children.push({
-              type: 'text',
-              value: matchedEndContent,
-            });
-          } else if (matchedEndContent) {
+          wrappedChildren.push({
+            ...currentParagraph,
+            children: currentParagraph.children.filter(
+              child => child !== firstTextNode,
+            ),
+          });
+          j++;
+        } else {
+          // 3. We find the end of the container directive
+          // Then create the container directive, and remove the original paragraphs
+          // Finally, we insert the new container directive and break the loop
+          const lastChildText = lastChild.value;
+          const matchedEndContent = lastChildText.slice(0, -3).trimEnd();
+          const filteredChildren = currentParagraph.children.filter(
+            child => child !== firstTextNode && child !== lastChild,
+          );
+
+          if (matchedEndContent) {
             wrappedChildren.push({
               type: 'paragraph',
               children: [
+                ...filteredChildren,
                 {
                   type: 'text',
                   value: matchedEndContent,
                 },
               ],
             });
-          }
-          const newChild = createContainer(type, title, wrappedChildren);
-          tree.children.splice(i, 1, newChild as RootContent);
-          i++;
-          continue;
-        }
-
-        if (lastChildInNode !== firstTextNode && wrappedChildren.length) {
-          // We don't find the end of the container directive in current paragraph
-          (wrappedChildren[0] as Paragraph).children.push(lastChildInNode);
-        }
-
-        // 2.3 The final case: has newline after the start of container, for example:
-        // ::: tip
-        //
-        // This is a tip
-        // :::
-
-        // All of the above cases need to crawl the children of the container directive node.
-        // In other word, We look for the next paragraph nodes and collect all the content until we find the end of the container directive
-        let j = i + 1;
-        while (j < tree.children.length) {
-          const currentParagraph = tree.children[j];
-          if (currentParagraph.type !== 'paragraph') {
-            wrappedChildren.push(currentParagraph as BlockContent);
-            j++;
-            continue;
-          }
-          const lastChild =
-            currentParagraph.children[currentParagraph.children.length - 1];
-          // The whole paragraph doesn't arrive at the end of the container directive, we collect the whole paragraph
-          if (
-            lastChild !== firstTextNode &&
-            (lastChild.type !== 'text' || !REGEX_END.test(lastChild.value))
-          ) {
-            wrappedChildren.push({
-              ...currentParagraph,
-              children: currentParagraph.children.filter(
-                child => child !== firstTextNode,
-              ),
-            });
-            j++;
           } else {
-            // 3. We find the end of the container directive
-            // Then create the container directive, and remove the original paragraphs
-            // Finally, we insert the new container directive and break the loop
-            const lastChildText = lastChild.value;
-            const matchedEndContent = lastChildText.slice(0, -3).trimEnd();
-            const filteredChildren = currentParagraph.children.filter(
-              child => child !== firstTextNode && child !== lastChild,
-            );
-
-            if (matchedEndContent) {
-              wrappedChildren.push({
-                type: 'paragraph',
-                children: [
-                  ...filteredChildren,
-                  {
-                    type: 'text',
-                    value: matchedEndContent,
-                  },
-                ],
-              });
-            } else {
-              wrappedChildren.push(...filteredChildren);
-            }
-
-            const newChild = createContainer(type, title, wrappedChildren);
-            tree.children.splice(i, j - i + 1, newChild as RootContent);
-            break;
+            wrappedChildren.push(...filteredChildren);
           }
+
+          const newChild = createContainer(type, title, wrappedChildren);
+          tree.children.splice(i, j - i + 1, newChild as RootContent);
+          break;
         }
       }
-      i++;
     }
-  } catch (e) {
-    console.log(e);
-    throw e;
+    i++;
   }
 }
 
 export const remarkContainerSyntax: Plugin<[], Root> = () => {
+  const unknownTypes = new Set<string>();
+
+  const warnUnknownType = (type: string | undefined) => {
+    if (!type || type === CALLOUT_COMPONENT) {
+      return;
+    }
+    if (unknownTypes.has(type)) {
+      return;
+    }
+    unknownTypes.add(type);
+    const supportedTypes = DIRECTIVE_TYPES.join(', ');
+    throw new Error(
+      `${ERROR_PREFIX} Unknown container directive type "${type}". Supported types: ${supportedTypes}`,
+    );
+  };
+
   return tree => {
-    transformer(tree);
+    transformer(tree, warnUnknownType);
     tree.children.unshift(
       getNamedImportAstNode('Callout', CALLOUT_COMPONENT, '@theme'),
     );
diff --git a/packages/core/src/node/mdx/remarkPlugins/link.ts b/packages/core/src/node/mdx/remarkPlugins/link.ts
index 19ca70a59..28efa2759 100644
--- a/packages/core/src/node/mdx/remarkPlugins/link.ts
+++ b/packages/core/src/node/mdx/remarkPlugins/link.ts
@@ -148,17 +148,21 @@ function normalizeLink(
 
   if (typeof cleanUrls === 'boolean') {
     url = normalizeHref(url, cleanUrls);
+    // preserve dead links
+    if (!routeService.isExistRoute(url)) {
+      deadLinks.set(nodeUrl, url);
+      return nodeUrl;
+    }
   } else {
     url = normalizeHref(url, false);
+    // preserve dead links
+    if (!routeService.isExistRoute(url)) {
+      deadLinks.set(nodeUrl, url);
+      return nodeUrl;
+    }
     url = url.replace(/\.html$/, cleanUrls);
   }
 
-  // preserve dead links
-  if (!routeService.isExistRoute(url)) {
-    deadLinks.set(nodeUrl, url);
-    return nodeUrl;
-  }
-
   if (search) {
     url += `?${search}`;
   }
diff --git a/packages/core/src/node/mdx/types.ts b/packages/core/src/node/mdx/types.ts
index e6fa84aeb..6f2aa6683 100644
--- a/packages/core/src/node/mdx/types.ts
+++ b/packages/core/src/node/mdx/types.ts
@@ -10,6 +10,10 @@ export interface MdxLoaderOptions {
   checkDeadLinks: boolean;
   routeService: RouteService;
   pluginDriver: PluginDriver;
+  /**
+   * @default false
+   */
+  isSsgMd?: boolean;
 }
 
 export interface PageMeta {
diff --git a/packages/core/src/node/route/RouteService.ts b/packages/core/src/node/route/RouteService.ts
index ac108d2ad..7927034cd 100644
--- a/packages/core/src/node/route/RouteService.ts
+++ b/packages/core/src/node/route/RouteService.ts
@@ -319,4 +319,16 @@ ${routeMeta
   getRoutePageByRoutePath(routePath: string) {
     return this.routeData.get(routePath);
   }
+
+  getDocsDir(): string {
+    return this.#scanDir;
+  }
+
+  getLangs() {
+    return this.#langs;
+  }
+
+  getDefaultLang() {
+    return this.#defaultLang;
+  }
 }
diff --git a/packages/core/src/node/runtimeModule/siteData/createSiteData.ts b/packages/core/src/node/runtimeModule/siteData/createSiteData.ts
index aea4015b7..f515bc12f 100644
--- a/packages/core/src/node/runtimeModule/siteData/createSiteData.ts
+++ b/packages/core/src/node/runtimeModule/siteData/createSiteData.ts
@@ -1,9 +1,4 @@
-import {
-  addLeadingSlash,
-  addTrailingSlash,
-  type SiteData,
-  type UserConfig,
-} from '@rspress/shared';
+import type { SiteData, UserConfig } from '@rspress/shared';
 import { getIconUrlPath } from '@rspress/shared/node-utils';
 import { normalizeThemeConfig } from './normalizeThemeConfig';
 
@@ -18,13 +13,8 @@ export async function createSiteData(userConfig: UserConfig): Promise<{
     tempSearchObj.searchHooks = undefined;
   }
 
-  const { base } = userConfig;
-
-  // TODO: base can be normalized in compile time side in an earlier stage
-  const normalizedBase = addTrailingSlash(addLeadingSlash(base ?? '/'));
-
   const siteData: Omit<SiteData, 'root' | 'pages'> = {
-    base: normalizedBase,
+    base: userConfig.base ?? '/',
     title: userConfig?.title || '',
     description: userConfig?.description || '',
     icon: getIconUrlPath(userConfig?.icon) || '',
diff --git a/packages/core/src/node/ssg-md/llms/emitLlmsTxt.ts b/packages/core/src/node/ssg-md/llms/emitLlmsTxt.ts
new file mode 100644
index 000000000..f4009c274
--- /dev/null
+++ b/packages/core/src/node/ssg-md/llms/emitLlmsTxt.ts
@@ -0,0 +1,176 @@
+import { matchPath } from '@rspress/runtime/server';
+import {
+  getSidebarDataGroup,
+  type Nav,
+  type NavItemWithLink,
+  type Sidebar,
+  type SidebarDivider,
+  type SidebarGroup,
+  type SidebarItem,
+  type SidebarSectionHeader,
+  type UserConfig,
+} from '@rspress/shared';
+import type { RouteService } from '../../route/RouteService';
+import { generateLlmsFullTxt, generateLlmsTxt } from './llmsTxt';
+
+export async function emitLlmsTxt(
+  config: UserConfig,
+  routeService: RouteService,
+  emitAsset: (assetName: string, content: string | Buffer) => void,
+  mdContents: Map<string, string>,
+) {
+  const base = config.base ?? '/';
+  const locales = config.themeConfig?.locales;
+  const isMultiLang = locales && locales.length > 0;
+
+  const nav = (
+    isMultiLang
+      ? locales
+          .filter(i => Boolean(i.nav))
+          .map(i => ({ nav: i.nav, lang: i.lang }))
+      : [{ nav: config.themeConfig?.nav, lang: config.lang ?? '' }]
+  ) as {
+    nav: Nav;
+    lang: string;
+  }[];
+
+  const sidebars = isMultiLang
+    ? locales.map(i => i.sidebar)
+    : [config.themeConfig?.sidebar];
+
+  const sidebar = sidebars.reduce((prev: Sidebar, curr) => {
+    Object.assign(prev, curr);
+    return prev;
+  }, {} as Sidebar);
+
+  const noVersionNav: (NavItemWithLink & { lang: string })[] = Array.isArray(
+    nav,
+  )
+    ? (
+        nav
+          .map(i => {
+            const nav = ((i.nav as any).default || i.nav) as NavItemWithLink[];
+            const lang = i.lang;
+            return nav.map(i => {
+              return {
+                ...i,
+                lang,
+              };
+            });
+          })
+          .flat() as unknown as (NavItemWithLink & { lang: string })[]
+      ).filter(i => i.activeMatch || i.link)
+    : [];
+
+  const defaultLang = routeService.getDefaultLang();
+  await Promise.all(
+    routeService.getLangs().map(async lang => {
+      const navList = noVersionNav.filter(i => i.lang === lang);
+      const routeGroups: string[][] = new Array(navList.length)
+        .fill(0)
+        .map(() => []);
+      const others: string[] = [];
+
+      routeService.getRoutes().forEach(routeMeta => {
+        if (routeMeta.lang !== lang) {
+          return;
+        }
+        const { routePath } = routeMeta;
+
+        for (let i = 0; i < routeGroups.length; i++) {
+          const routeGroup = routeGroups[i];
+          const navItem = navList[i];
+          if (
+            lang === navItem.lang &&
+            new RegExp(navItem.activeMatch ?? navItem.link).test(routePath)
+          ) {
+            routeGroup.push(routePath);
+            return;
+          }
+        }
+        others.push(routePath);
+      });
+
+      for (const routeGroup of routeGroups) {
+        organizeBySidebar(sidebar, routeGroup);
+      }
+
+      const llmsTxtContent = await generateLlmsTxt(
+        routeGroups,
+        others,
+        navList,
+        config.title,
+        config.description,
+        config.base!,
+        routeService,
+      );
+
+      const llmsFullTxtContent = generateLlmsFullTxt(
+        routeGroups,
+        navList,
+        others,
+        base,
+        mdContents,
+      );
+
+      const prefix = defaultLang === lang ? '' : `${lang}/`;
+
+      emitAsset(`${prefix}llms.txt`, llmsTxtContent);
+      emitAsset(`${prefix}llms-full.txt`, llmsFullTxtContent);
+    }),
+  );
+}
+
+function flatSidebar(
+  sidebar: (
+    | SidebarGroup
+    | SidebarItem
+    | SidebarDivider
+    | SidebarSectionHeader
+    | string
+  )[],
+): string[] {
+  if (!sidebar) {
+    return [];
+  }
+  return sidebar
+    .flatMap(i => {
+      if (typeof i === 'string') {
+        return i;
+      }
+      if ('link' in i && typeof i.link === 'string') {
+        return [i.link, ...flatSidebar((i as any)?.items ?? [])];
+      }
+      if ('items' in i && Array.isArray(i.items)) {
+        return flatSidebar(i.items);
+      }
+      return undefined;
+    })
+    .filter(Boolean) as string[];
+}
+
+function organizeBySidebar(sidebar: Sidebar, routes: string[]) {
+  if (routes.length === 0) {
+    return;
+  }
+  const route = routes[0];
+  const currSidebar = getSidebarDataGroup(sidebar as any, route);
+
+  if (currSidebar.length === 0) {
+    return;
+  }
+  const orderList = flatSidebar(currSidebar);
+
+  routes.sort((a, b) => {
+    let aIndex = orderList.findIndex(order => matchPath(order, a));
+    // if not in sidebar, put it to last
+    if (aIndex === -1) {
+      aIndex = Number.MAX_SAFE_INTEGER;
+    }
+    let bIndex = orderList.findIndex(order => matchPath(order, b));
+    if (bIndex === -1) {
+      bIndex = Number.MAX_SAFE_INTEGER;
+    }
+    return aIndex - bIndex;
+  });
+}
diff --git a/packages/core/src/node/ssg-md/llms/llmsTxt.ts b/packages/core/src/node/ssg-md/llms/llmsTxt.ts
new file mode 100644
index 000000000..db8425180
--- /dev/null
+++ b/packages/core/src/node/ssg-md/llms/llmsTxt.ts
@@ -0,0 +1,120 @@
+import { type NavItemWithLink, normalizeHref, withBase } from '@rspress/shared';
+import { extractInfoFromFrontmatterWithAbsolutePath } from '../../auto-nav-sidebar/utils';
+import type { RouteService } from '../../route/RouteService';
+
+function routePathToMdPath(routePath: string, base: string): string {
+  let url: string = routePath;
+  url = normalizeHref(url, false);
+  url = url.replace(/\.html$/, '.md');
+  return withBase(url, base);
+}
+
+async function generateLlmsTxt(
+  routeGroups: string[][],
+  others: string[],
+  navList: { text: string }[],
+  title: string | undefined,
+  description: string | undefined,
+  base: string,
+  routeService: RouteService,
+): Promise<string> {
+  const lines: string[] = [];
+
+  const summary = `# ${title}${description ? `\n\n> ${description}` : ''}`;
+
+  async function genH2Part(
+    nav: { text: string },
+    routes: string[],
+  ): Promise<string[]> {
+    const lines: string[] = [];
+    const { text } = nav;
+    if (routes.length === 0) {
+      return lines;
+    }
+
+    const routeLines: string[] = (
+      await Promise.all(
+        routes.map(async route => {
+          const routePage = routeService.getRoutePageByRoutePath(route)!;
+          const { lang, routePath, absolutePath } = routePage.routeMeta;
+          if (routePath === '/' || routePath === `/${lang}/`) {
+            return;
+          }
+
+          const { title, description } =
+            await extractInfoFromFrontmatterWithAbsolutePath(
+              absolutePath,
+              routeService.getDocsDir(),
+            );
+
+          return `- [${title}](${routePathToMdPath(routePath, base)})${description ? `: ${description}` : ''}`;
+        }),
+      )
+    ).filter((i): i is string => Boolean(i));
+    if (routeLines.length > 0) {
+      const title = text;
+      lines.push(`\n## ${title}\n`);
+      lines.push(...routeLines);
+    }
+
+    return lines;
+  }
+
+  const h2Parts = await Promise.all(
+    navList.map(async (nav, i) => {
+      const routes = routeGroups[i];
+      const h2Part = await genH2Part(nav, routes);
+      return h2Part;
+    }),
+  );
+  lines.push(...h2Parts.flat());
+
+  // handle others
+  const otherLines = await genH2Part(
+    {
+      text: 'Others',
+    },
+    others,
+  );
+  lines.push(...otherLines);
+  const llmsTxt = `${summary}\n${lines.join('\n')}`;
+
+  return llmsTxt;
+}
+
+function generateLlmsFullTxt(
+  routeGroups: string[][],
+  navList: (NavItemWithLink & { lang: string })[],
+  others: string[],
+  base: string,
+  mdContents: Map<string, string>,
+): string {
+  const lines: string[] = [];
+  // generate llms.txt with obj
+  for (let i = 0; i < navList.length; i++) {
+    const routeGroup = routeGroups[i];
+    if (routeGroup.length === 0) {
+      continue;
+    }
+    for (const routePath of routeGroup) {
+      lines.push(`---
+url: ${routePathToMdPath(routePath, base)}
+---
+`);
+      lines.push(mdContents.get(routePath) ?? '');
+      lines.push('\n');
+    }
+  }
+  for (const routePath of others) {
+    lines.push(`---
+url: ${routePathToMdPath(routePath, base)}
+---
+`);
+    lines.push(mdContents.get(routePath) ?? '');
+    lines.push('\n');
+  }
+
+  return lines.join('\n');
+}
+
+export { generateLlmsFullTxt, generateLlmsTxt, routePathToMdPath };
diff --git a/packages/core/src/node/ssg-md/react/index.ts b/packages/core/src/node/ssg-md/react/index.ts
new file mode 100644
index 000000000..c09dae2f3
--- /dev/null
+++ b/packages/core/src/node/ssg-md/react/index.ts
@@ -0,0 +1 @@
+export { renderToMarkdownString } from './render';
diff --git a/packages/core/src/node/ssg-md/react/reconciler.ts b/packages/core/src/node/ssg-md/react/reconciler.ts
new file mode 100644
index 000000000..d6f2caffb
--- /dev/null
+++ b/packages/core/src/node/ssg-md/react/reconciler.ts
@@ -0,0 +1,347 @@
+import { createContext } from 'react';
+import createReconciler, { type ReactContext } from 'react-reconciler';
+import {
+  DefaultEventPriority,
+  NoEventPriority,
+} from 'react-reconciler/constants.js';
+
+// Define types
+type ElementNames = string;
+type Props = Record<string, unknown>;
+type HostContext = {
+  isInsideText: boolean;
+};
+
+// Text node class
+export class TextNode {
+  public text: string;
+  public parent?: MarkdownNode;
+
+  constructor(text: string) {
+    this.text = text;
+  }
+
+  setText(text: string): void {
+    this.text = text;
+  }
+}
+
+// Markdown node class
+export class MarkdownNode {
+  public type: string;
+  public props: Record<string, unknown>;
+  public children: (MarkdownNode | TextNode)[];
+  public parent?: MarkdownNode;
+
+  constructor(type: string, props: Record<string, unknown> = {}) {
+    this.type = type;
+    this.props = props;
+    this.children = [];
+  }
+
+  appendChild(child: MarkdownNode | TextNode): void {
+    this.children.push(child);
+    if ('parent' in child) {
+      child.parent = this;
+    }
+  }
+
+  removeChild(child: MarkdownNode | TextNode): void {
+    const index = this.children.indexOf(child);
+    if (index !== -1) {
+      this.children.splice(index, 1);
+    }
+  }
+
+  insertBefore(
+    child: MarkdownNode | TextNode,
+    beforeChild: MarkdownNode | TextNode,
+  ): void {
+    const index = this.children.indexOf(beforeChild);
+    if (index !== -1) {
+      this.children.splice(index, 0, child);
+    } else {
+      this.appendChild(child);
+    }
+    if ('parent' in child) {
+      child.parent = this;
+    }
+  }
+}
+
+// Current update priority
+let currentUpdatePriority = NoEventPriority;
+
+// Create React Reconciler config
+const hostConfig: createReconciler.HostConfig<
+  string,
+  Props,
+  MarkdownNode,
+  MarkdownNode,
+  TextNode,
+  MarkdownNode,
+  unknown,
+  unknown,
+  unknown,
+  HostContext,
+  unknown,
+  unknown,
+  unknown,
+  unknown
+> = {
+  // Basic capabilities
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: false,
+
+  // Get root host context
+  getRootHostContext(): HostContext {
+    return { isInsideText: false };
+  },
+
+  // Get child host context
+  getChildHostContext(
+    parentHostContext: HostContext,
+    type: string,
+  ): HostContext {
+    const previousIsInsideText = parentHostContext.isInsideText;
+    // Determine whether this should be treated as text
+    const isInsideText =
+      type === 'text' || type === 'span' || previousIsInsideText;
+
+    if (previousIsInsideText === isInsideText) {
+      return parentHostContext;
+    }
+
+    return { isInsideText };
+  },
+
+  // Create instance
+  createInstance(type: string, props: Props): MarkdownNode {
+    return new MarkdownNode(type, props);
+  },
+
+  // Create text instance
+  createTextInstance(text: string): TextNode {
+    return new TextNode(text);
+  },
+
+  // Determine whether to set text content directly
+  shouldSetTextContent(_type: string, _props: Props): boolean {
+    // For simple text content, return false so React creates a text node
+    return false;
+  },
+
+  // Append child
+  appendChild(parent: MarkdownNode, child: MarkdownNode | TextNode): void {
+    parent.appendChild(child);
+  },
+
+  // Insert child before another
+  insertBefore(
+    parent: MarkdownNode,
+    child: MarkdownNode | TextNode,
+    beforeChild: MarkdownNode | TextNode,
+  ): void {
+    parent.insertBefore(child, beforeChild);
+  },
+
+  // Remove child
+  removeChild(parent: MarkdownNode, child: MarkdownNode | TextNode): void {
+    parent.removeChild(child);
+  },
+
+  // Commit text update
+  commitTextUpdate(
+    textInstance: TextNode,
+    _oldText: string,
+    newText: string,
+  ): void {
+    textInstance.setText(newText);
+  },
+
+  // Commit update
+  commitUpdate(
+    instance: MarkdownNode,
+    _type: string,
+    _oldProps: Props,
+    newProps: Props,
+    _internalHandle: unknown,
+  ): void {
+    // Update instance props with new props
+    instance.props = newProps;
+  },
+
+  // Finalize initial children
+  finalizeInitialChildren(): boolean {
+    // Return false to prevent commitMount from being called
+    return false;
+  },
+
+  // Commit mount - explicitly no-op to prevent lifecycle methods
+  // This prevents componentDidMount from being called (SSR behavior)
+  commitMount(): void {
+    // No-op: In SSR/static rendering, we don't want lifecycle methods to run
+  },
+
+  // Clear container
+  clearContainer(container: MarkdownNode): void {
+    container.children = [];
+  },
+
+  // Handle update priority
+  setCurrentUpdatePriority(newPriority: number): void {
+    currentUpdatePriority = newPriority;
+  },
+
+  getCurrentUpdatePriority(): number {
+    return currentUpdatePriority;
+  },
+
+  resolveUpdatePriority(): number {
+    if (currentUpdatePriority !== NoEventPriority) {
+      return currentUpdatePriority;
+    }
+    return DefaultEventPriority;
+  },
+
+  // Append initial child
+  appendInitialChild(
+    parent: MarkdownNode,
+    child: MarkdownNode | TextNode,
+  ): void {
+    parent.appendChild(child);
+  },
+
+  preparePortalMount(): void {
+    // Portal mount preparation logic
+  },
+
+  // Other required implementations
+  resetTextContent(): void {},
+  getPublicInstance(instance: MarkdownNode | TextNode) {
+    return instance;
+  },
+  prepareForCommit(_containerInfo: MarkdownNode): null {
+    return null;
+  },
+  resetAfterCommit(_containerInfo: MarkdownNode): void {},
+  // Use real setTimeout/clearTimeout to allow React to schedule work properly
+  // Effects will still be scheduled, but we'll read the result before they execute
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  scheduleMicrotask:
+    typeof queueMicrotask === 'function'
+      ? queueMicrotask
+      : (fn: () => unknown) => Promise.resolve().then(fn),
+  getInstanceFromNode(): null {
+    return null;
+  },
+  beforeActiveInstanceBlur(): void {},
+  afterActiveInstanceBlur(): void {},
+  prepareScopeUpdate(): void {},
+  getInstanceFromScope(): null {
+    return null;
+  },
+  detachDeletedInstance(): void {},
+
+  // Container related methods
+  appendChildToContainer(
+    container: MarkdownNode,
+    child: MarkdownNode | TextNode,
+  ): void {
+    container.appendChild(child);
+  },
+
+  insertInContainerBefore(
+    container: MarkdownNode,
+    child: MarkdownNode | TextNode,
+    beforeChild: MarkdownNode | TextNode,
+  ): void {
+    container.insertBefore(child, beforeChild);
+  },
+
+  removeChildFromContainer(
+    container: MarkdownNode,
+    child: MarkdownNode | TextNode,
+  ): void {
+    container.removeChild(child);
+  },
+
+  hideInstance(_instance: MarkdownNode): void {
+    // Logic to hide an instance; can set a flag here
+  },
+
+  hideTextInstance(textInstance: TextNode): void {
+    textInstance.setText('');
+  },
+
+  unhideInstance(_instance: MarkdownNode): void {
+    // Logic to unhide an instance
+  },
+
+  unhideTextInstance(textInstance: TextNode, text: string): void {
+    textInstance.setText(text);
+  },
+
+  // React 18+ additional methods
+  maySuspendCommit(): boolean {
+    return false;
+  },
+
+  preloadInstance(): boolean {
+    return true;
+  },
+
+  startSuspendingCommit(): void {},
+
+  suspendInstance(): void {},
+
+  waitForCommitToBeReady(): null {
+    return null;
+  },
+
+  NotPendingTransition: null as unknown,
+
+  HostTransitionContext: createContext(
+    null,
+  ) as unknown as ReactContext<unknown>,
+
+  resetFormInstance(): void {},
+
+  requestPostPaintCallback(): void {},
+
+  shouldAttemptEagerTransition(): boolean {
+    return false;
+  },
+
+  trackSchedulerEvent(): void {},
+
+  resolveEventType(): null {
+    return null;
+  },
+
+  resolveEventTimeStamp(): number {
+    return -1.1;
+  },
+};
+
+// Create reconciler instance
+export const reconciler = createReconciler<
+  ElementNames,
+  Props,
+  MarkdownNode,
+  MarkdownNode,
+  TextNode,
+  MarkdownNode,
+  unknown,
+  unknown,
+  unknown,
+  HostContext,
+  unknown,
+  unknown,
+  unknown,
+  unknown
+>(hostConfig);
diff --git a/packages/core/src/node/ssg-md/react/render.test.tsx b/packages/core/src/node/ssg-md/react/render.test.tsx
new file mode 100644
index 000000000..a4ac16ab0
--- /dev/null
+++ b/packages/core/src/node/ssg-md/react/render.test.tsx
@@ -0,0 +1,228 @@
+import React, {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { describe, expect, it } from 'vitest';
+import { renderToMarkdownString } from './render';
+
+describe('renderToMarkdownString', () => {
+  it('renders text', async () => {
+    expect(
+      await renderToMarkdownString(
+        <div>
+          <strong>foo</strong>
+          <span>bar</span>
+        </div>,
+      ),
+    ).toMatchInlineSnapshot(`"**foo**bar"`);
+  });
+  it('renders header and paragraph', async () => {
+    const Comp1 = ({ children }: { children?: ReactNode }) => {
+      const [count, setCount] = useState(1);
+      return (
+        <h1
+          onClick={() => {
+            setCount(count => count + 1);
+          }}
+        >
+          Header {count} {children}
+        </h1>
+      );
+    };
+    const Comp2 = () => {
+      return (
+        <>
+          <Comp1 />
+          <p>Paragraph</p>
+        </>
+      );
+    };
+
+    const Comp3 = () => {
+      return (
+        <>
+          <Comp1>{<>children text</>}</Comp1>
+          <p>Paragraph</p>
+        </>
+      );
+    };
+    expect(await renderToMarkdownString(<Comp2 />)).toMatchInlineSnapshot(`
+      "# Header 1 
+
+      Paragraph
+
+      "
+    `);
+    expect(await renderToMarkdownString(<Comp3 />)).toMatchInlineSnapshot(`
+      "# Header 1 children text
+
+      Paragraph
+
+      "
+    `);
+  });
+
+  it('renders markdown string', async () => {
+    const context = createContext({ a: 1 });
+    const Comp = () => {
+      const value = useContext(context);
+      return (
+        <div>
+          <p>{value.a}</p>
+        </div>
+      );
+    };
+    expect(
+      await renderToMarkdownString(
+        <context.Provider value={{ a: 2 }}>
+          <div>
+            <h2>Title</h2>
+            <p>Paragraph</p>
+            <Comp />
+          </div>
+        </context.Provider>,
+      ),
+    ).toMatchInlineSnapshot(`
+      "## Title
+
+      Paragraph
+
+      2
+
+      "
+    `);
+  });
+
+  it('useEffect and useLayoutEffect', async () => {
+    const Comp1 = ({ children }: { children?: ReactNode }) => {
+      const [mounted, setMounted] = useState(false);
+      useEffect(() => {
+        setMounted(true);
+        window.location.assign('about:blank');
+      }, []);
+      return (
+        <>
+          {mounted ? (
+            <h1>
+              Header {mounted} {children}
+            </h1>
+          ) : null}
+        </>
+      );
+    };
+
+    const Comp2 = ({ children }: { children?: ReactNode }) => {
+      const [mounted, setMounted] = useState(false);
+      useLayoutEffect(() => {
+        setMounted(true);
+        window.location.assign('about:blank');
+      }, []);
+      return (
+        <>
+          {mounted ? (
+            <h1>
+              Header {mounted} {children}
+            </h1>
+          ) : null}
+        </>
+      );
+    };
+
+    const Comp3 = () => {
+      return (
+        <>
+          <Comp1 />
+          <p>Paragraph</p>
+        </>
+      );
+    };
+
+    const Comp4 = () => {
+      return (
+        <>
+          <Comp2 />
+          <p>Paragraph</p>
+        </>
+      );
+    };
+    expect(await renderToMarkdownString(<Comp3 />)).toMatchInlineSnapshot(`
+      "Paragraph
+
+      "
+    `);
+    // SSR behavior: useLayoutEffect also does NOT run
+    expect(await renderToMarkdownString(<Comp4 />)).toMatchInlineSnapshot(`
+      "Paragraph
+
+      "
+    `);
+  });
+
+  it('componentDidMount', async () => {
+    class Base extends React.Component {
+      state: Readonly<{ mounted: boolean }> = { mounted: false };
+      render(): ReactNode {
+        return <div>Base {this.state.mounted}</div>;
+      }
+      componentDidMount(): void {
+        window.location.assign('about:blank');
+        this.setState({ mounted: true });
+      }
+    }
+
+    expect(await renderToMarkdownString(<Base />)).toMatchInlineSnapshot(
+      `"Base "`,
+    );
+  });
+
+  it('text-indent of code', async () => {
+    function _createMdxContent() {
+      return (
+        <>
+          <>{'# Code Example\\n'}</>
+          {'\n'}
+          <>
+            {
+              // biome-ignore lint/suspicious/noTemplateCurlyInString: special case of ansi
+              '```tsx\n"console.log(\'Hello, world!\');\nfunction greet(name: string) {\n  return `Hello, \${name}!`;\n}"\n```\n'
+            }
+          </>
+        </>
+      );
+    }
+
+    expect(
+      await renderToMarkdownString(_createMdxContent()),
+    ).toMatchInlineSnapshot(`
+        "# Code Example\\n
+        \`\`\`tsx
+        "console.log('Hello, world!');
+        function greet(name: string) {
+          return \`Hello, \${name}!\`;
+        }"
+        \`\`\`
+        "
+      `);
+  });
+});
+
+describe('renderToMarkdownString - styles', () => {
+  it('renders two row correctly', async () => {
+    const Comp1 = () => {
+      return (
+        <>
+          <div>Row 1</div>
+          <div>Row 2</div>
+        </>
+      );
+    };
+
+    expect(await renderToMarkdownString(<Comp1 />)).toMatchInlineSnapshot(
+      `"Row 1Row 2"`,
+    );
+  });
+});
diff --git a/packages/core/src/node/ssg-md/react/render.ts b/packages/core/src/node/ssg-md/react/render.ts
new file mode 100644
index 000000000..a37bdfc32
--- /dev/null
+++ b/packages/core/src/node/ssg-md/react/render.ts
@@ -0,0 +1,144 @@
+import { MarkdownNode, reconciler, TextNode } from './reconciler.js';
+
+// Convert node tree to Markdown string
+function toMarkdown(root: MarkdownNode): string {
+  const { type, props, children } = root;
+
+  // Get children's Markdown
+  const childrenMd = children
+    .map(child => {
+      if (child instanceof TextNode) {
+        return child.text;
+      }
+      return toMarkdown(child);
+    })
+    .join('');
+
+  // Generate corresponding Markdown based on element type
+  switch (type) {
+    case 'root':
+      return childrenMd;
+    case 'h1':
+      return `# ${childrenMd}\n\n`;
+    case 'h2':
+      return `## ${childrenMd}\n\n`;
+    case 'h3':
+      return `### ${childrenMd}\n\n`;
+    case 'h4':
+      return `#### ${childrenMd}\n\n`;
+    case 'h5':
+      return `##### ${childrenMd}\n\n`;
+    case 'h6':
+      return `###### ${childrenMd}\n\n`;
+    case 'p':
+      return `${childrenMd}\n\n`;
+    case 'strong':
+    case 'b':
+      return `**${childrenMd}**`;
+    case 'em':
+    case 'i':
+      return `*${childrenMd}*`;
+    case 'code':
+      return `\`${childrenMd}\``;
+    case 'pre': {
+      const language = props.lang || props.language || '';
+      return `\`\`\`${language}\n${childrenMd}\n\`\`\`\n\n`;
+    }
+    case 'a':
+      return `[${childrenMd}](${props.href || '#'})`;
+    case 'img':
+      return `![${props.alt || ''}](${props.src || ''})`;
+    case 'ul':
+      return `${childrenMd}\n`;
+    case 'ol':
+      return `${childrenMd}\n`;
+    case 'li': {
+      const isOrdered = root.parent && root.parent.type === 'ol';
+      const prefix = isOrdered ? '1. ' : '- ';
+      return `${prefix}${childrenMd}\n`;
+    }
+    case 'blockquote':
+      return `> ${childrenMd.split('\n').join('\n> ')}\n\n`;
+    case 'br':
+      return '\n';
+    case 'hr':
+      return '---\n\n';
+    case 'table':
+      return `${childrenMd}\n`;
+    case 'thead':
+      return childrenMd;
+    case 'tbody':
+      return childrenMd;
+    case 'tr': {
+      const cells = children
+        .filter((child): child is MarkdownNode => child instanceof MarkdownNode)
+        .map(cell => toMarkdown(cell).trim());
+
+      // If it's a header row, add separator
+      if (root.parent && root.parent.type === 'thead') {
+        const separator = `|${cells.map(() => ' --- ').join('|')}|\n`;
+        return `| ${cells.join(' | ')} |\n${separator}`;
+      }
+
+      return `| ${cells.join(' | ')} |\n`;
+    }
+    case 'th':
+    case 'td':
+      return childrenMd;
+    case 'div':
+    case 'span':
+    case 'section':
+    case 'article':
+    case 'main':
+    case 'aside':
+    case 'header':
+    case 'footer':
+    case 'nav':
+    default:
+      return childrenMd;
+  }
+}
+
+// Render function (SSR-like behavior: neither useEffect nor useLayoutEffect run)
+export async function renderToMarkdownString(
+  element: React.ReactElement,
+): Promise<string> {
+  const container = new MarkdownNode('root');
+
+  const root = reconciler.createContainer(
+    container,
+    1, // tag (LegacyRoot = 0)
+    null, // hydrationCallbacks
+    false, // isStrictMode
+    false, // concurrentUpdatesByDefaultOverride
+    '', // identifierPrefix
+    (...args) => {
+      if (process.env.DEBUG) {
+        console.log('Reconciler Error:', ...args);
+      }
+    }, // onUncaughtError
+    () => {}, // onCaughtError
+    (...args) => {
+      if (process.env.DEBUG) {
+        console.log('Reconciler onRecoverable Error:', ...args);
+      }
+    }, // onRecoverableError
+    () => {}, // transitionCallbacks
+    null, // onPostPaintCallback
+  );
+
+  // Set up a promise that resolves when commit completes
+  let resolveCommit: ((arg: string) => void) | null = null;
+  const commitPromise = new Promise<string>(resolve => {
+    resolveCommit = resolve;
+  });
+
+  reconciler.updateContainer(element, root, null, () => {
+    // This callback is called after commit
+    if (resolveCommit) {
+      resolveCommit(toMarkdown(container));
+    }
+  });
+
+  return commitPromise;
+}
diff --git a/packages/core/src/node/ssg-md/remarkSplitMdx.test.ts b/packages/core/src/node/ssg-md/remarkSplitMdx.test.ts
new file mode 100644
index 000000000..4c2f3c25f
--- /dev/null
+++ b/packages/core/src/node/ssg-md/remarkSplitMdx.test.ts
@@ -0,0 +1,515 @@
+import { compile } from '@mdx-js/mdx';
+import { describe, expect, it } from 'vitest';
+import { remarkSplitMdx } from './remarkSplitMdx';
+
+/**
+ * Process MDX with custom remark plugin
+ */
+export async function processMdx(source: string): Promise<string> {
+  // Compile MDX with our custom remark plugin
+  const result = await compile(source, {
+    remarkPlugins: [remarkSplitMdx],
+    jsx: true,
+  });
+
+  // Get the compiled code - this is the original MDX output
+  const code = String(result);
+
+  return code;
+}
+
+describe('mdx-to-md-loader', () => {
+  it('should transform MDX with import and JSX component to template literal', async () => {
+    const input = `# title
+
+import Foo from '@components'
+
+<Foo />`;
+
+    const result = await processMdx(input);
+
+    expect(result).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import Foo from '@components';
+      function _createMdxContent(props) {
+        return <>{"# title\\n"}{"\\n"}{"\\n"}<Foo /></>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should handle MDX with props', async () => {
+    const input = `# Hello World
+
+import Button from '@components/Button'
+
+<Button type="primary" disabled={true}>Click me</Button>`;
+
+    const result = await processMdx(input);
+
+    expect(result).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import Button from '@components/Button';
+      function _createMdxContent(props) {
+        return <>{"# Hello World\\n"}{"\\n"}{"\\n"}<Button type="primary" disabled={true}>{"Click me"}</Button></>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should handle multiple components', async () => {
+    const input = `# Documentation
+
+import Foo from '@components/Foo'
+import Bar from '@components/Bar'
+
+Some text here.
+
+<Foo />
+
+More content.
+
+<Bar prop="value" />`;
+
+    const result = await processMdx(input);
+
+    expect(result).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import Foo from '@components/Foo';
+      import Bar from '@components/Bar';
+      function _createMdxContent(props) {
+        return <>{"# Documentation\\n"}{"\\n"}{"\\n"}{"Some text here.\\n"}{"\\n"}<Foo />{"\\n"}{"More content.\\n"}{"\\n"}<Bar prop="value" /></>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should handle codeblock', async () => {
+    const input = `# Code Example
+    
+\`\`\`tsx
+console.log('Hello, world!');
+function greet(name: string) {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+`;
+    const result = await processMdx(input);
+    expect(result).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      function _createMdxContent(props) {
+        return <>{"# Code Example\\n"}{"\\n"}{"\`\`\`tsx\\nconsole.log('Hello, world!');\\nfunction greet(name: string) {\\n  return \`Hello, \${name}!\`;\\n}\\n\`\`\`\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should handle self-closing and non-self-closing components', async () => {
+    const input = `
+# title
+
+import Card from '@components'
+
+<Card>Content inside</Card>
+
+Content outside
+
+<Card>
+
+\`\`\`tsx
+console.log('Hello, world!');
+\`\`\`
+</Card>
+
+\`\`\`tsx
+console.log('Hello, world!');
+\`\`\`
+`;
+
+    const result = await processMdx(input);
+
+    expect(result).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import Card from '@components';
+      function _createMdxContent(props) {
+        const _components = {
+          code: "code",
+          pre: "pre",
+          ...props.components
+        };
+        return <>{"# title\\n"}{"\\n"}{"\\n"}<Card>{"Content inside"}</Card>{"\\n"}{"Content outside\\n"}{"\\n"}<Card><_components.pre><_components.code className="language-tsx">{"console.log('Hello, world!');\\n"}</_components.code></_components.pre></Card>{"\\n"}{"\`\`\`tsx\\nconsole.log('Hello, world!');\\n\`\`\`\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should handle MDX with image', async () => {
+    const input = `# Image Example
+
+import Img from '@components/Image'
+
+import Svg from '@assets/image.svg'
+
+Here is an image:
+
+<Img src="/path/to/image.jpg" alt="An image" />
+
+<img src={Svg} alt="An SVG image" />
+
+End of content.`;
+
+    const result = await processMdx(input);
+    expect(result).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import Img from '@components/Image';
+      import Svg from '@assets/image.svg';
+      function _createMdxContent(props) {
+        return <>{"# Image Example\\n"}{"\\n"}{"\\n"}{"\\n"}{"Here is an image:\\n"}{"\\n"}<Img src="/path/to/image.jpg" alt="An image" />{"\\n"}<img src={Svg} alt="An SVG image" />{"\\n"}{"End of content.\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+});
+
+describe('remarkWrapMarkdown with filters', () => {
+  it('should filter imports by rule - includes only @lynx', async () => {
+    const input = `import { Table } from '@lynx';
+import Button from 'react';
+
+<Table />
+<Button>Click</Button>`;
+
+    const result = await compile(input, {
+      remarkPlugins: [
+        [
+          remarkSplitMdx,
+          {
+            includes: [[['Table'], '@lynx']],
+          },
+        ],
+      ],
+      jsx: true,
+    });
+
+    const code = String(result);
+    expect(code).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import {Table} from '@lynx';
+      import Button from 'react';
+      function _createMdxContent(props) {
+        return <><Table />{"\\n"}{"<Button>\\n  Click\\n</Button>\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should filter imports by multiple specifiers', async () => {
+    const input = `import { Table, Card } from '@lynx';
+import Button from 'react';
+
+<Table />
+<Card />
+<Button>Click</Button>`;
+
+    const result = await compile(input, {
+      remarkPlugins: [
+        [
+          remarkSplitMdx,
+          {
+            includes: [
+              [['Table', 'Button'], '@lynx'],
+              [['Button'], 'react'],
+            ],
+          },
+        ],
+      ],
+      jsx: true,
+    });
+
+    const code = String(result);
+    expect(code).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import {Table, Card} from '@lynx';
+      import Button from 'react';
+      function _createMdxContent(props) {
+        return <><Table />{"\\n"}{"<Card />\\n"}{"\\n"}<Button>{"Click"}</Button></>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should filter imports by source - excludes react', async () => {
+    const input = `import { Table } from '@lynx';
+import Button from 'react';
+
+<Table />
+<Button>Click</Button>`;
+
+    const result = await compile(input, {
+      remarkPlugins: [
+        [
+          remarkSplitMdx,
+          {
+            excludes: [[['Button'], 'react']],
+          },
+        ],
+      ],
+      jsx: true,
+    });
+
+    const code = String(result);
+    expect(code).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import {Table} from '@lynx';
+      import Button from 'react';
+      function _createMdxContent(props) {
+        return <><Table />{"\\n"}{"<Button>\\n  Click\\n</Button>\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should filter imports by multiple specifiers in exclude', async () => {
+    const input = `import { Table, Card } from '@lynx';
+
+<Table />
+<Card />`;
+
+    const result = await compile(input, {
+      remarkPlugins: [
+        [
+          remarkSplitMdx,
+          {
+            excludes: [[['Card'], '@lynx']],
+          },
+        ],
+      ],
+      jsx: true,
+    });
+
+    const code = String(result);
+    expect(code).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import {Table, Card} from '@lynx';
+      function _createMdxContent(props) {
+        return <><Table />{"\\n"}{"<Card />\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should handle import aliases correctly', async () => {
+    const input = `import { Table as Tab } from '@lynx';
+
+<Tab />`;
+
+    const result = await compile(input, {
+      remarkPlugins: [
+        [
+          remarkSplitMdx,
+          {
+            includes: [
+              [['Table'], '@lynx'], // Match the local name (alias)
+            ],
+          },
+        ],
+      ],
+      jsx: true,
+    });
+
+    const code = String(result);
+    expect(code).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import {Table as Tab} from '@lynx';
+      function _createMdxContent(props) {
+        return <>{"<Tab />\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should handle combined includes and excludes - excludes takes precedence', async () => {
+    const input = `import { Table, Card } from '@lynx';
+import Button from 'react';
+
+<Table />
+<Card />
+<Button>Click</Button>`;
+
+    const result = await compile(input, {
+      remarkPlugins: [
+        [
+          remarkSplitMdx,
+          {
+            includes: [[['Table', 'Card'], '@lynx']],
+            excludes: [[['Card'], '@lynx']],
+          },
+        ],
+      ],
+      jsx: true,
+    });
+
+    const code = String(result);
+    expect(code).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import {Table, Card} from '@lynx';
+      import Button from 'react';
+      function _createMdxContent(props) {
+        return <><Table />{"\\n"}{"<Card />\\n"}{"\\n"}{"<Button>\\n  Click\\n</Button>\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should support multiple include rules', async () => {
+    const input = `import { Table } from '@lynx';
+import { Button } from 'antd';
+import Card from 'react';
+
+<Table />
+<Button />
+<Card />`;
+
+    const result = await compile(input, {
+      remarkPlugins: [
+        [
+          remarkSplitMdx,
+          {
+            includes: [
+              [['Table'], '@lynx'],
+              [['Button'], 'antd'],
+            ],
+          },
+        ],
+      ],
+      jsx: true,
+    });
+
+    const code = String(result);
+    expect(code).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import {Table} from '@lynx';
+      import {Button} from 'antd';
+      import Card from 'react';
+      function _createMdxContent(props) {
+        return <><Table />{"\\n"}<Button />{"\\n"}{"<Card />\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should handle heading with inline JSX component', async () => {
+    const input = `import Foo from '@components'
+
+# title <Foo />
+
+# title [link](./link)
+
+# title [link](./link) <Foo />
+
+Some text here.`;
+
+    const result = await processMdx(input);
+
+    expect(result).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import Foo from '@components';
+      function _createMdxContent(props) {
+        return <><>{"# title "}<Foo /></>{"\\n"}{"# title [link](./link)\\n"}{"\\n"}<>{"# title [link](./link)\\n "}<Foo /></>{"\\n"}{"Some text here.\\n"}</>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+
+  it('should handle paragraph with multiple inline JSX components', async () => {
+    const input = `import { Button, Link } from '@components'
+
+This is a <Button>click me</Button> and <Link href="/test">link</Link> example.`;
+
+    const result = await processMdx(input);
+
+    expect(result).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic*/
+      /*@jsxImportSource react*/
+      import {Button, Link} from '@components';
+      function _createMdxContent(props) {
+        return <><>{"This is a "}<Button>{"click me"}</Button>{" and "}<Link href="/test">{"link"}</Link>{" example."}</></>;
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = props.components || ({});
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      "
+    `);
+  });
+});
diff --git a/packages/core/src/node/ssg-md/remarkSplitMdx.ts b/packages/core/src/node/ssg-md/remarkSplitMdx.ts
new file mode 100644
index 000000000..fda4c0c04
--- /dev/null
+++ b/packages/core/src/node/ssg-md/remarkSplitMdx.ts
@@ -0,0 +1,431 @@
+import type { Root, RootContent } from 'mdast';
+import type {
+  MdxFlowExpression,
+  MdxJsxFlowElement,
+  MdxJsxTextElement,
+  MdxTextExpression,
+} from 'mdast-util-mdx';
+import remarkGfm from 'remark-gfm';
+import remarkMdx from 'remark-mdx';
+import remarkStringify from 'remark-stringify';
+import { unified } from 'unified';
+
+/**
+ * Filter rule format: [specifiers, source]
+ * - specifiers: Array of component/function names to match
+ * - source: Import source to match
+ *
+ * Example: [['Table', 'Button'], '@lynx']
+ * Matches: import { Table, Button } from '@lynx'
+ */
+export type FilterRule = [string[], string];
+
+export interface RemarkSplitMdxOptions {
+  /**
+   * Include rules for filtering imports and JSX elements
+   * Format: [[specifiers, source], ...]
+   *
+   * @example
+   * includes: [
+   *   [['Table', 'Button'], '@lynx'],
+   *   [['Card'], 'antd']
+   * ]
+   */
+  includes?: FilterRule[];
+
+  /**
+   * Exclude rules for filtering imports and JSX elements
+   * Takes precedence over includes
+   * Format: [[specifiers, source], ...]
+   *
+   * @example
+   * excludes: [
+   *   [['LegacyTable'], '@lynx']
+   * ]
+   */
+  excludes?: FilterRule[];
+}
+
+/**
+ * Custom remark plugin that wraps markdown content in React Fragment
+ * Only processes top-level markdown nodes, keeps JSX elements and their children intact
+ */
+export function remarkSplitMdx(
+  options: RemarkSplitMdxOptions = {},
+): (tree: Root) => void {
+  return (tree: Root) => {
+    const newChildren: RootContent[] = [];
+    const importMap = buildImportMap(tree);
+
+    for (const node of tree.children) {
+      // Process imports - keep all the import
+      if (node.type === 'mdxjsEsm') {
+        newChildren.push(node);
+        continue;
+      }
+
+      // Process JSX elements - check if they should be kept based on import filters
+      if (
+        node.type === 'mdxJsxFlowElement' ||
+        node.type === 'mdxJsxTextElement'
+      ) {
+        const componentName = (node as any).name;
+        const shouldKeep = shouldKeepJsxElement(
+          componentName,
+          importMap,
+          options,
+        );
+
+        if (shouldKeep) {
+          newChildren.push(node);
+        } else {
+          // Convert to markdown text if not kept
+          newChildren.push(buildMdxFlowExpressionFragment(node));
+        }
+        continue;
+      }
+
+      // For any other markdown node (heading, paragraph, blockquote, list, code, etc.)
+      // Check if it has JSX children that need to be extracted
+      const hasJsxChildren = (node as any).children?.some(
+        (child: any) =>
+          child.type === 'mdxJsxFlowElement' ||
+          child.type === 'mdxJsxTextElement',
+      );
+
+      if (hasJsxChildren) {
+        // Process mixed content nodes (e.g., heading with JSX)
+        const processedChildren = processMixedContent(
+          node,
+          (node as any).children || [],
+          importMap,
+          options,
+        );
+
+        newChildren.push({
+          type: 'mdxJsxFlowElement',
+          name: null, // Fragment
+          attributes: [],
+          // @ts-expect-error mdxJsxFlowElement children type
+          children: processedChildren,
+        });
+      } else {
+        // Pure markdown node - serialize to text
+        const fragment = buildMdxFlowExpressionFragment(node);
+        newChildren.push(fragment);
+      }
+    }
+
+    tree.children = newChildren as any;
+  };
+}
+
+/**
+ * Process mixed content that contains both markdown and JSX elements
+ * Returns an array of children suitable for a Fragment
+ */
+function processMixedContent(
+  parentNode: RootContent,
+  children: RootContent[],
+  importMap: Map<string, string>,
+  options: RemarkSplitMdxOptions,
+): (
+  | MdxJsxFlowElement
+  | MdxJsxTextElement
+  | MdxFlowExpression
+  | MdxTextExpression
+)[] {
+  const result: (
+    | MdxJsxFlowElement
+    | MdxJsxTextElement
+    | MdxFlowExpression
+    | MdxTextExpression
+  )[] = [];
+  let textBuffer: string[] = [];
+
+  // Get markdown prefix for certain node types (e.g., heading)
+  const getPrefix = () => {
+    if (parentNode.type === 'heading') {
+      const depth = parentNode.depth || 1;
+      return `${'#'.repeat(depth)} `;
+    }
+    return '';
+  };
+
+  const prefix = getPrefix();
+  let prefixAdded = false;
+
+  const flushTextBuffer = () => {
+    if (textBuffer.length > 0) {
+      let combined = textBuffer.join('');
+
+      // Add prefix to the first text chunk if not yet added
+      if (!prefixAdded && prefix) {
+        combined = prefix + combined;
+        prefixAdded = true;
+      }
+
+      // Only add if there's actual content
+      if (combined) {
+        const stringified = JSON.stringify(combined);
+        result.push({
+          type: 'mdxTextExpression',
+          value: stringified,
+          data: {
+            estree: {
+              type: 'Program',
+              body: [
+                {
+                  type: 'ExpressionStatement',
+                  expression: {
+                    type: 'Literal',
+                    value: combined,
+                    raw: stringified,
+                  },
+                },
+              ],
+              sourceType: 'module',
+            },
+          },
+        });
+      }
+      textBuffer = [];
+    } else if (!prefixAdded && prefix) {
+      // If textBuffer is empty but we haven't added prefix yet,
+      // we still need to add the prefix (e.g., when first child is JSX)
+      const trimmedPrefix = prefix.trimEnd();
+      const stringified = JSON.stringify(trimmedPrefix);
+      result.push({
+        type: 'mdxTextExpression',
+        value: stringified,
+        data: {
+          estree: {
+            type: 'Program',
+            body: [
+              {
+                type: 'ExpressionStatement',
+                expression: {
+                  type: 'Literal',
+                  value: trimmedPrefix,
+                  raw: stringified,
+                },
+              },
+            ],
+            sourceType: 'module',
+          },
+        },
+      });
+      prefixAdded = true;
+    }
+  };
+
+  for (const child of children) {
+    if (
+      child.type === 'mdxJsxFlowElement' ||
+      child.type === 'mdxJsxTextElement'
+    ) {
+      // Flush any accumulated text before the JSX element
+      flushTextBuffer();
+
+      const componentName = child.name;
+      const shouldKeep = shouldKeepJsxElement(
+        componentName,
+        importMap,
+        options,
+      );
+
+      if (shouldKeep) {
+        result.push(child);
+      } else {
+        // Convert excluded JSX to text
+        const fragment = buildMdxFlowExpressionFragment(child);
+        result.push(fragment);
+      }
+    } else if (child.type === 'text') {
+      // Accumulate text node value directly
+      textBuffer.push(child.value || '');
+    } else {
+      // For other inline elements (strong, em, code, etc.), serialize and accumulate
+      const serialized = serializeNodeToMarkdown(child);
+      if (serialized) {
+        textBuffer.push(serialized);
+      }
+    }
+  }
+
+  // Flush any remaining text
+  flushTextBuffer();
+
+  return result;
+}
+
+/**
+ * Convert a markdown node to an MDX Fragment containing a Flow Expression
+ * @example
+ * input
+ *
+ * ```mdx
+ * # Heading
+ * Some **bold** text.
+ * ```
+ *
+ * output
+ *
+ * ```jsx
+ * <>{"# Heading\nSome **bold** text."}</>
+ * ```
+ */
+function buildMdxFlowExpressionFragment(node: RootContent): MdxFlowExpression {
+  const textContent = serializeNodeToMarkdown(node);
+  // <>{"string"}</>
+  const stringified = JSON.stringify(textContent);
+
+  const fragment: MdxFlowExpression = {
+    type: 'mdxFlowExpression',
+    value: stringified,
+    data: {
+      estree: {
+        type: 'Program',
+        body: [
+          {
+            type: 'ExpressionStatement',
+            expression: {
+              type: 'Literal',
+              value: textContent,
+              raw: stringified,
+            },
+          },
+        ],
+        sourceType: 'module',
+      },
+    },
+  };
+
+  return fragment;
+}
+
+// Use unified with remark-stringify to convert the node back to markdown
+const processor = unified().use(remarkMdx).use(remarkGfm).use(remarkStringify, {
+  bullet: '-',
+  emphasis: '_',
+  fences: true,
+  incrementListMarker: true,
+});
+
+/**
+ * Serialize a markdown node back to its markdown text representation
+ * Uses remark-stringify for proper serialization of all node types
+ */
+function serializeNodeToMarkdown(node: RootContent): string {
+  // Create a temporary root node containing only this node
+  const tempRoot: Root = {
+    type: 'root',
+    children: [node],
+  };
+
+  const result = processor.stringify(tempRoot);
+
+  return result;
+}
+
+/**
+ * Build a map of component names to their import sources
+ * Example: { Table: '@lynx', Button: 'react' }
+ */
+function buildImportMap(tree: Root): Map<string, string> {
+  const importMap = new Map<string, string>();
+
+  for (const node of tree.children) {
+    if (node.type === 'mdxjsEsm' && (node as any).data?.estree) {
+      const estree = (node as any).data.estree;
+
+      for (const statement of estree.body) {
+        if (statement.type === 'ImportDeclaration') {
+          const source = statement.source.value;
+
+          for (const specifier of statement.specifiers) {
+            let localName: string | null = null;
+
+            if (specifier.type === 'ImportDefaultSpecifier') {
+              // import Table from '@lynx'
+              localName = specifier.local.name;
+            } else if (specifier.type === 'ImportSpecifier') {
+              // import { Table as Tab } from '@lynx'
+              localName = specifier.local.name;
+            } else if (specifier.type === 'ImportNamespaceSpecifier') {
+              // import * as Lynx from '@lynx'
+              localName = specifier.local.name;
+            }
+
+            if (localName) {
+              importMap.set(localName, source);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return importMap;
+}
+
+/**
+ * Check if a JSX element should be kept based on its component name and import filters
+ */
+function shouldKeepJsxElement(
+  componentName: string | null,
+  importMap: Map<string, string>,
+  options: RemarkSplitMdxOptions,
+): boolean {
+  if (!componentName) {
+    return true; // Keep fragments and elements without names
+  }
+
+  const { includes, excludes } = options;
+
+  // If no filters specified, keep all JSX elements, includes all
+  if (!includes && !excludes) {
+    return true;
+  }
+
+  const importSource = importMap.get(componentName);
+
+  if (importSource?.endsWith('.mdx')) {
+    // Mdx Fragments should always be kept
+    return true;
+  }
+
+  // Check excludes first (takes precedence)
+  if (excludes) {
+    for (const [excludeSpecifiers, excludeSource] of excludes) {
+      // If component name matches and source matches (if component was imported)
+      if (excludeSpecifiers.includes(componentName)) {
+        if (!importSource || importSource === excludeSource) {
+          return false;
+        }
+      }
+    }
+  }
+
+  // Check includes
+  if (includes) {
+    let matchesAnyRule = false;
+
+    for (const [includeSpecifiers, includeSource] of includes) {
+      // If component name matches and source matches (if component was imported)
+      if (includeSpecifiers.includes(componentName)) {
+        if (!importSource || importSource === includeSource) {
+          matchesAnyRule = true;
+          break;
+        }
+      }
+    }
+
+    // If includes are specified but nothing matches, exclude
+    if (!matchesAnyRule) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/packages/core/src/node/ssg-md/renderPage.ts b/packages/core/src/node/ssg-md/renderPage.ts
new file mode 100644
index 000000000..d65a1c12c
--- /dev/null
+++ b/packages/core/src/node/ssg-md/renderPage.ts
@@ -0,0 +1,48 @@
+import { pathToFileURL } from 'node:url';
+import type { Route, RouteMeta } from '@rspress/shared';
+import { logger } from '@rspress/shared/logger';
+import { createHead, type Unhead } from '@unhead/react/server';
+import picocolors from 'picocolors';
+
+import { hintSSGFailed } from '../logger/hint';
+
+interface MdSSRBundleExports {
+  render: (pagePath: string, head: Unhead) => Promise<{ appMd: string }>;
+  routes: Route[];
+}
+
+export async function renderPage(route: RouteMeta, ssrBundlePath: string) {
+  let render: MdSSRBundleExports['render'];
+  try {
+    const { default: ssrExports } = await import(
+      pathToFileURL(ssrBundlePath).toString()
+    );
+    render = await ssrExports.render;
+  } catch (e) {
+    if (e instanceof Error) {
+      logger.error(
+        `Failed to load SSG bundle: ${picocolors.yellow(ssrBundlePath)}: ${e.message}`,
+      );
+      logger.debug(e);
+      hintSSGFailed();
+    }
+    throw e;
+  }
+  const head = createHead();
+  const { routePath } = route;
+  let appMd = '';
+  if (render) {
+    try {
+      ({ appMd } = await render(routePath, head));
+    } catch (e) {
+      if (e instanceof Error) {
+        logger.error(
+          `Page "${picocolors.yellow(routePath)}" SSG-MD rendering failed.\n    ${picocolors.gray(e.toString())}`,
+        );
+        throw e;
+      }
+    }
+  }
+
+  return appMd;
+}
diff --git a/packages/core/src/node/ssg-md/renderPages.ts b/packages/core/src/node/ssg-md/renderPages.ts
new file mode 100644
index 000000000..1d22654f6
--- /dev/null
+++ b/packages/core/src/node/ssg-md/renderPages.ts
@@ -0,0 +1,44 @@
+import { logger } from '@rspress/shared/logger';
+import pMap from 'p-map';
+import picocolors from 'picocolors';
+import type { RouteService } from '../route/RouteService';
+import { SSGConcurrency } from '../ssg/ssgEnv';
+import { renderPage } from './renderPage';
+
+const routePage2MdFilename = (routePath: string) => {
+  let fileName = routePath;
+  if (fileName.endsWith('/')) {
+    fileName = `${routePath}index.md`;
+  } else {
+    fileName = `${routePath}.md`;
+  }
+
+  return fileName.replace(/^\/+/, '');
+};
+
+export async function renderPages(
+  routeService: RouteService,
+  ssrBundlePath: string,
+  emitAsset: (assetName: string, content: string | Buffer) => void,
+): Promise<Map<string, string>> {
+  logger.info('Rendering md pages...');
+  const startTime = Date.now();
+  const result = new Map<string, string>();
+
+  const routes = routeService.getRoutes();
+  await pMap(
+    routes,
+    async route => {
+      const html = await renderPage(route, ssrBundlePath);
+      const fileName = routePage2MdFilename(route.routePath);
+      emitAsset(fileName, html);
+      result.set(route.routePath, html);
+    },
+    {
+      concurrency: SSGConcurrency(),
+    },
+  );
+  const totalTime = Date.now() - startTime;
+  logger.success(`Markdown rendered in ${picocolors.yellow(totalTime)} ms.`);
+  return result;
+}
diff --git a/packages/core/src/node/ssg-md/rsbuildPluginSSGMD.ts b/packages/core/src/node/ssg-md/rsbuildPluginSSGMD.ts
new file mode 100644
index 000000000..2c8546de5
--- /dev/null
+++ b/packages/core/src/node/ssg-md/rsbuildPluginSSGMD.ts
@@ -0,0 +1,85 @@
+import { mkdir, rm, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import type { RsbuildPlugin } from '@rsbuild/core';
+import { isDebugMode, type UserConfig } from '@rspress/shared';
+import {
+  NODE_SSG_MD_BUNDLE_FOLDER,
+  NODE_SSG_MD_BUNDLE_NAME,
+} from '../constants';
+import type { RouteService } from '../route/RouteService';
+import { emitLlmsTxt } from './llms/emitLlmsTxt';
+import { renderPages } from './renderPages';
+
+export const rsbuildPluginSSGMD = ({
+  routeService,
+  config,
+}: {
+  routeService: RouteService;
+  config: UserConfig;
+}): RsbuildPlugin => ({
+  name: 'rspress-inner-rsbuild-plugin-ssg',
+  async setup(api) {
+    api.onBeforeBuild(() => {
+      let hasError: boolean = false;
+
+      api.processAssets(
+        { stage: 'optimize-transfer', environments: ['node_md'] },
+        async ({ assets, compilation, environment, compiler }) => {
+          if (compilation.errors.length > 0) {
+            hasError = true;
+            return;
+          }
+
+          // If user has encountered a compile time error at the web/node output, user needs to first debug the error in this stage.
+          // we will not do ssg for better debugging
+          if (hasError) {
+            return;
+          }
+
+          const emitAsset = (
+            assetName: string,
+            content: string | Buffer,
+          ): void => {
+            compilation.emitAsset(
+              assetName,
+              new compiler.webpack.sources.RawSource(content),
+            );
+          };
+
+          const distPath = environment.distPath;
+          const ssgFolderPath = join(distPath, NODE_SSG_MD_BUNDLE_FOLDER);
+          const mainCjsAbsolutePath = join(
+            ssgFolderPath,
+            NODE_SSG_MD_BUNDLE_NAME,
+          );
+
+          await mkdir(ssgFolderPath, { recursive: true });
+          await Promise.all(
+            Object.entries(assets).map(async ([assetName, assetSource]) => {
+              if (assetName.startsWith(`${NODE_SSG_MD_BUNDLE_FOLDER}/`)) {
+                const fileAbsolutePath = join(distPath, assetName);
+                await writeFile(
+                  fileAbsolutePath,
+                  assetSource.source().toString(),
+                );
+                compilation.deleteAsset(assetName);
+              }
+            }),
+          );
+
+          const mdContents = await renderPages(
+            routeService,
+            mainCjsAbsolutePath,
+            emitAsset,
+          );
+
+          await emitLlmsTxt(config, routeService, emitAsset, mdContents);
+
+          if (!isDebugMode()) {
+            await rm(ssgFolderPath, { recursive: true });
+          }
+        },
+      );
+    });
+  },
+});
diff --git a/packages/core/src/runtime/App.tsx b/packages/core/src/runtime/App.tsx
index ea1c8e011..c04f616fa 100644
--- a/packages/core/src/runtime/App.tsx
+++ b/packages/core/src/runtime/App.tsx
@@ -1,4 +1,4 @@
-import { PageContext, useLocation } from '@rspress/core/runtime';
+import { Content, PageContext, useLocation } from '@rspress/core/runtime';
 import { Layout } from '@theme';
 import React, { useContext, useLayoutEffect } from 'react';
 import globalComponents from 'virtual-global-components';
@@ -38,6 +38,10 @@ export function App() {
     frontmatter[GLOBAL_COMPONENTS_KEY] === false ||
     query.get(GLOBAL_COMPONENTS_KEY) === QueryStatus.Hide;
 
+  if (process.env.__SSR_MD__) {
+    return <Content />;
+  }
+
   return (
     <>
       <Layout />
diff --git a/packages/core/src/runtime/ssrMdServerEntry.tsx b/packages/core/src/runtime/ssrMdServerEntry.tsx
new file mode 100644
index 000000000..b8b798406
--- /dev/null
+++ b/packages/core/src/runtime/ssrMdServerEntry.tsx
@@ -0,0 +1,50 @@
+// biome-ignore lint/suspicious/noTsIgnore: bundleless
+// @ts-ignore
+import { renderToMarkdownString } from '@rspress/core/_private/react';
+import {
+  PageContext,
+  pathnameToRouteService,
+  removeTrailingSlash,
+  ThemeContext,
+  withBase,
+} from '@rspress/runtime';
+import { StaticRouter } from '@rspress/runtime/server';
+import { type Unhead, UnheadProvider } from '@unhead/react/server';
+import { App } from './App';
+import { initPageData } from './initPageData';
+
+const DEFAULT_THEME = 'light';
+
+async function preloadRoute(pathname: string) {
+  const route = pathnameToRouteService(pathname);
+  await route?.preload();
+}
+
+export async function render(
+  routePath: string,
+  head: Unhead,
+): Promise<{ appMd: string }> {
+  const initialPageData = await initPageData(routePath);
+  await preloadRoute(routePath);
+
+  const appMd = await renderToMarkdownString(
+    <ThemeContext.Provider value={{ theme: DEFAULT_THEME }}>
+      <PageContext.Provider value={{ data: initialPageData }}>
+        <StaticRouter
+          location={withBase(routePath)}
+          basename={removeTrailingSlash(withBase('/'))}
+        >
+          <UnheadProvider value={head}>
+            <App />
+          </UnheadProvider>
+        </StaticRouter>
+      </PageContext.Provider>
+    </ThemeContext.Provider>,
+  );
+
+  return {
+    appMd,
+  };
+}
+
+export { routes } from 'virtual-routes';
diff --git a/packages/core/src/theme/components/CodeBlock/index.scss b/packages/core/src/theme/components/CodeBlock/index.scss
index 1db5da02b..c0df7103a 100644
--- a/packages/core/src/theme/components/CodeBlock/index.scss
+++ b/packages/core/src/theme/components/CodeBlock/index.scss
@@ -4,13 +4,9 @@
   border: var(--rp-code-block-border);
   overflow-x: auto;
   transition: none;
-
-  @media (min-width: 641px) {
-    border-radius: var(--rp-radius);
-  }
+  border-radius: var(--rp-radius);
 
   @media (max-width: 640px) {
-    border-radius: var(--rp-radius-small);
     margin: 24px 0;
     contain: content;
   }
diff --git a/packages/core/src/theme/components/HomeBackground/index.scss b/packages/core/src/theme/components/HomeBackground/index.scss
index 4eb650e4a..a832bc9a9 100644
--- a/packages/core/src/theme/components/HomeBackground/index.scss
+++ b/packages/core/src/theme/components/HomeBackground/index.scss
@@ -2,7 +2,6 @@
   width: 100%;
   height: 1000px;
   position: absolute;
-  // top: calc(-1 * var(--rp-nav-height));
   top: 0;
   left: 0;
 
@@ -11,23 +10,7 @@
 
   pointer-events: none;
   user-select: none;
-  background:
-    radial-gradient(
-      42.12% 56.13% at 100% 0%,
-      rgba(83, 125, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0) 100%
-    ),
-    radial-gradient(
-      42.01% 79.63% at 52.86% 0%,
-      rgba(83, 125, 255, 0.2) 0%,
-      rgba(255, 255, 255, 0) 100%
-    ),
-    radial-gradient(
-      79.67% 58.09% at 0% 0%,
-      rgba(126, 105, 255, 0.2) 0%,
-      rgba(255, 255, 255, 0) 100%
-    ),
-    #fff;
+  background: var(--rp-home-background-bg);
 }
 
 .rp-dark .rp-home-background {
diff --git a/packages/core/src/theme/components/HomeFeature/index.scss b/packages/core/src/theme/components/HomeFeature/index.scss
index 06e6f2681..5e6531025 100644
--- a/packages/core/src/theme/components/HomeFeature/index.scss
+++ b/packages/core/src/theme/components/HomeFeature/index.scss
@@ -6,9 +6,11 @@
   flex-wrap: wrap;
   max-width: 72rem;
   gap: var(--rp-home-feature-gap);
+  padding: 10px;
 
   &__item {
     width: 100%;
+    position: relative;
 
     &--span-2,
     &--span-4,
@@ -52,6 +54,7 @@
   }
 
   &__item-wrapper {
+    position: relative;
     height: 100%;
   }
 
@@ -61,6 +64,7 @@
     border-radius: 2rem;
     border: 1px solid var(--rp-c-divider-light);
     background: var(--rp-home-feature-bg);
+    // fill: var(--rp-home-feature-bg-fill);
     backdrop-filter: blur(10px);
     transition: all 0.3s;
 
diff --git a/packages/core/src/theme/components/HomeFeature/index.tsx b/packages/core/src/theme/components/HomeFeature/index.tsx
index 5e4648ce7..19f2a2019 100644
--- a/packages/core/src/theme/components/HomeFeature/index.tsx
+++ b/packages/core/src/theme/components/HomeFeature/index.tsx
@@ -4,6 +4,7 @@ import type { JSX } from 'react';
 import { renderHtmlOrText } from '../../logic/utils';
 import { useNavigate } from '../Link/useNavigate';
 import './index.scss';
+import { useCardAnimation } from './useCardAnimation';
 
 const getGridClass = (feature: Feature): string => {
   const { span } = feature;
@@ -24,17 +25,19 @@ const getGridClass = (feature: Feature): string => {
 };
 
 function HomeFeatureItem({ feature }: { feature: Feature }): JSX.Element {
-  const { icon, title, details, link: rawLink } = feature;
+  const { icon, title, details, link } = feature;
 
-  const link = rawLink;
   const navigate = useNavigate();
+  const { innerProps, outerProps, outerRef, shineDom } = useCardAnimation();
 
   return (
     <div
       key={title}
+      {...outerProps}
       className={`rp-home-feature__item ${getGridClass(feature)}`}
+      ref={outerRef}
     >
-      <div className="rp-home-feature__item-wrapper">
+      <div className="rp-home-feature__item-wrapper" {...innerProps}>
         <article
           key={title}
           className={`rp-home-feature__card ${link ? 'rp-home-feature__card--clickable' : ''}`}
@@ -60,6 +63,7 @@ function HomeFeatureItem({ feature }: { feature: Feature }): JSX.Element {
           ></p>
         </article>
       </div>
+      {shineDom}
     </div>
   );
 }
diff --git a/packages/core/src/theme/components/HomeFeature/useCardAnimation.tsx b/packages/core/src/theme/components/HomeFeature/useCardAnimation.tsx
new file mode 100644
index 000000000..abeb1fd79
--- /dev/null
+++ b/packages/core/src/theme/components/HomeFeature/useCardAnimation.tsx
@@ -0,0 +1,125 @@
+import { type HTMLAttributes, useRef, useState } from 'react';
+
+export const useCardAnimation = () => {
+  const [pageX, setPageX] = useState<null | number>(null);
+  const [pageY, setPageY] = useState<null | number>(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleMove = ({ pageX, pageY }: { pageX: number; pageY: number }) => {
+    setPageX(pageX);
+    setPageY(pageY);
+  };
+
+  const handleTouchMove = (evt: any) => {
+    evt.preventDefault();
+    const { pageX, pageY } = evt.touches[0];
+    handleMove({ pageX, pageY });
+  };
+
+  let shine: string;
+  let shineBg: string;
+  let container: string;
+  let outerContainer: string;
+  const handleEnter = () => {
+    setIsHovering(true);
+  };
+  const handleLeave = () => {
+    setIsHovering(false);
+  };
+
+  const ele = ref.current;
+  if (pageX && pageY && ele && isHovering) {
+    const rootElemWidth = ele.clientWidth || ele.offsetWidth || ele.scrollWidth;
+    const rootElemHeight =
+      ele.clientHeight || ele.offsetHeight || ele.scrollHeight;
+
+    const bodyScrollTop =
+      document.body.scrollTop ||
+      document.getElementsByTagName('html')[0].scrollTop;
+    const bodyScrollLeft = document.body.scrollLeft;
+
+    const offsets = ele.getBoundingClientRect();
+    const wMultiple = 320 / rootElemWidth;
+    const multiple = wMultiple * 0.05;
+    const offsetX =
+      0.52 - (pageX - offsets.left - bodyScrollLeft) / rootElemWidth;
+    const offsetY =
+      0.52 - (pageY - offsets.top - bodyScrollTop) / rootElemHeight;
+    const dy = pageY - offsets.top - bodyScrollTop - rootElemHeight / 2;
+    const dx = pageX - offsets.left - bodyScrollLeft - rootElemWidth / 2;
+    const yRotate = (offsetX - dx) * multiple;
+    const xRotate =
+      (dy - offsetY) * (Math.min(offsets.width / offsets.height, 1) * multiple);
+    const arad = Math.atan2(dy, dx);
+    const rawAngle = (arad * 180) / Math.PI - 90;
+    const angle = rawAngle < 0 ? rawAngle + 360 : rawAngle;
+
+    shine = `translateX(${offsetX - 0.1}px) translateY(${offsetY - 0.1}px)`;
+    shineBg = `linear-gradient(${angle}deg, rgba(255, 255, 255, ${
+      ((pageY - offsets.top - bodyScrollTop) / rootElemHeight) * 0.2
+    }) 0%, rgba(255, 255, 255, 0) 50%)`;
+
+    container = `rotateX(${xRotate}deg) rotateY(${yRotate}deg)`;
+    outerContainer = `perspective(${rootElemWidth * 2}px)`;
+  } else {
+    shine = '';
+    shineBg = '';
+    container = '';
+    outerContainer = '';
+  }
+
+  const outerProps: HTMLAttributes<HTMLDivElement> = {
+    style: {
+      transform: outerContainer,
+      transformStyle: 'preserve-3d',
+    },
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave,
+    onMouseMove: handleMove,
+    onTouchMove: handleTouchMove,
+    onTouchStart: handleEnter,
+    onTouchEnd: handleLeave,
+  };
+  const outerRef = ref;
+
+  const innerProps = {
+    style: {
+      transform: container,
+    },
+  };
+
+  const shineDom = (
+    <div
+      className="rp-home-feature__item__shine"
+      style={{
+        position: 'absolute',
+        userSelect: 'none',
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        right: '0',
+        bottom: '0',
+        borderRadius: '20px',
+        zIndex: '8',
+        ...(shine
+          ? {
+              transform: shine,
+            }
+          : {}),
+        ...(shineBg
+          ? {
+              background: shineBg,
+            }
+          : {}),
+      }}
+    />
+  );
+
+  return {
+    outerProps,
+    outerRef,
+    innerProps,
+    shineDom,
+  };
+};
diff --git a/packages/core/src/theme/components/HomeHero/index.scss b/packages/core/src/theme/components/HomeHero/index.scss
index bb6f4236d..130a353b2 100644
--- a/packages/core/src/theme/components/HomeHero/index.scss
+++ b/packages/core/src/theme/components/HomeHero/index.scss
@@ -67,12 +67,7 @@
       height: 8px;
       margin-right: 8px;
       border-radius: 50%;
-      background: linear-gradient(
-        90deg,
-        var(--rp-c-brand-dark) 0%,
-        var(--rp-c-brand-dark) 30%,
-        #a673ff 100%
-      );
+      background: var(--rp-home-hero-title-bg);
     }
     display: inline-flex;
     align-items: center;
@@ -97,16 +92,11 @@
   }
 
   &__title-brand {
-    background: linear-gradient(
-      90deg,
-      var(--rp-c-brand-dark) 0%,
-      var(--rp-c-brand-dark) 30%,
-      #a673ff 100%
-    );
+    background: var(--rp-home-hero-title-bg);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    color: transparent;
+    color: var(--rp-home-hero-title-color);
     width: 640px;
   }
 
diff --git a/packages/core/src/theme/components/NavScreen/NavScreenLangs.scss b/packages/core/src/theme/components/NavScreen/NavScreenLangs.scss
index f7aff2f6d..2075021e2 100644
--- a/packages/core/src/theme/components/NavScreen/NavScreenLangs.scss
+++ b/packages/core/src/theme/components/NavScreen/NavScreenLangs.scss
@@ -27,23 +27,18 @@
 }
 
 .rp-nav-screen-langs-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-
-  gap: 8px;
   width: 100%;
-  height: 0px;
-  overflow: hidden;
-  transition: height 0.3s ease;
 
-  font-size: 14px;
+  &__inner {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 8px;
+    font-size: 14px;
+  }
 
   &__item {
     padding: 0px 24px;
   }
-
-  &--open {
-    height: auto;
-  }
 }
diff --git a/packages/core/src/theme/components/NavScreen/NavScreenLangs.tsx b/packages/core/src/theme/components/NavScreen/NavScreenLangs.tsx
index 73bd8e22e..13f2bfebb 100644
--- a/packages/core/src/theme/components/NavScreen/NavScreenLangs.tsx
+++ b/packages/core/src/theme/components/NavScreen/NavScreenLangs.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { useLangsMenu } from '../Nav/hooks';
 import './NavScreenLangs.scss';
 import { Link } from '@theme';
-import clsx from 'clsx';
 import { SvgDown } from './NavScreenMenuItem';
 
 export function NavScreenLangs() {
@@ -16,27 +15,29 @@ export function NavScreenLangs() {
         <div className="rp-nav-screen-langs__right">
           {activeValue}
           <SvgDown
-            className={clsx('rp-nav-screen-langs__icon', {
-              'rp-nav-screen-langs__icon--open': isOpen,
-            })}
+            className={`rp-nav-screen-langs__icon ${isOpen ? 'rp-nav-screen-langs__icon--open' : ''}`}
           />
         </div>
       </div>
       <div
-        className={clsx(
-          'rp-nav-screen-langs-group',
-          isOpen && 'rp-nav-screen-langs-group--open',
-        )}
+        className="rp-nav-screen-langs-group"
+        style={{
+          display: 'grid',
+          gridTemplateRows: isOpen ? '1fr' : '0fr',
+          transition: 'grid-template-rows 0.2s ease-out',
+        }}
       >
-        {items.map(item => (
-          <Link
-            key={item.text}
-            href={item.link}
-            className={`rp-nav-screen-langs-group__item`}
-          >
-            {item.text}
-          </Link>
-        ))}
+        <div className="rp-nav-screen-langs-group__inner">
+          {items.map(item => (
+            <Link
+              key={item.text}
+              href={item.link}
+              className={`rp-nav-screen-langs-group__item`}
+            >
+              {item.text}
+            </Link>
+          ))}
+        </div>
       </div>
     </>
   ) : null;
diff --git a/packages/core/src/theme/components/NavScreen/NavScreenMenuItem.scss b/packages/core/src/theme/components/NavScreen/NavScreenMenuItem.scss
index 227993391..3cccb3c53 100644
--- a/packages/core/src/theme/components/NavScreen/NavScreenMenuItem.scss
+++ b/packages/core/src/theme/components/NavScreen/NavScreenMenuItem.scss
@@ -46,24 +46,14 @@
 
   &__group {
     width: 100%;
+  }
 
-    height: 0px;
+  &__group-inner {
     overflow: hidden;
-    transition:
-      height 0.3s ease,
-      opacity 0.3s ease;
-
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2px;
-
     margin-left: 8px;
-    opacity: 0;
-
-    &--open {
-      height: auto;
-      opacity: 1;
-    }
   }
 }
diff --git a/packages/core/src/theme/components/NavScreen/NavScreenMenuItem.tsx b/packages/core/src/theme/components/NavScreen/NavScreenMenuItem.tsx
index 457391d15..f67134397 100644
--- a/packages/core/src/theme/components/NavScreen/NavScreenMenuItem.tsx
+++ b/packages/core/src/theme/components/NavScreen/NavScreenMenuItem.tsx
@@ -114,14 +114,22 @@ export function NavScreenMenuItemWithChildren({
       />
 
       <div
-        className={`rp-nav-screen-menu-item__group ${isOpen ? 'rp-nav-screen-menu-item__group--open' : ''}`}
+        className="rp-nav-screen-menu-item__group"
+        style={{
+          display: 'grid',
+          gridTemplateRows: isOpen ? '1fr' : '0fr',
+          transition: 'grid-template-rows .2s ease-out',
+          width: '100%',
+        }}
       >
-        {menuItem.items.map(item => (
-          <NavScreenMenuItemWithChildren
-            key={item.text}
-            menuItem={item as any}
-          />
-        ))}
+        <div className="rp-nav-screen-menu-item__group-inner">
+          {menuItem.items.map(item => (
+            <NavScreenMenuItemWithChildren
+              key={item.text}
+              menuItem={item as any}
+            />
+          ))}
+        </div>
       </div>
     </>
   ) : (
diff --git a/packages/core/src/theme/components/NavScreen/index.tsx b/packages/core/src/theme/components/NavScreen/index.tsx
index b4362ac13..9e699c3af 100644
--- a/packages/core/src/theme/components/NavScreen/index.tsx
+++ b/packages/core/src/theme/components/NavScreen/index.tsx
@@ -26,9 +26,20 @@ export function NavScreen(props: NavScreenProps) {
   useEffect(() => {
     if (screen.current && isScreenOpen) {
       disableBodyScroll(screen.current, { reserveScrollBarGap: true });
+      const style = `:root { --rp-home-background-bg: transparent; }`;
+      const styleElement = document.createElement('style');
+      styleElement.id = 'rp-nav-screen-body-lock-style';
+      styleElement.innerHTML = style;
+      document.head.appendChild(styleElement);
     }
     return () => {
       clearAllBodyScrollLocks();
+      const styleElement = document.getElementById(
+        'rp-nav-screen-body-lock-style',
+      );
+      if (styleElement) {
+        document.head.removeChild(styleElement);
+      }
     };
   }, [isScreenOpen]);
 
diff --git a/packages/core/src/theme/components/Outline/index.scss b/packages/core/src/theme/components/Outline/index.scss
index 061a0693d..c47cd2201 100644
--- a/packages/core/src/theme/components/Outline/index.scss
+++ b/packages/core/src/theme/components/Outline/index.scss
@@ -1,11 +1,16 @@
+:root {
+  --rp-outline-padding-x: 20px;
+}
+
 .rp-outline {
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--rp-c-divider-light);
-  padding-left: 20px;
-  padding-right: 20px;
 
   &__title {
+    padding-left: var(--rp-outline-padding-x);
+    padding-right: var(--rp-outline-padding-x);
+
     font-size: 14px;
     font-weight: 700;
     height: 32px;
@@ -23,6 +28,9 @@
   }
 
   &__divider {
+    margin-left: var(--rp-outline-padding-x);
+    margin-right: var(--rp-outline-padding-x);
+
     height: 1px;
     background: var(--rp-c-divider-light);
     margin-top: 16px;
@@ -30,6 +38,9 @@
   }
 
   &__toc {
+    padding-left: var(--rp-outline-padding-x);
+    padding-right: var(--rp-outline-padding-x);
+
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -41,4 +52,9 @@
       overflow: auto scroll;
     }
   }
+
+  &__bottom {
+    padding-left: var(--rp-outline-padding-x);
+    padding-right: var(--rp-outline-padding-x);
+  }
 }
diff --git a/packages/core/src/theme/components/PageTabs/index.scss b/packages/core/src/theme/components/PageTabs/index.scss
index 674433773..8ab7a70d9 100644
--- a/packages/core/src/theme/components/PageTabs/index.scss
+++ b/packages/core/src/theme/components/PageTabs/index.scss
@@ -16,16 +16,23 @@
       color: var(--rp-c-text-2);
       border-bottom: 2px solid transparent;
 
-      &--selected {
+      &:hover {
+        border-bottom: 2px solid var(--rp-c-divider-light);
+        color: var(--rp-c-text-1);
+      }
+
+      body[data-page-tabs-active-index='0'] &[data-index='0'],
+      body[data-page-tabs-active-index='1'] &[data-index='1'],
+      body[data-page-tabs-active-index='2'] &[data-index='2'],
+      body[data-page-tabs-active-index='3'] &[data-index='3'],
+      body[data-page-tabs-active-index='4'] &[data-index='4'],
+      body[data-page-tabs-active-index='5'] &[data-index='5'],
+      body[data-page-tabs-active-index='6'] &[data-index='6'],
+      body[data-page-tabs-active-index='7'] &[data-index='7'] {
         font-weight: 700;
         color: var(--rp-c-text-0);
         border-bottom: 2px solid var(--rp-c-brand-dark);
       }
-
-      &--not-selected:hover {
-        border-bottom: 2px solid var(--rp-c-divider-light);
-        color: var(--rp-c-text-1);
-      }
     }
   }
 
@@ -36,10 +43,16 @@
         display: none;
       }
 
-      &--hidden {
-        display: none;
-      }
-      &--active {
+      display: none;
+
+      body[data-page-tabs-active-index='0'] &[data-index='0'],
+      body[data-page-tabs-active-index='1'] &[data-index='1'],
+      body[data-page-tabs-active-index='2'] &[data-index='2'],
+      body[data-page-tabs-active-index='3'] &[data-index='3'],
+      body[data-page-tabs-active-index='4'] &[data-index='4'],
+      body[data-page-tabs-active-index='5'] &[data-index='5'],
+      body[data-page-tabs-active-index='6'] &[data-index='6'],
+      body[data-page-tabs-active-index='7'] &[data-index='7'] {
         display: block;
       }
     }
diff --git a/packages/core/src/theme/components/PageTabs/index.tsx b/packages/core/src/theme/components/PageTabs/index.tsx
index 5a4a7ea62..807fdc2f6 100644
--- a/packages/core/src/theme/components/PageTabs/index.tsx
+++ b/packages/core/src/theme/components/PageTabs/index.tsx
@@ -1,98 +1,90 @@
-import { useLocation, useNavigate } from '@rspress/core/runtime';
+import { useSearchParams } from '@rspress/core/runtime';
 import clsx from 'clsx';
 import {
   Children,
-  type ComponentPropsWithRef,
   type ForwardedRef,
   forwardRef,
   isValidElement,
   type ReactElement,
   type ReactNode,
+  useEffect,
   useMemo,
 } from 'react';
 import './index.scss';
 
-type TabItem = {
-  value?: string;
+type PageTabItem = {
   label?: string | ReactNode;
+  content?: ReactNode;
 };
 
 function getTabValuesFromChildren(
   children: ReactElement<PageTabProps>[],
-): TabItem[] {
-  return Children.map<TabItem, ReactElement<PageTabProps>>(children, child => {
-    if (isValidElement(child)) {
-      return {
-        label: child.props?.label || undefined,
-        value:
-          child.props?.value || (child.props?.label as string) || undefined,
-      };
-    }
+): PageTabItem[] {
+  return Children.map<PageTabItem, ReactElement<PageTabProps>>(
+    children,
+    (child, index) => {
+      if (isValidElement(child)) {
+        return {
+          label: child.props?.label || undefined,
+          content: children[index],
+        } satisfies PageTabItem;
+      }
 
-    return {
-      label: undefined,
-      value: undefined,
-    };
-  });
+      return {
+        label: index,
+        content: children[index],
+      } satisfies PageTabItem;
+    },
+  );
 }
 
 export interface PageTabsProps {
-  values?: ReactNode[] | ReadonlyArray<ReactNode> | TabItem[];
+  values?: ReactNode[] | ReadonlyArray<ReactNode> | PageTabItem[];
   /**
+   * determine the query parameter name for the current tab
    * @default 'page''
    */
   id?: string;
   children: ReactNode;
-  tabContainerClassName?: string;
+  className?: string;
   tabPosition?: 'left' | 'center';
 }
 
-function isTabItem(item: unknown): item is TabItem {
-  if (item && typeof item === 'object' && 'label' in item) {
-    return true;
-  }
-  return false;
-}
-
-const renderTab = (item: ReactNode | TabItem) => {
-  if (isTabItem(item)) {
-    return item.label || item.value;
-  }
-  return item;
-};
-
-function usePageTabs(id: string, rawChildren: ReactNode) {
-  // remove "\n" character when write JSX element in multiple lines, use Children.toArray for Tabs with no Tab element
-  const children = Children.toArray(rawChildren).filter(
-    child => !(typeof child === 'string' && child.trim() === ''),
-  ) as unknown as ReactElement<PageTabProps>[];
-  const navigate = useNavigate();
+function usePageTabs(id: string, children: ReactElement<PageTabProps>[]) {
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const tabValues = useMemo(() => {
     return getTabValuesFromChildren(children);
-  }, [rawChildren]);
-
-  const { search } = useLocation();
+  }, [children]);
 
   function navigateToTab(index: number) {
-    const urlSearchParams = new URLSearchParams(search);
     if (index === 0) {
-      urlSearchParams.delete(id);
+      searchParams.delete(id);
     } else {
-      urlSearchParams.set(id, String(index));
+      searchParams.set(id, String(index));
     }
-    navigate({
-      search: urlSearchParams.toString(),
-    });
+    setSearchParams(searchParams);
   }
 
-  const currentIndex = Number(new URLSearchParams(search).get(id)) || 0;
+  useEffect(() => {
+    const currIndex = Number(searchParams.get(id) ?? '0');
+    if (!Number.isNaN(currIndex)) {
+      document.body.dataset.pageTabsActiveIndex = currIndex.toString();
+    }
+  }, [searchParams]);
+
+  const injectScript = `(function () {
+    var searchParams = new URLSearchParams(window.location.search);
+    var currIndex = Number(searchParams.get('${id}') || 0);
+    if (!Number.isNaN(currIndex)) {
+      document.body.dataset.pageTabsActiveIndex = currIndex;
+    }
+  })();`;
 
   return {
-    children,
-    currentIndex,
     tabValues,
     navigateToTab,
+    injectScript,
   };
 }
 
@@ -103,21 +95,32 @@ export const PageTabs = forwardRef(
     const {
       children: rawChildren,
       tabPosition = 'left',
-      tabContainerClassName,
+      className,
       id = 'page',
     } = props;
 
-    const { children, currentIndex, tabValues, navigateToTab } = usePageTabs(
+    // remove "\n" character when write JSX element in multiple lines, use Children.toArray for Tabs with no Tab element
+    const children = Children.toArray(rawChildren).filter(
+      child =>
+        !(typeof child === 'string' && child.trim() === '') &&
+        isValidElement(child),
+    ) as unknown as ReactElement<PageTabProps>[];
+
+    const { tabValues, navigateToTab, injectScript } = usePageTabs(
       id,
-      rawChildren,
+      children,
     );
 
     renderCountForTocUpdate++;
 
     return (
       <>
-        {/* <script>{`window.addEventLi`}</script> */}
-        <div className={clsx('rp-page-tabs', tabContainerClassName)} ref={ref}>
+        {/* First screen during SSR */}
+        <script
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: injectScript }}
+        />
+        <div className={clsx('rp-page-tabs', className)} ref={ref}>
           {tabValues.length ? (
             <div
               className="rp-page-tabs__label"
@@ -126,44 +129,31 @@ export const PageTabs = forwardRef(
                   tabPosition === 'center' ? 'center' : 'flex-start',
               }}
             >
-              {tabValues.map((item, index) => {
+              {tabValues.map(({ label }, index) => {
                 return (
                   <div
-                    key={index}
-                    className={clsx(
-                      'rp-page-tabs__label__item',
-                      currentIndex === index
-                        ? 'rp-page-tabs__label__item--selected'
-                        : 'rp-page-tabs__label__item--not-selected',
-                    )}
+                    key={typeof label === 'string' ? label : index}
+                    className="rp-page-tabs__label__item"
+                    data-index={index}
                     onClick={() => {
-                      if (item.value) {
-                        navigateToTab(index);
-                      }
+                      navigateToTab(index);
                     }}
                   >
-                    {renderTab(item)}
+                    {label}
                   </div>
                 );
               })}
             </div>
           ) : null}
           <div className="rp-page-tabs__content">
-            {Children.map(children, (child, index) => {
-              const isActive = index === currentIndex;
+            {tabValues.map(({ label, content }, index) => {
               return (
                 <div
-                  className={clsx(
-                    'rp-page-tabs__content__item',
-                    isActive
-                      ? 'rp-page-tabs__content__item--active'
-                      : 'rp-page-tabs__content__item--hidden',
-                  )}
-                  aria-hidden={!isActive}
+                  key={typeof label === 'string' ? label : index}
+                  className="rp-page-tabs__content__item"
                   data-index={index}
-                  key={index}
                 >
-                  {child}
+                  {content}
                 </div>
               );
             })}
@@ -182,8 +172,9 @@ export const PageTabs = forwardRef(
   },
 );
 
-export type PageTabProps = ComponentPropsWithRef<'div'> &
-  Pick<TabItem, 'label' | 'value'>;
+export type PageTabProps = Pick<PageTabItem, 'label'> & {
+  children?: ReactNode;
+};
 
 export function PageTab({ children }: PageTabProps): ReactElement {
   return <>{children}</>;
diff --git a/packages/core/src/theme/components/Search/SearchPanel.scss b/packages/core/src/theme/components/Search/SearchPanel.scss
index c37c8ffb2..92cb38db1 100644
--- a/packages/core/src/theme/components/Search/SearchPanel.scss
+++ b/packages/core/src/theme/components/Search/SearchPanel.scss
@@ -84,7 +84,7 @@
     opacity: 0.8;
   }
 
-  &__tab-container {
+  &__tabs {
     position: sticky;
     background-color: var(--rp-c-bg-soft);
     padding-bottom: 6px;
diff --git a/packages/core/src/theme/components/Search/SearchPanel.tsx b/packages/core/src/theme/components/Search/SearchPanel.tsx
index fb2fba9c1..d130c852d 100644
--- a/packages/core/src/theme/components/Search/SearchPanel.tsx
+++ b/packages/core/src/theme/components/Search/SearchPanel.tsx
@@ -391,7 +391,7 @@ export function SearchPanel({ focused, setFocused }: SearchPanelProps) {
     return (
       <Tabs
         values={tabValues}
-        tabContainerClassName="rp-search-panel__tab-container"
+        className="rp-search-panel__tabs"
         onChange={index => {
           setResultTabIndex(index);
           setCurrentSuggestionIndex(0);
diff --git a/packages/core/src/theme/components/Sidebar/SidebarGroup.scss b/packages/core/src/theme/components/Sidebar/SidebarGroup.scss
index b896ec7f8..f78b90750 100644
--- a/packages/core/src/theme/components/Sidebar/SidebarGroup.scss
+++ b/packages/core/src/theme/components/Sidebar/SidebarGroup.scss
@@ -1,8 +1,3 @@
 .rp-sidebar-group {
   color: var(--rp-c-text-1);
-  font-weight: 400 !important;
-
-  &--top-level {
-    font-weight: 400 !important;
-  }
 }
diff --git a/packages/core/src/theme/components/Sidebar/SidebarGroup.tsx b/packages/core/src/theme/components/Sidebar/SidebarGroup.tsx
index 41889eb60..8eb3086c8 100644
--- a/packages/core/src/theme/components/Sidebar/SidebarGroup.tsx
+++ b/packages/core/src/theme/components/Sidebar/SidebarGroup.tsx
@@ -8,7 +8,6 @@ import { useActiveMatcher } from '@rspress/core/runtime';
 import ArrowRight from '@theme-assets/arrow-right';
 import clsx from 'clsx';
 import type React from 'react';
-import { useCallback, useRef } from 'react';
 import { useNavigate } from '../Link/useNavigate';
 import { SvgWrapper } from '../SvgWrapper';
 import { SidebarDivider } from './SidebarDivider';
@@ -54,58 +53,10 @@ export function SidebarGroup(props: SidebarGroupProps) {
   const activeMatcher = useActiveMatcher();
   const { item, depth, id, setSidebarData, className } = props;
   const navigate = useNavigate();
-  const initialState = useRef('collapsed' in item && item.collapsed);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const containerHeightRef = useRef<number>(item.items.length * 40);
-
-  const transitionRef = useRef<number>(null);
   const active = item.link && activeMatcher(item.link);
   const { collapsed = false, collapsible = true } =
     item as NormalizedSidebarGroup;
 
-  const handleClickCollapsedTransition = useCallback(
-    (collapsed: boolean /*target value */) => {
-      if (transitionRef.current) {
-        clearTimeout(transitionRef.current);
-      }
-
-      const container = containerRef.current;
-
-      if (!container) {
-        return;
-      }
-
-      if (collapsed) {
-        // fold
-        const contentHeight = container.clientHeight;
-        containerHeightRef.current = contentHeight;
-
-        container.style.maxHeight = `${contentHeight}px`;
-        container.style.opacity = '0';
-        container.style.transition = 'all .2s ease-out';
-
-        transitionRef.current = window.setTimeout(() => {
-          if (containerRef.current) {
-            containerRef.current.style.maxHeight = '0px';
-          }
-        }, 200);
-      } else {
-        // unfold
-        const contentHeight = containerHeightRef.current;
-        container.style.transition = 'all .2s ease-in';
-        container.style.maxHeight = `${contentHeight}px`;
-        container.style.opacity = '1';
-
-        transitionRef.current = window.setTimeout(() => {
-          if (containerRef.current) {
-            containerRef.current.style.removeProperty('max-height');
-          }
-        }, 200);
-      }
-    },
-    [],
-  );
-
   const toggleCollapse = (): void => {
     // update collapsed state
     setSidebarData(sidebarData => {
@@ -132,13 +83,7 @@ export function SidebarGroup(props: SidebarGroupProps) {
         tag={item.tag}
         text={item.text}
         context={item.context}
-        className={clsx(
-          'rp-sidebar-group',
-          {
-            'rp-sidebar-group--top-level': depth === 0,
-          },
-          className,
-        )}
+        className={clsx('rp-sidebar-group', className)}
         depth={depth}
         onClick={e => {
           if (!active && item.link && !collapsed) {
@@ -149,55 +94,55 @@ export function SidebarGroup(props: SidebarGroupProps) {
             e.stopPropagation();
             navigate(item.link).then(() => {
               collapsible && toggleCollapse();
-              collapsible && handleClickCollapsedTransition(!collapsed);
             });
             return;
           }
           e.stopPropagation();
           collapsible && toggleCollapse();
-          collapsible && handleClickCollapsedTransition(!collapsed);
         }}
         right={collapsible && <CollapsibleIcon collapsed={collapsed} />}
       />
 
       <div
-        ref={containerRef}
         style={{
-          overflow: 'hidden',
-          maxHeight: initialState.current ? '0px' : undefined,
-          opacity: initialState.current ? 0 : 1,
+          // Expand/collapse by animating grid-template-rows from 0fr to 1fr.
+          display: 'grid',
+          gridTemplateRows: collapsed ? '0fr' : '1fr',
+          transition: 'grid-template-rows 0.2s ease-out',
         }}
       >
-        {item.items?.map((item, index) =>
-          isSidebarGroup(item) ? (
-            <SidebarGroup
-              id={`${id}-${index}`}
-              depth={depth + 1}
-              key={`${id}-${index}`}
-              item={item}
-              setSidebarData={setSidebarData}
-              className="rp-sidebar-item--group-item"
-            />
-          ) : isSidebarDivider(item) ? (
-            <SidebarDivider
-              key={index}
-              depth={depth + 1}
-              dividerType={item.dividerType}
-            />
-          ) : isSidebarSectionHeader(item) ? (
-            <SidebarSectionHeader
-              sectionHeaderText={item.sectionHeaderText}
-              key={index}
-            />
-          ) : (
-            <SidebarItemComp
-              key={index}
-              item={item}
-              depth={depth + 1}
-              className="rp-sidebar-item--group-item"
-            />
-          ),
-        )}
+        <div style={{ overflow: 'hidden' }}>
+          {item.items?.map((item, index) =>
+            isSidebarGroup(item) ? (
+              <SidebarGroup
+                id={`${id}-${index}`}
+                depth={depth + 1}
+                key={`${id}-${index}`}
+                item={item}
+                setSidebarData={setSidebarData}
+                className="rp-sidebar-item--group-item"
+              />
+            ) : isSidebarDivider(item) ? (
+              <SidebarDivider
+                key={index}
+                depth={depth + 1}
+                dividerType={item.dividerType}
+              />
+            ) : isSidebarSectionHeader(item) ? (
+              <SidebarSectionHeader
+                sectionHeaderText={item.sectionHeaderText}
+                key={index}
+              />
+            ) : (
+              <SidebarItemComp
+                key={index}
+                item={item}
+                depth={depth + 1}
+                className="rp-sidebar-item--group-item"
+              />
+            ),
+          )}
+        </div>
       </div>
     </>
   );
diff --git a/packages/core/src/theme/components/Tabs/index.scss b/packages/core/src/theme/components/Tabs/index.scss
index dd4f75194..8fd9879b9 100644
--- a/packages/core/src/theme/components/Tabs/index.scss
+++ b/packages/core/src/theme/components/Tabs/index.scss
@@ -19,8 +19,9 @@
     padding-top: 4px;
     display: flex;
     min-width: 100%;
-    overflow: scroll hidden;
+    flex-wrap: wrap;
     background-color: var(--rp-code-title-bg);
+    border-bottom: var(--rp-code-block-border);
 
     &--no-scrollbar {
       &::-webkit-scrollbar {
@@ -29,44 +30,48 @@
       -ms-overflow-style: none;
       scrollbar-width: none;
     }
-  }
 
-  &__label__item {
-    position: relative;
-    color: var(--rp-c-text-2);
-    border-bottom: 2px solid transparent;
-    box-sizing: border-box;
-    margin-right: 10px;
-    padding: 6px 12px;
-    user-select: none;
-    transition: all 0.2s ease-in-out;
-    cursor: pointer;
+    &__item {
+      word-break: keep-all;
 
-    &:last-child {
-      margin-right: 0;
-    }
+      position: relative;
+      color: var(--rp-c-text-2);
+      border-bottom: 2px solid transparent;
+      box-sizing: border-box;
+      margin-right: 10px;
+      padding: 6px 12px;
+      user-select: none;
+      transition: all 0.2s ease-in-out;
+      cursor: pointer;
 
-    &:after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 5%;
-      width: 90%;
-      height: 1px;
-      background-color: transparent;
-    }
+      &:last-child {
+        margin-right: 0;
+      }
 
-    &--not-selected {
-      &:hover {
-        color: var(--rp-c-text-1);
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 5%;
+        width: 90%;
+        height: 1px;
+        background-color: transparent;
+        transition: background-color 0.3s ease-out;
       }
-    }
 
-    &--selected {
-      color: var(--rp-c-text-1);
+      &--not-selected {
+        &:hover {
+          color: var(--rp-c-text-0);
+          opacity: 0.8;
+        }
+      }
 
-      &:after {
-        background-color: currentColor;
+      &--selected {
+        color: var(--rp-c-text-0);
+
+        &:after {
+          background-color: currentColor;
+        }
       }
     }
   }
diff --git a/packages/core/src/theme/components/Tabs/index.tsx b/packages/core/src/theme/components/Tabs/index.tsx
index bdbf77be7..82b3464fc 100644
--- a/packages/core/src/theme/components/Tabs/index.tsx
+++ b/packages/core/src/theme/components/Tabs/index.tsx
@@ -1,40 +1,91 @@
 import clsx from 'clsx';
 import {
   Children,
-  type ComponentPropsWithRef,
   type ForwardedRef,
   forwardRef,
   isValidElement,
   type ReactElement,
   type ReactNode,
-  useContext,
-  useEffect,
   useMemo,
   useState,
 } from 'react';
-import { TabDataContext } from '../../logic/TabDataContext';
 import { useStorageValue } from '../../logic/useStorageValue';
 import './index.scss';
 
 type TabItem = {
-  value?: string;
   label?: string | ReactNode;
   disabled?: boolean;
+  content?: ReactNode;
 };
 
 interface TabsProps {
   values?: ReactNode[] | ReadonlyArray<ReactNode> | TabItem[];
-  defaultValue?: string;
+  /**
+   * @default 0
+   */
+  defaultIndex?: number;
   onChange?: (index: number) => void;
   children: ReactNode;
+  /**
+   * If set, tabs with the same `groupId` will share the same active tab state via `localStorage`.
+   * @default undefined
+   */
   groupId?: string;
-  tabContainerClassName?: string;
   tabPosition?: 'left' | 'center';
   /**
    * It is very useful during the transition animation and the first screen rendering of Static Site Generation (SSG).
    * @default true
    */
   keepDOM?: boolean;
+
+  className?: string;
+  labelItemClassName?: string;
+  contentItemClassName?: string;
+}
+
+function getTabValuesFromChildren(
+  children: ReactElement<TabProps>[],
+  defaultValues: ReactNode[] | ReadonlyArray<ReactNode> | TabItem[] | undefined,
+): TabItem[] {
+  // 0. only values, values contain label and content
+  // <Tabs values={[{}, {}]}/>
+  if (defaultValues?.every(item => isTabItem(item) && item.content)) {
+    return defaultValues as TabItem[];
+  }
+
+  // 1. values only contain label
+  // <Tabs values={['Tab1', 'Tab2']}><Tab label="Tab1"/></Tab><Tab label="Tab2"/></Tab></Tabs>
+  if (defaultValues && defaultValues.length > 0) {
+    return defaultValues.map((item, index) => {
+      if (isTabItem(item)) {
+        return item;
+      }
+
+      return {
+        label: item,
+        content: children[index],
+      } satisfies TabItem;
+    });
+  }
+
+  // 2. no values
+  // <Tabs><Tab label="Tab1"/></Tab><Tab label="Tab2"/></Tab></Tabs>
+  return Children.map<TabItem, ReactElement<TabProps>>(
+    children,
+    (child, index) => {
+      if (isValidElement(child)) {
+        return {
+          label: child.props?.label || undefined,
+          content: children[index],
+        } satisfies TabItem;
+      }
+
+      return {
+        label: index,
+        content: children[index],
+      } satisfies TabItem;
+    },
+  );
 }
 
 function isTabItem(item: unknown): item is TabItem {
@@ -44,105 +95,44 @@ function isTabItem(item: unknown): item is TabItem {
   return false;
 }
 
-const renderTab = (item: ReactNode | TabItem) => {
-  if (isTabItem(item)) {
-    return item.label || item.value;
-  }
-  return item;
-};
-
-export const groupIdPrefix = 'rspress.tabs.';
+const groupIdPrefix = 'rspress.tabs.';
 
 export const Tabs = forwardRef(
   (props: TabsProps, ref: ForwardedRef<HTMLDivElement>): ReactElement => {
     const {
       values,
-      defaultValue,
+      defaultIndex,
       onChange,
       children: rawChildren,
       groupId,
       tabPosition = 'left',
-      tabContainerClassName,
+      className,
+      labelItemClassName,
+      contentItemClassName,
       keepDOM = true,
     } = props;
     // remove "\n" character when write JSX element in multiple lines, use Children.toArray for Tabs with no Tab element
     const children = Children.toArray(rawChildren).filter(
-      child => !(typeof child === 'string' && child.trim() === ''),
+      child =>
+        !(typeof child === 'string' && child.trim() === '') &&
+        isValidElement(child),
     ) as unknown as ReactElement<TabProps>[];
 
-    let tabValues = values || [];
-
-    if (tabValues.length === 0) {
-      tabValues = Children.map<TabItem, ReactElement<TabProps>>(
-        children,
-        child => {
-          if (isValidElement(child)) {
-            return {
-              label: child.props?.label || undefined,
-              value:
-                child.props?.value ||
-                (child.props?.label as string) ||
-                undefined,
-            };
-          }
-
-          return {
-            label: undefined,
-            value: undefined,
-          };
-        },
-      );
-    }
-
-    const { tabData, setTabData } = useContext(TabDataContext);
-    const [activeIndex, setActiveIndex] = useState(() => {
-      if (defaultValue === undefined) {
-        return 0;
-      }
+    const tabValues: TabItem[] = useMemo(() => {
+      return getTabValuesFromChildren(children, values);
+    }, [values, children]);
 
-      return tabValues.findIndex(item => {
-        if (typeof item === 'string') {
-          return item === defaultValue;
-        }
-        if (item && typeof item === 'object' && 'value' in item) {
-          return item.value === defaultValue;
-        }
-        return false;
-      });
-    });
+    const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0);
 
     const [storageIndex, setStorageIndex] = useStorageValue<string>(
       `${groupIdPrefix}${groupId}`,
       activeIndex.toString(),
     );
 
-    const syncIndex = useMemo(() => {
-      if (groupId) {
-        if (tabData[groupId] !== undefined) {
-          return tabData[groupId];
-        }
-
-        return Number.parseInt(storageIndex, 10);
-      }
-
-      return activeIndex;
-    }, [groupId && tabData[groupId]]);
-
-    // sync when other browser page trigger update
-    useEffect(() => {
-      if (groupId) {
-        const correctIndex = Number.parseInt(storageIndex, 10);
-
-        if (syncIndex !== correctIndex) {
-          setTabData({ ...tabData, [groupId]: correctIndex });
-        }
-      }
-    }, [storageIndex]);
-
-    const currentIndex = groupId ? syncIndex : activeIndex;
+    const currentIndex: number = groupId ? Number(storageIndex) : activeIndex;
 
     return (
-      <div className={clsx('rp-tabs', tabContainerClassName)} ref={ref}>
+      <div className={clsx('rp-tabs', className)} ref={ref}>
         {tabValues.length ? (
           <div
             className="rp-tabs__label rp-tabs__label--no-scrollbar"
@@ -151,34 +141,36 @@ export const Tabs = forwardRef(
                 tabPosition === 'center' ? 'center' : 'flex-start',
             }}
           >
-            {tabValues.map((item, index) => {
+            {tabValues.map(({ label }, index) => {
+              const isActive = index === currentIndex;
               return (
                 <div
-                  key={index}
+                  key={typeof label === 'string' ? label : index}
                   className={clsx(
                     'rp-tabs__label__item',
-                    currentIndex === index
+                    isActive
                       ? 'rp-tabs__label__item--selected'
                       : 'rp-tabs__label__item--not-selected',
+                    labelItemClassName,
                   )}
+                  data-index={index}
                   onClick={() => {
                     onChange?.(index);
                     if (groupId) {
-                      setTabData({ ...tabData, [groupId]: index });
                       setStorageIndex(index.toString());
                     } else {
                       setActiveIndex(index);
                     }
                   }}
                 >
-                  {renderTab(item)}
+                  {label}
                 </div>
               );
             })}
           </div>
         ) : null}
         <div className="rp-tabs__content">
-          {Children.map(children, (child, index) => {
+          {tabValues.map(({ label, content }, index) => {
             const isActive = index === currentIndex;
             if (!keepDOM && !isActive) {
               return null;
@@ -186,17 +178,18 @@ export const Tabs = forwardRef(
 
             return (
               <div
+                key={typeof label === 'string' ? label : index}
                 className={clsx(
                   'rp-tabs__content__item',
                   isActive
                     ? 'rp-tabs__content__item--active'
                     : 'rp-tabs__content__item--hidden',
+                  contentItemClassName,
                 )}
                 aria-hidden={!isActive}
                 data-index={index}
-                key={index}
               >
-                {child}
+                {content}
               </div>
             );
           })}
@@ -206,13 +199,12 @@ export const Tabs = forwardRef(
   },
 );
 
-export type TabProps = ComponentPropsWithRef<'div'> &
-  Pick<TabItem, 'label' | 'value'>;
+Tabs.displayName = 'Tabs';
 
-export function Tab({ children, ...props }: TabProps): ReactElement {
-  return (
-    <div {...props} className="rp-tab">
-      {children}
-    </div>
-  );
+export type TabProps = Pick<TabItem, 'label' | 'disabled'> & {
+  children: ReactNode;
+};
+
+export function Tab({ children }: TabProps): ReactElement {
+  return <>{children}</>;
 }
diff --git a/packages/core/src/theme/components/Toc/TocItem.scss b/packages/core/src/theme/components/Toc/TocItem.scss
index 7e7660167..82f4c8dc7 100644
--- a/packages/core/src/theme/components/Toc/TocItem.scss
+++ b/packages/core/src/theme/components/Toc/TocItem.scss
@@ -26,7 +26,7 @@
       width: 1px;
       background-color: var(--rp-c-brand);
       position: absolute;
-      left: -20px;
+      left: calc(-1 * var(--rp-outline-padding-x));
       top: 0px;
     }
   }
diff --git a/packages/core/src/theme/layout/Layout/index.tsx b/packages/core/src/theme/layout/Layout/index.tsx
index 202210c74..a09adb6e1 100644
--- a/packages/core/src/theme/layout/Layout/index.tsx
+++ b/packages/core/src/theme/layout/Layout/index.tsx
@@ -14,10 +14,9 @@ import {
   Nav,
 } from '@theme';
 import { Head, useHead } from '@unhead/react';
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, useMemo } from 'react';
 import type { NavProps } from '../../components/Nav';
 import { useSetup } from '../../logic/sideEffects';
-import { TabDataContext } from '../../logic/TabDataContext';
 import { useRedirect4FirstVisit } from '../../logic/useRedirect4FirstVisit';
 import type { HomeLayoutProps } from '../HomeLayout';
 
@@ -154,8 +153,6 @@ export function Layout(props: LayoutProps) {
 
   useRedirect4FirstVisit();
 
-  const [tabData, setTabData] = useState({});
-
   // Always show sidebar by default
   // Priority: front matter title > h1 title
   let title = (frontmatter.title as string) ?? articleTitle;
@@ -203,7 +200,7 @@ export function Layout(props: LayoutProps) {
   } = useFrontmatter();
 
   return (
-    <TabDataContext.Provider value={{ tabData, setTabData }}>
+    <>
       <HeadTags
         lang={currentLang}
         title={title}
@@ -227,6 +224,6 @@ export function Layout(props: LayoutProps) {
 
       {getContentLayout()}
       {bottom}
-    </TabDataContext.Provider>
+    </>
   );
 }
diff --git a/packages/core/src/theme/logic/TabDataContext.ts b/packages/core/src/theme/logic/TabDataContext.ts
deleted file mode 100644
index 2be41e808..000000000
--- a/packages/core/src/theme/logic/TabDataContext.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createContext } from 'react';
-
-export interface TabData {
-  [key: string]: number | undefined;
-}
-
-export interface ITabDataContext {
-  tabData: TabData;
-  setTabData: (data: TabData) => void;
-}
-
-export const TabDataContext = createContext<ITabDataContext>({
-  tabData: {},
-  setTabData: () => {},
-});
diff --git a/packages/core/src/theme/logic/useStorageValue.ts b/packages/core/src/theme/logic/useStorageValue.ts
index d2605654a..e40abe1a3 100644
--- a/packages/core/src/theme/logic/useStorageValue.ts
+++ b/packages/core/src/theme/logic/useStorageValue.ts
@@ -1,27 +1,40 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+
+const SYNC_STORAGE_EVENT_NAME = 'RSPRESS_SYNC_STORAGE_EVENT_NAME';
 
 /**
  * Read/update the value in localStorage, and keeping it in sync with other tabs.
  */
 export const useStorageValue = <T>(key: string, defaultValue: T) => {
-  const [value, setValueInternal] = useState<T>(() => {
-    if (typeof window === 'undefined') {
-      return defaultValue;
+  const [value, setValueInternal] = useState<T>(defaultValue);
+  // TODO: support SSR
+  useLayoutEffect(() => {
+    const storedValue = localStorage.getItem(key);
+    if (storedValue != null) {
+      setValueInternal(storedValue as T);
     }
-    return (localStorage.getItem(key) as T) ?? defaultValue;
-  });
+  }, []);
 
   const setValue = useCallback(
     (value: T) => {
-      setValueInternal(prev => {
-        const next = typeof value === 'function' ? value(prev) : value;
-        if (next == null) {
-          localStorage.removeItem(key);
-        } else {
-          localStorage.setItem(key, next);
-        }
-        return next;
-      });
+      const next = value;
+      if (next == null) {
+        localStorage.removeItem(key);
+      } else {
+        localStorage.setItem(key, next.toString());
+      }
+      setValueInternal(next);
+      dispatchEvent(
+        // send custom event to communicate within same page
+        // importantly this should not be a StorageEvent since those cannot
+        // be constructed with a non-built-in storage area
+        new CustomEvent<{ key: string; newValue: T }>(SYNC_STORAGE_EVENT_NAME, {
+          detail: {
+            key,
+            newValue: next,
+          },
+        }),
+      );
     },
     [key],
   );
@@ -38,5 +51,22 @@ export const useStorageValue = <T>(key: string, defaultValue: T) => {
     };
   }, [key, defaultValue]);
 
+  // from same page
+  useEffect(() => {
+    const listener = (e: CustomEvent) => {
+      const { key: eventKey, newValue } = e.detail;
+      if (eventKey === key) {
+        setValueInternal((newValue as T) ?? defaultValue);
+      }
+    };
+    window.addEventListener(SYNC_STORAGE_EVENT_NAME, listener as EventListener);
+    return () => {
+      window.removeEventListener(
+        SYNC_STORAGE_EVENT_NAME,
+        listener as EventListener,
+      );
+    };
+  }, []);
+
   return [value, setValue] as const;
 };
diff --git a/packages/core/src/theme/styles/index.ts b/packages/core/src/theme/styles/index.ts
index 9f9adbc8b..b980ad71e 100644
--- a/packages/core/src/theme/styles/index.ts
+++ b/packages/core/src/theme/styles/index.ts
@@ -4,6 +4,7 @@
 import './vars/brand-vars.css';
 import './vars/shiki-vars.css';
 import './vars/code-vars.css';
+import './vars/home-vars.css';
 import './vars.css';
 
 import './base.css';
diff --git a/packages/core/src/theme/styles/vars.css b/packages/core/src/theme/styles/vars.css
index 6088b6ed6..7f22643c5 100644
--- a/packages/core/src/theme/styles/vars.css
+++ b/packages/core/src/theme/styles/vars.css
@@ -68,30 +68,3 @@
   --rp-shadow-5:
     0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
 }
-
-/* HomeLayout */
-:root {
-  --rp-home-hero-name-color: transparent;
-  --rp-home-hero-name-background: -webkit-linear-gradient(
-    120deg,
-    var(--rp-c-brand) 30%,
-    #42d392
-  );
-  --rp-home-hero-image-background-image: none;
-  --rp-home-hero-image-filter: none;
-  --rp-home-feature-bg: var(--rp-c-bg-soft);
-  --rp-home-mask-background-image: conic-gradient(
-    from 180deg at 50% 50%,
-    var(--rp-c-brand) 0deg,
-    180deg,
-    #42d392 1turn
-  );
-  --rp-home-hero-image-width-sm: 250px;
-  --rp-home-hero-image-width: 375px;
-  --rp-home-hero-text-max-width: 40rem;
-}
-
-.dark {
-  --rp-home-bg: #000;
-  --rp-home-feature-bg: var(--rp-c-bg-soft);
-}
diff --git a/packages/core/src/theme/styles/vars/code-vars.css b/packages/core/src/theme/styles/vars/code-vars.css
index 479ca9cf0..0ea16d165 100644
--- a/packages/core/src/theme/styles/vars/code-vars.css
+++ b/packages/core/src/theme/styles/vars/code-vars.css
@@ -6,7 +6,7 @@ html:not(.rp-dark) {
   --rp-code-block-color: rgb(46, 52, 64);
   --rp-code-block-bg: var(--rp-c-bg);
 
-  --rp-code-block-border: 1px solid #e5e6eb;
+  --rp-code-block-border: 1px solid var(--rp-c-divider-light);
 }
 
 /* Dark Mode */
@@ -17,5 +17,5 @@ html.rp-dark {
   --rp-code-block-color: rgb(229, 231, 235);
   --rp-code-block-bg: var(--rp-c-bg);
 
-  --rp-code-block-border: 1px solid #242424;
+  --rp-code-block-border: 1px solid var(--rp-c-divider-light);
 }
diff --git a/packages/core/src/theme/styles/vars/home-vars.css b/packages/core/src/theme/styles/vars/home-vars.css
new file mode 100644
index 000000000..0b70dacc9
--- /dev/null
+++ b/packages/core/src/theme/styles/vars/home-vars.css
@@ -0,0 +1,37 @@
+/* HomeLayout */
+:root {
+  /* HomeHero */
+  --rp-home-hero-title-color: transparent;
+  --rp-home-hero-title-bg: linear-gradient(
+    90deg,
+    var(--rp-c-brand-dark) 0%,
+    var(--rp-c-brand-dark) 30%,
+    #a673ff 100%
+  );
+
+  /* HomeBackground */
+  --rp-home-background-bg:
+    radial-gradient(
+      42.12% 56.13% at 100% 0%,
+      rgba(83, 125, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    radial-gradient(
+      42.01% 79.63% at 52.86% 0%,
+      rgba(83, 125, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    radial-gradient(
+      79.67% 58.09% at 0% 0%,
+      rgba(126, 105, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #fff;
+
+  /* HomeFeature */
+  --rp-home-feature-bg: linear-gradient(135deg, #fff, #f9f9f980);
+}
+
+html.dark {
+  --rp-home-feature-bg: linear-gradient(135deg, #ffffff00, #ffffff08);
+}
diff --git a/packages/plugin-twoslash/src/index.ts b/packages/plugin-twoslash/src/index.ts
index d66fffde9..f64de487c 100644
--- a/packages/plugin-twoslash/src/index.ts
+++ b/packages/plugin-twoslash/src/index.ts
@@ -110,13 +110,18 @@ export interface PluginTwoslashOptions {
    * @default true
    */
   explicitTrigger?: boolean;
+  /**
+   * Cache the TypeScript language servers based on compiler options when calling `createTwoslasher`
+   * @default true
+   */
+  cache?: boolean;
 }
 
 /**
  * Plugin to applies Twoslash transformations to code blocks.
  */
 export function pluginTwoslash(options?: PluginTwoslashOptions): RspressPlugin {
-  const { explicitTrigger = true } = options || {};
+  const { explicitTrigger = true, cache = true } = options || {};
 
   return {
     name: '@rspress/plugin-twoslash',
@@ -131,6 +136,7 @@ export function pluginTwoslash(options?: PluginTwoslashOptions): RspressPlugin {
       config.markdown.shiki.transformers.push(
         transformerTwoslash({
           explicitTrigger,
+          cache,
           onShikiError: onError,
           onTwoslashError: onError,
           rendererRich: {
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index 75308b79c..4cbde1229 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -21,6 +21,44 @@ export interface Route {
   lang: string;
 }
 
+// #region RemarkSplitMdxOptions
+/**
+ * Filter rule format: [specifiers, source]
+ * - specifiers: Array of component/function names to match
+ * - source: Import source to match
+ *
+ * Example: [['Table', 'Button'], '@lynx']
+ * Matches: import { Table, Button } from '@lynx'
+ */
+type FilterRule = [string[], string];
+
+interface RemarkSplitMdxOptions {
+  /**
+   * Include rules for filtering imports and JSX elements
+   * Format: [[specifiers, source], ...]
+   *
+   * @example
+   * includes: [
+   *   [['Table', 'Button'], '@lynx'],
+   *   [['Card'], 'antd']
+   * ]
+   */
+  includes?: FilterRule[];
+
+  /**
+   * Exclude rules for filtering imports and JSX elements
+   * Takes precedence over includes
+   * Format: [[specifiers, source], ...]
+   *
+   * @example
+   * excludes: [
+   *   [['LegacyTable'], '@lynx']
+   * ]
+   */
+  excludes?: FilterRule[];
+}
+// #endregion
+
 export interface RouteMeta {
   routePath: string;
   absolutePath: string;
@@ -168,6 +206,20 @@ export interface UserConfig<ThemeConfig = DefaultThemeConfig> {
          */
         experimentalExcludeRoutePaths?: (string | RegExp)[];
       };
+
+  /**
+   * Whether to enable llms and ssg-md
+   * @default false
+   * @experimental
+   */
+  llms?:
+    | boolean
+    | {
+        /**
+         * @experimental
+         */
+        remarkSplitMdxOptions?: RemarkSplitMdxOptions;
+      };
   /**
    * Whether to enable medium-zoom
    * @default true
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6fa23fc95..1e3b6d22e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -857,6 +857,9 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      mdast-util-mdx:
+        specifier: ^3.0.0
+        version: 3.0.0
       mdast-util-mdxjs-esm:
         specifier: ^2.0.1
         version: 2.0.1
@@ -878,6 +881,9 @@ importers:
       react-lazy-with-preload:
         specifier: ^2.2.1
         version: 2.2.1
+      react-reconciler:
+        specifier: 0.33.0
+        version: 0.33.0(react@19.2.0)
       react-router-dom:
         specifier: ^6.30.1
         version: 6.30.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -890,6 +896,9 @@ importers:
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
+      remark-mdx:
+        specifier: ^3.1.1
+        version: 3.1.1
       scroll-into-view-if-needed:
         specifier: ^3.1.0
         version: 3.1.0
@@ -954,6 +963,9 @@ importers:
       '@types/react-dom':
         specifier: ^19.2.2
         version: 19.2.2(@types/react@19.2.2)
+      '@types/react-reconciler':
+        specifier: ^0.32.1
+        version: 0.32.2(@types/react@19.2.2)
       '@types/web':
         specifier: ^0.0.288
         version: 0.0.288
@@ -981,9 +993,6 @@ importers:
       remark-directive:
         specifier: ^4.0.0
         version: 4.0.0
-      remark-mdx:
-        specifier: ^3.1.1
-        version: 3.1.1
       remark-parse:
         specifier: ^11.0.0
         version: 11.0.0
@@ -1636,6 +1645,9 @@ importers:
       '@rsbuild/plugin-sass':
         specifier: ~1.4.0
         version: 1.4.0(@rsbuild/core@1.6.0)
+      '@rsdoctor/rspack-plugin':
+        specifier: 1.3.7
+        version: 1.3.7(@rsbuild/core@1.6.0)(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
       '@rspress/core':
         specifier: workspace:*
         version: link:../packages/core
@@ -1840,6 +1852,10 @@ packages:
     resolution: {integrity: sha512-Hb4o6h1Pf6yRUAX07DR4JVY7dmQw+RVQMW5/m55GoiAT/VRoKCWBtIUPPOnqDVhbx1Cjfil9b6EDrgJsUAujEQ==}
     engines: {node: '>= 10'}
 
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -2986,6 +3002,14 @@ packages:
     peerDependencies:
       '@rsbuild/core': 1.x
 
+  '@rsbuild/plugin-check-syntax@1.5.0':
+    resolution: {integrity: sha512-/JutNle3wI67q/WOYcneyjUSAjZDJIycfpoJ04PWFh+qQ68Pwg4/Be1kU7GiVVklMwmEScoCd9S+gXWk+27YSg==}
+    peerDependencies:
+      '@rsbuild/core': 1.x
+    peerDependenciesMeta:
+      '@rsbuild/core':
+        optional: true
+
   '@rsbuild/plugin-react@1.4.1':
     resolution: {integrity: sha512-kahvnfRPQTsG0tReR6h0KuVfyjKJfpv/PoU5qW5SDkON7vmbGn8Jx7l3fI+yU3lR/7qDiAO19QnNjkqxPsFT3Q==}
     peerDependencies:
@@ -3011,6 +3035,40 @@ packages:
     peerDependencies:
       '@rsbuild/core': 1.x
 
+  '@rsdoctor/client@1.3.7':
+    resolution: {integrity: sha512-QShY2wwf5vetuLdN0jhRvga/Y7iru8shD4orFeCzVxFqZEz16SHjah78FWzR/fNTOUq6St4EOOqwWyNMPQ8jCw==}
+
+  '@rsdoctor/core@1.3.7':
+    resolution: {integrity: sha512-0SE3WgDbus6Rz59w44osZg5SSELCCUDkS52eo/vuFx1GhDu5wCi2E6CLRbP7k8fWaL9Y4FdOv/6JCIf1SN4dQw==}
+
+  '@rsdoctor/graph@1.3.7':
+    resolution: {integrity: sha512-d6geM8e2exsptSnPO8yFFzxxGPLaDzN4Pxore+dOhH4ByjWPbG/HGLa9JWAVC6ibyaQLRK0PXnwcUHTt5ruDSA==}
+
+  '@rsdoctor/rspack-plugin@1.3.7':
+    resolution: {integrity: sha512-3XvX8epEI/n6dMjBv0JmoTT5cXZi8FwUvfuVSs97ug+80mCx4EoO8pAIQcD0gK5c0AhYK2hwptTpGoClSCsCJw==}
+    peerDependencies:
+      '@rspack/core': '*'
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+
+  '@rsdoctor/sdk@1.3.7':
+    resolution: {integrity: sha512-6pVZxB3n5rj/opG4Sn/sVdFpEhjCDh1cxgOGDM+XsoBKEsSTn1h9NOxhQCV8bgkVSNcF6KHVkUh/oonPGX5MCA==}
+
+  '@rsdoctor/types@1.3.7':
+    resolution: {integrity: sha512-5mfosyP0yvJCbBYKTM0WyxfmCQInW2W/AIH3t3PtsAHZEmGf4UuRPHOdZF+4JRZD/yJ30ByoBm3Uq78hjxePyw==}
+    peerDependencies:
+      '@rspack/core': '*'
+      webpack: 5.x
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+
+  '@rsdoctor/utils@1.3.7':
+    resolution: {integrity: sha512-dQqNO2hfrhrBa1FncP3d8pHRmTZdJk349Ucb4oiMkG+Zxl8ykdfnMi9bXny7di/kzruehQvEsazNhT8dWWqz6w==}
+
   '@rslib/core@0.16.1':
     resolution: {integrity: sha512-KhZwWO4kcP4PPdBH2aAgg/A6FYapbDh2rhsxo8dqOOPWCjDFU3QKAYPieKg+k4IrRQlye8AWOXo2rbyF4FC01g==}
     engines: {node: '>=18.12.0'}
@@ -3286,6 +3344,9 @@ packages:
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
     engines: {node: '>=18'}
 
+  '@socket.io/component-emitter@3.1.2':
+    resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
+
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
@@ -3409,6 +3470,12 @@ packages:
   '@types/body-scroll-lock@3.1.2':
     resolution: {integrity: sha512-ELhtuphE/YbhEcpBf/rIV9Tl3/O0A0gpCVD+oYFSS8bWstHFJUgA4nNw1ZakVlRC38XaQEIsBogUZKWIPBvpfQ==}
 
+  '@types/connect@3.4.38':
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+
+  '@types/cors@2.8.19':
+    resolution: {integrity: sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==}
+
   '@types/cross-spawn@6.0.6':
     resolution: {integrity: sha512-fXRhhUkG4H3TQk5dBhQ7m/JDdSNHKwR2BBia62lhwEIq9xGiQKLxd6LymNhn47SjXhsUEPmxi+PKw2OkW4LLjA==}
 
@@ -3486,12 +3553,20 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.0
 
+  '@types/react-reconciler@0.32.2':
+    resolution: {integrity: sha512-gjcm6O0aUknhYaogEl8t5pecPfiOTD8VQkbjOhgbZas/E6qGY+veW9iuJU/7p4Y1E0EuQ0mArga7VEOUWSlVRA==}
+    peerDependencies:
+      '@types/react': '*'
+
   '@types/react@19.2.2':
     resolution: {integrity: sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==}
 
   '@types/supports-color@8.1.1':
     resolution: {integrity: sha512-dPWnWsf+kzIG140B8z2w3fr5D03TLWbOAFQl45xUpI3vcizeXriNR5VYkWZ+WTMsUHqZ9Xlt3hrxGNANFyNQfw==}
 
+  '@types/tapable@2.2.7':
+    resolution: {integrity: sha512-D6QzACV9vNX3r8HQQNTOnpG+Bv1rko+yEA82wKs3O9CQ5+XW7HI7TED17/UE7+5dIxyxZIWTxKbsBeF6uKFCwA==}
+
   '@types/unist@2.0.7':
     resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==}
 
@@ -3649,6 +3724,15 @@ packages:
     resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
     hasBin: true
 
+  accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+
+  acorn-import-attributes@1.9.5:
+    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
+    peerDependencies:
+      acorn: ^8
+
   acorn-import-phases@1.0.4:
     resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
     engines: {node: '>=10.13.0'}
@@ -3812,6 +3896,10 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
+  base64id@2.0.0:
+    resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==}
+    engines: {node: ^4.5.0 || >= 5.9}
+
   baseline-browser-mapping@2.8.20:
     resolution: {integrity: sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==}
     hasBin: true
@@ -3846,6 +3934,12 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
+  browserslist-load-config@1.0.1:
+    resolution: {integrity: sha512-orLR5HAoQugQNVUXUwNd+GAAwl3H64KLIwoMFBNW0AbMSqX2Lxs4ZV2/5UoNrVQlQqF9ygychiu7Svr/99bLtg==}
+
+  browserslist-to-es-version@1.2.0:
+    resolution: {integrity: sha512-wZpJM7QUP33yPzWDzMLgTFZzb3WC6f7G13gnJ5p8PlFz3Xm9MUwArRh9jgE0y4/Sqo6CKtsNxyGpVf5zLWgAhg==}
+
   browserslist@4.24.0:
     resolution: {integrity: sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -4041,6 +4135,10 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
   copy-to-clipboard@3.3.3:
     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
 
@@ -4050,6 +4148,10 @@ packages:
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+
   cosmiconfig@8.3.6:
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
@@ -4146,6 +4248,15 @@ packages:
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
+  debug@4.3.7:
+    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -4158,6 +4269,10 @@ packages:
   decode-named-character-reference@1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
 
+  deep-eql@4.1.4:
+    resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==}
+    engines: {node: '>=6'}
+
   deep-eql@5.0.2:
     resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
     engines: {node: '>=6'}
@@ -4241,6 +4356,9 @@ packages:
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
 
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dot-case@3.0.4:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
 
@@ -4284,6 +4402,18 @@ packages:
   end-of-stream@1.4.4:
     resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
 
+  engine.io-parser@5.2.3:
+    resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
+    engines: {node: '>=10.0.0'}
+
+  engine.io@6.6.4:
+    resolution: {integrity: sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==}
+    engines: {node: '>=10.2.0'}
+
+  enhanced-resolve@5.12.0:
+    resolution: {integrity: sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==}
+    engines: {node: '>=10.13.0'}
+
   enhanced-resolve@5.18.3:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
@@ -4300,10 +4430,19 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   env-paths@3.0.0:
     resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  envinfo@7.19.0:
+    resolution: {integrity: sha512-DoSM9VyG6O3vqBf+p3Gjgr/Q52HYBBtO3v+4koAxt1MnWr+zEnxE+nke/yXS4lt2P4SYCHQ4V3f1i88LQVOpAw==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   environment@1.1.0:
     resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
     engines: {node: '>=18'}
@@ -4333,6 +4472,9 @@ packages:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
+  es-toolkit@1.41.0:
+    resolution: {integrity: sha512-bDd3oRmbVgqZCJS6WmeQieOrzpl3URcWBUVDXxOELlUW2FuW+0glPOz1n0KnRie+PdyvUZcXz2sOn00c6pPRIA==}
+
   esast-util-from-estree@2.0.0:
     resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
 
@@ -4472,6 +4614,10 @@ packages:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
 
+  filesize@10.1.6:
+    resolution: {integrity: sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==}
+    engines: {node: '>= 10.4.0'}
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -4794,6 +4940,9 @@ packages:
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
+  htmlparser2@10.0.0:
+    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
+
   htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
@@ -5033,6 +5182,9 @@ packages:
   json-schema@0.4.0:
     resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
 
+  json-stream-stringify@3.0.1:
+    resolution: {integrity: sha512-vuxs3G1ocFDiAQ/SX0okcZbtqXwgj1g71qE9+vrjJ2EkjKQlEFDAcUNRxRU8O+GekV4v5cM2qXP0Wyt/EMDBiQ==}
+
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -5072,6 +5224,10 @@ packages:
     resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  lines-and-columns@2.0.4:
+    resolution: {integrity: sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   lint-staged@15.5.2:
     resolution: {integrity: sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==}
     engines: {node: '>=18.12.0'}
@@ -5562,6 +5718,10 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
@@ -5729,6 +5889,9 @@ packages:
   parseley@0.12.1:
     resolution: {integrity: sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -5951,6 +6114,12 @@ packages:
       '@types/react': '>=18'
       react: '>=18'
 
+  react-reconciler@0.33.0:
+    resolution: {integrity: sha512-KetWRytFv1epdpJc3J4G75I4WrplZE5jOL7Yq0p34+OVOKF4Se7WrdIdVC45XsSSmUTlht2FM/fM1FZb1mfQeA==}
+    engines: {node: '>=0.10.0'}
+    peerDependencies:
+      react: ^19.2.0
+
   react-refresh@0.17.0:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
@@ -6182,6 +6351,9 @@ packages:
       '@rsbuild/core':
         optional: true
 
+  rslog@1.3.0:
+    resolution: {integrity: sha512-93DpwwaiRrLz7fJ5z6Uwb171hHBws1VVsWjU6IruLFX63BicLA44QNu0sfn3guKHnBHZMFSKO8akfx5QhjuegQ==}
+
   rspack-plugin-virtual-module@1.0.1:
     resolution: {integrity: sha512-NQJ3fXa1v0WayvfHMWbyqLUA3JIqgCkhIcIOnZscuisinxorQyIAo+bqcU5pCusMKSyPqVIWO3caQyl0s9VDAg==}
 
@@ -6451,6 +6623,17 @@ packages:
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
+  socket.io-adapter@2.5.5:
+    resolution: {integrity: sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==}
+
+  socket.io-parser@4.2.4:
+    resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
+    engines: {node: '>=10.0.0'}
+
+  socket.io@4.8.1:
+    resolution: {integrity: sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==}
+    engines: {node: '>=10.2.0'}
+
   solid-js@1.9.10:
     resolution: {integrity: sha512-Coz956cos/EPDlhs6+jsdTxKuJDPT7B5SVIWgABwROyxjY7Xbr8wkzD68Et+NxnV7DLJ3nJdAC2r9InuV/4Jew==}
 
@@ -6482,6 +6665,10 @@ packages:
     resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
     engines: {node: '>= 8'}
 
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
@@ -6626,6 +6813,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tapable@2.2.3:
+    resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
+    engines: {node: '>=6'}
+
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
@@ -6765,6 +6956,10 @@ packages:
     peerDependencies:
       typescript: ^5.5.0
 
+  type-detect@4.1.0:
+    resolution: {integrity: sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==}
+    engines: {node: '>=4'}
+
   type-fest@2.19.0:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
@@ -6912,6 +7107,10 @@ packages:
   varint@6.0.0:
     resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
 
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
   vfile-location@4.1.0:
     resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==}
 
@@ -7082,6 +7281,18 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  ws@8.17.1:
+    resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   xdg-basedir@5.1.0:
     resolution: {integrity: sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==}
     engines: {node: '>=12'}
@@ -7318,6 +7529,12 @@ snapshots:
       '@ast-grep/napi-win32-ia32-msvc': 0.37.0
       '@ast-grep/napi-win32-x64-msvc': 0.37.0
 
+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -8530,6 +8747,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@rsbuild/plugin-check-syntax@1.5.0(@rsbuild/core@1.6.0)':
+    dependencies:
+      acorn: 8.15.0
+      browserslist-to-es-version: 1.2.0
+      htmlparser2: 10.0.0
+      picocolors: 1.1.1
+      source-map: 0.7.6
+    optionalDependencies:
+      '@rsbuild/core': 1.6.0
+
   '@rsbuild/plugin-react@1.4.1(@rsbuild/core@1.6.0)':
     dependencies:
       '@rsbuild/core': 1.6.0
@@ -8585,6 +8812,104 @@ snapshots:
       - vue
       - webpack-cli
 
+  '@rsdoctor/client@1.3.7': {}
+
+  '@rsdoctor/core@1.3.7(@rsbuild/core@1.6.0)(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)':
+    dependencies:
+      '@rsbuild/plugin-check-syntax': 1.5.0(@rsbuild/core@1.6.0)
+      '@rsdoctor/graph': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/sdk': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/types': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/utils': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      browserslist-load-config: 1.0.1
+      enhanced-resolve: 5.12.0
+      es-toolkit: 1.41.0
+      filesize: 10.1.6
+      fs-extra: 11.3.0
+      semver: 7.7.3
+      source-map: 0.7.6
+    transitivePeerDependencies:
+      - '@rsbuild/core'
+      - '@rspack/core'
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+      - webpack
+
+  '@rsdoctor/graph@1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)':
+    dependencies:
+      '@rsdoctor/types': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/utils': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      es-toolkit: 1.41.0
+      path-browserify: 1.0.1
+      source-map: 0.7.6
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - webpack
+
+  '@rsdoctor/rspack-plugin@1.3.7(@rsbuild/core@1.6.0)(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)':
+    dependencies:
+      '@rsdoctor/core': 1.3.7(@rsbuild/core@1.6.0)(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/graph': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/sdk': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/types': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/utils': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+    optionalDependencies:
+      '@rspack/core': 1.6.0(@swc/helpers@0.5.17)
+    transitivePeerDependencies:
+      - '@rsbuild/core'
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+      - webpack
+
+  '@rsdoctor/sdk@1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)':
+    dependencies:
+      '@rsdoctor/client': 1.3.7
+      '@rsdoctor/graph': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/types': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@rsdoctor/utils': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      safer-buffer: 2.1.2
+      socket.io: 4.8.1
+      tapable: 2.2.3
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+      - webpack
+
+  '@rsdoctor/types@1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)':
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/estree': 1.0.5
+      '@types/tapable': 2.2.7
+      source-map: 0.7.6
+    optionalDependencies:
+      '@rspack/core': 1.6.0(@swc/helpers@0.5.17)
+      webpack: 5.102.1
+
+  '@rsdoctor/utils@1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@rsdoctor/types': 1.3.7(@rspack/core@1.6.0(@swc/helpers@0.5.17))(webpack@5.102.1)
+      '@types/estree': 1.0.5
+      acorn: 8.15.0
+      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      acorn-walk: 8.3.4
+      deep-eql: 4.1.4
+      envinfo: 7.19.0
+      fs-extra: 11.3.0
+      get-port: 5.1.1
+      json-stream-stringify: 3.0.1
+      lines-and-columns: 2.0.4
+      picocolors: 1.1.1
+      rslog: 1.3.0
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - webpack
+
   '@rslib/core@0.16.1(@microsoft/api-extractor@7.53.3(@types/node@22.10.2))(typescript@5.8.2)':
     dependencies:
       '@rsbuild/core': 1.6.0-beta.1
@@ -8856,6 +9181,8 @@ snapshots:
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
+  '@socket.io/component-emitter@3.1.2': {}
+
   '@standard-schema/spec@1.0.0': {}
 
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.28.0)':
@@ -8998,6 +9325,14 @@ snapshots:
 
   '@types/body-scroll-lock@3.1.2': {}
 
+  '@types/connect@3.4.38':
+    dependencies:
+      '@types/node': 22.10.2
+
+  '@types/cors@2.8.19':
+    dependencies:
+      '@types/node': 22.10.2
+
   '@types/cross-spawn@6.0.6':
     dependencies:
       '@types/node': 22.10.2
@@ -9074,12 +9409,20 @@ snapshots:
     dependencies:
       '@types/react': 19.2.2
 
+  '@types/react-reconciler@0.32.2(@types/react@19.2.2)':
+    dependencies:
+      '@types/react': 19.2.2
+
   '@types/react@19.2.2':
     dependencies:
       csstype: 3.1.3
 
   '@types/supports-color@8.1.1': {}
 
+  '@types/tapable@2.2.7':
+    dependencies:
+      tapable: 2.3.0
+
   '@types/unist@2.0.7': {}
 
   '@types/unist@3.0.3': {}
@@ -9322,6 +9665,15 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  accepts@1.3.8:
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+
+  acorn-import-attributes@1.9.5(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
   acorn-import-phases@1.0.4(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
@@ -9333,7 +9685,6 @@ snapshots:
   acorn-walk@8.3.4:
     dependencies:
       acorn: 8.15.0
-    optional: true
 
   acorn@8.15.0: {}
 
@@ -9474,6 +9825,8 @@ snapshots:
 
   base64-js@1.5.1: {}
 
+  base64id@2.0.0: {}
+
   baseline-browser-mapping@2.8.20: {}
 
   better-path-resolve@1.0.0:
@@ -9507,6 +9860,12 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
+  browserslist-load-config@1.0.1: {}
+
+  browserslist-to-es-version@1.2.0:
+    dependencies:
+      browserslist: 4.27.0
+
   browserslist@4.24.0:
     dependencies:
       caniuse-lite: 1.0.30001717
@@ -9686,6 +10045,8 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  cookie@0.7.2: {}
+
   copy-to-clipboard@3.3.3:
     dependencies:
       toggle-selection: 1.0.6
@@ -9694,6 +10055,11 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
+  cors@2.8.5:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
   cosmiconfig@8.3.6(typescript@5.8.2):
     dependencies:
       import-fresh: 3.3.1
@@ -9839,6 +10205,10 @@ snapshots:
   de-indent@1.0.2:
     optional: true
 
+  debug@4.3.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.4.0:
     dependencies:
       ms: 2.1.3
@@ -9847,6 +10217,10 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
+  deep-eql@4.1.4:
+    dependencies:
+      type-detect: 4.1.0
+
   deep-eql@5.0.2: {}
 
   deepmerge@4.3.1: {}
@@ -9954,6 +10328,12 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dot-case@3.0.4:
     dependencies:
       no-case: 3.0.4
@@ -9997,6 +10377,29 @@ snapshots:
     dependencies:
       once: 1.4.0
 
+  engine.io-parser@5.2.3: {}
+
+  engine.io@6.6.4:
+    dependencies:
+      '@types/cors': 2.8.19
+      '@types/node': 22.10.2
+      accepts: 1.3.8
+      base64id: 2.0.0
+      cookie: 0.7.2
+      cors: 2.8.5
+      debug: 4.3.7
+      engine.io-parser: 5.2.3
+      ws: 8.17.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  enhanced-resolve@5.12.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
   enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
@@ -10013,8 +10416,12 @@ snapshots:
 
   entities@4.5.0: {}
 
+  entities@6.0.1: {}
+
   env-paths@3.0.0: {}
 
+  envinfo@7.19.0: {}
+
   environment@1.1.0: {}
 
   error-ex@1.3.2:
@@ -10042,6 +10449,8 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
+  es-toolkit@1.41.0: {}
+
   esast-util-from-estree@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.0
@@ -10200,6 +10609,8 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
+  filesize@10.1.6: {}
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -10649,6 +11060,13 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
+  htmlparser2@10.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 6.0.1
+
   htmlparser2@8.0.2:
     dependencies:
       domelementtype: 2.3.0
@@ -10836,6 +11254,8 @@ snapshots:
 
   json-schema@0.4.0: {}
 
+  json-stream-stringify@3.0.1: {}
+
   json5@2.2.3: {}
 
   jsonc-parser@3.2.0: {}
@@ -10869,6 +11289,8 @@ snapshots:
 
   lines-and-columns@2.0.3: {}
 
+  lines-and-columns@2.0.4: {}
+
   lint-staged@15.5.2:
     dependencies:
       chalk: 5.4.1
@@ -11816,6 +12238,8 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  negotiator@0.6.3: {}
+
   neo-async@2.6.2: {}
 
   no-case@3.0.4:
@@ -12036,6 +12460,8 @@ snapshots:
       leac: 0.6.0
       peberminta: 0.9.0
 
+  path-browserify@1.0.1: {}
+
   path-exists@4.0.0: {}
 
   path-exists@5.0.0: {}
@@ -12217,6 +12643,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  react-reconciler@0.33.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      scheduler: 0.27.0
+
   react-refresh@0.17.0: {}
 
   react-router-dom@6.30.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
@@ -12542,6 +12973,8 @@ snapshots:
     optionalDependencies:
       '@rsbuild/core': 1.6.0
 
+  rslog@1.3.0: {}
+
   rspack-plugin-virtual-module@1.0.1:
     dependencies:
       fs-extra: 11.3.0
@@ -12783,6 +13216,36 @@ snapshots:
       dot-case: 3.0.4
       tslib: 2.8.1
 
+  socket.io-adapter@2.5.5:
+    dependencies:
+      debug: 4.3.7
+      ws: 8.17.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  socket.io-parser@4.2.4:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+    transitivePeerDependencies:
+      - supports-color
+
+  socket.io@4.8.1:
+    dependencies:
+      accepts: 1.3.8
+      base64id: 2.0.0
+      cors: 2.8.5
+      debug: 4.3.7
+      engine.io: 6.6.4
+      socket.io-adapter: 2.5.5
+      socket.io-parser: 4.2.4
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   solid-js@1.9.10:
     dependencies:
       csstype: 3.1.3
@@ -12821,6 +13284,8 @@ snapshots:
 
   source-map@0.7.4: {}
 
+  source-map@0.7.6: {}
+
   space-separated-tokens@2.0.2: {}
 
   spawndamnit@3.0.1:
@@ -12992,6 +13457,8 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
+  tapable@2.2.3: {}
+
   tapable@2.3.0: {}
 
   tar-stream@2.2.0:
@@ -13121,6 +13588,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  type-detect@4.1.0: {}
+
   type-fest@2.19.0: {}
 
   type-fest@4.30.0: {}
@@ -13287,6 +13756,8 @@ snapshots:
 
   varint@6.0.0: {}
 
+  vary@1.1.2: {}
+
   vfile-location@4.1.0:
     dependencies:
       '@types/unist': 2.0.7
@@ -13512,6 +13983,8 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  ws@8.17.1: {}
+
   xdg-basedir@5.1.0: {}
 
   xml-js@1.6.11:
diff --git a/scripts/dictionary.txt b/scripts/dictionary.txt
index 10a23157c..59f47954e 100644
--- a/scripts/dictionary.txt
+++ b/scripts/dictionary.txt
@@ -14,9 +14,9 @@ bilibili
 biomejs
 Bluch
 brotli
-bunx
 browserslistrc
 bundleless
+bunx
 Bytedance
 caniuse
 chunkhash
@@ -75,6 +75,7 @@ longpaths
 manypkg
 mattcompiles
 mdast
+MDSSG
 Mdxjs
 mdxrs
 menlo
@@ -120,9 +121,9 @@ rsbuild
 rsdoctor
 rsfamily
 rslib
+rslint
 rslog
 rspack
-rslint
 rspress
 rstack
 rstest
@@ -135,6 +136,7 @@ Sizefor
 sokra
 speedscope
 srcset
+SSGMD
 stacktracey
 styl
 subdir
@@ -153,6 +155,7 @@ treeshaking
 tsbuildinfo
 tsdoc
 twoslash
+Twoslasher
 Unhead
 unocss
 unpatch
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
index 4109307e4..ff26361a4 100644
--- a/vitest.workspace.ts
+++ b/vitest.workspace.ts
@@ -16,7 +16,7 @@ export default defineWorkspace([
       environment: 'node',
       testTimeout: 30000,
       // restoreMocks: true,
-      include: ['packages/**/*.test.ts'],
+      include: ['packages/**/*.test.{ts,tsx}'],
       exclude: ['**/node_modules/**'],
       setupFiles: ['./scripts/test-helper/vitest.setup.ts'],
     },
diff --git a/website/docs/en/api/config/config-basic.mdx b/website/docs/en/api/config/config-basic.mdx
index bdf1bcef5..f45d32410 100644
--- a/website/docs/en/api/config/config-basic.mdx
+++ b/website/docs/en/api/config/config-basic.mdx
@@ -502,7 +502,7 @@ export default defineConfig({
 });
 ```
 
-:::tips
+:::tip
 
 SSG requires the source code to support SSR. If the code is not compatible to SSR, the build process will fail. You can try:
 
diff --git a/website/docs/en/guide/use-mdx/container.mdx b/website/docs/en/guide/use-mdx/container.mdx
index f99324c3e..fc2805921 100644
--- a/website/docs/en/guide/use-mdx/container.mdx
+++ b/website/docs/en/guide/use-mdx/container.mdx
@@ -90,17 +90,15 @@ This is a `block` of `Custom Title`
 
 </Tabs>
 
-:::warning
+:::warning Notes
 
-We recommend using the syntax `:::tip Custom Title` directly.
+- Container types must be lowercase. Use `:::tip`, `:::warning`, `:::caution`, etc. Capitalized types like `:::Tip` or `:::Warning` will not be recognized.
 
-When using the `:::` syntax in `.mdx` files and customizing headings with curly braces syntax, be aware of escaping.
+- When using the `:::` syntax in `.mdx` files and customizing headings with curly braces syntax, remember to escape the braces. We therefore recommend using the syntax `:::tip Custom Title` directly.
 
 ```mdx
 :::tip\{title="Custom Title"}
-
 This is a `block` of `Custom Title`
-
 :::
 ```
 
diff --git a/website/docs/en/plugin/official-plugins/twoslash.mdx b/website/docs/en/plugin/official-plugins/twoslash.mdx
index 93ab898cb..3bc221ec5 100644
--- a/website/docs/en/plugin/official-plugins/twoslash.mdx
+++ b/website/docs/en/plugin/official-plugins/twoslash.mdx
@@ -134,6 +134,7 @@ The plugin accepts an object with the following type:
 ```ts twoslash
 export interface PluginTwoslashOptions {
   explicitTrigger?: boolean;
+  cache?: boolean;
 }
 ```
 
@@ -143,3 +144,7 @@ export interface PluginTwoslashOptions {
 
 - If set to `false`, all TypeScript code blocks will be processed by default.
 - If set to `true`, only code blocks with the `twoslash` tag will be processed.
+
+### cache
+
+`cache` is used to cache the TypeScript language servers based on compiler options when calling [createTwoslasher](https://twoslash.netlify.app/refs/api#createtwoslasher). Default is `true`.
diff --git a/website/docs/en/ui/vars.mdx b/website/docs/en/ui/vars.mdx
index f9d3a9504..c8f158733 100644
--- a/website/docs/en/ui/vars.mdx
+++ b/website/docs/en/ui/vars.mdx
@@ -4,6 +4,30 @@
 
 :::
 
+Rspress exposes some commonly used CSS variables. Compared to overriding Rspress's built-in React components, overriding CSS variables for customization is simpler and more maintainable.
+
+You can edit and preview in real-time on this page, and copy to `theme/index.css` to override styles. Here is a simple example of style overriding:
+
+import { Tabs, Tab } from '@theme';
+
+<Tabs>
+<Tab label="theme/index.tsx">
+
+```tsx
+import './index.css';
+export * from '@rspress/core/theme';
+```
+
+</Tab>
+<Tab label="theme/index.css">
+```css
+/* Copy CSS variable code here to override styles */
+```
+</Tab>
+</Tabs>
+
+Below are some CSS variables provided by Rspress and their default values:
+
 ## Brand colors
 
 import { CssPickerEditor } from '../../components/CssPickerEditor';
@@ -27,3 +51,9 @@ import rawCodeScss from '../../../../packages/core/src/theme/styles/vars/code-va
 ```tsx title="foo.ts"
 console.log('This is a code block');
 ```
+
+## Default homepage
+
+import rawCodeHome from '../../../../packages/core/src/theme/styles/vars/home-vars.css?raw';
+
+<CssLiveCodeEditorWithDefault defaultValue={rawCodeHome} />
diff --git a/website/docs/zh/api/config/config-basic.mdx b/website/docs/zh/api/config/config-basic.mdx
index ccb9a10cb..bc32e272f 100644
--- a/website/docs/zh/api/config/config-basic.mdx
+++ b/website/docs/zh/api/config/config-basic.mdx
@@ -501,7 +501,7 @@ export default defineConfig({
 });
 ```
 
-:::tips
+:::tip
 
 SSG 要求源码支持在 SSR 下编译，如果使用了不兼容 SSR 场景下的代码，会导致编译失败。你可以尝试：
 
diff --git a/website/docs/zh/guide/use-mdx/container.mdx b/website/docs/zh/guide/use-mdx/container.mdx
index be88fcd07..6cf534349 100644
--- a/website/docs/zh/guide/use-mdx/container.mdx
+++ b/website/docs/zh/guide/use-mdx/container.mdx
@@ -90,11 +90,11 @@ import { Tabs, Tab } from '@theme';
 
 </Tabs>
 
-:::warning
+:::warning 注意事项
 
-我们更推荐直接使用 `:::tip 自定义标题` 这种语法。
+- 容器类型必须使用小写。请使用 `:::tip`、`:::warning`、`:::caution` 等。大写形式如 `:::Tip` 或 `:::Warning` 将不会被识别。
 
-在 `.mdx` 文件中使用 `:::` 语法且使用大括号语法自定义标题时，需注意转义。
+- 在 `.mdx` 文件中使用 `:::` 语法且使用大括号语法自定义标题时，需注意转义。因此更推荐直接使用 `:::tip 自定义标题` 这种语法。
 
 ```mdx
 :::tip\{title="Custom Title"}
diff --git a/website/docs/zh/plugin/official-plugins/twoslash.mdx b/website/docs/zh/plugin/official-plugins/twoslash.mdx
index fc5bec619..3d21aaa99 100644
--- a/website/docs/zh/plugin/official-plugins/twoslash.mdx
+++ b/website/docs/zh/plugin/official-plugins/twoslash.mdx
@@ -144,6 +144,7 @@ const str: string = 1;
 ```ts twoslash
 export interface PluginTwoslashOptions {
   explicitTrigger?: boolean;
+  cache?: boolean;
 }
 ```
 
@@ -153,3 +154,7 @@ export interface PluginTwoslashOptions {
 
 - 如果设置为 `false`，默认情况下所有 TypeScript 代码块都将被处理。
 - 如果设置为 `true`，只有带有 `twoslash` 标签的代码块才会被处理。
+
+### cache
+
+`cache` 用于在 [createTwoslasher](https://twoslash.netlify.app/refs/api#createtwoslasher) 时根据编译器选项缓存 TypeScript 语言服务器。默认值为 `true`。
diff --git a/website/docs/zh/ui/vars.mdx b/website/docs/zh/ui/vars.mdx
index 53ffefcea..0697c3f05 100644
--- a/website/docs/zh/ui/vars.mdx
+++ b/website/docs/zh/ui/vars.mdx
@@ -4,6 +4,30 @@
 
 :::
 
+Rspress 暴露了一些常用的 CSS 变量，相比于覆盖 Rspress 内置的 React 组件，覆盖 CSS 变量实现定制化更简单且更具维护性。
+
+你可以在该页面实时编辑和预览，并复制到 `theme/index.css` 中进行样式覆盖。下面是一个样式覆盖的简单示例：
+
+import { Tabs, Tab } from '@theme';
+
+<Tabs>
+<Tab label="theme/index.tsx">
+
+```tsx
+import './index.css';
+export * from '@rspress/core/theme';
+```
+
+</Tab>
+<Tab label="theme/index.css">
+```css
+/* 复制 CSS 变量代码到这里来进行样式覆盖 */
+```
+</Tab>
+</Tabs>
+
+下面是 Rspress 提供的一些 CSS 变量及其默认值：
+
 ## 品牌色
 
 import { CssPickerEditor } from '../../components/CssPickerEditor';
@@ -27,3 +51,9 @@ import rawCodeScss from '../../../../packages/core/src/theme/styles/vars/code-va
 ```tsx title="foo.ts"
 console.log('This is a code block');
 ```
+
+## 默认首页
+
+import rawCodeHome from '../../../../packages/core/src/theme/styles/vars/home-vars.css?raw';
+
+<CssLiveCodeEditorWithDefault defaultValue={rawCodeHome} />
diff --git a/website/package.json b/website/package.json
index 3197b152a..854e63dda 100644
--- a/website/package.json
+++ b/website/package.json
@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@rsbuild/plugin-sass": "~1.4.0",
+    "@rsdoctor/rspack-plugin": "1.3.7",
     "@rspress/core": "workspace:*",
     "@rspress/plugin-algolia": "workspace:*",
     "@rspress/plugin-llms": "workspace:*",
diff --git a/website/rspress.config.ts b/website/rspress.config.ts
index aa1c5f889..dd91711b2 100644
--- a/website/rspress.config.ts
+++ b/website/rspress.config.ts
@@ -1,8 +1,8 @@
 import { pluginSass } from '@rsbuild/plugin-sass';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 import { defineConfig } from '@rspress/core';
 import { transformerCompatibleMetaHighlight } from '@rspress/core/shiki-transformers';
 import { pluginAlgolia } from '@rspress/plugin-algolia';
-import { pluginLlms } from '@rspress/plugin-llms';
 import { pluginSitemap } from '@rspress/plugin-sitemap';
 import { pluginTwoslash } from '@rspress/plugin-twoslash';
 import {
@@ -18,6 +18,16 @@ import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
 
 const siteUrl = 'https://v2.rspress.rs';
 
+const commonRsdoctorConfig = {
+  disableClientServer: true,
+  output: {
+    mode: 'brief' as const,
+    options: {
+      type: ['json'] as ('json' | 'html')[],
+    },
+  },
+};
+
 export default defineConfig({
   root: 'docs',
   title: 'Rspress',
@@ -51,7 +61,6 @@ export default defineConfig({
     pluginAlgolia({
       verificationContent: '8F5BFE50E65777F1',
     }),
-    pluginLlms(),
   ],
   builderConfig: {
     plugins: [
@@ -67,6 +76,22 @@ export default defineConfig({
         },
       }),
     ],
+    tools: {
+      rspack: config => {
+        if (process.env.RSDOCTOR) {
+          config.plugins?.push(
+            new RsdoctorRspackPlugin({
+              ...commonRsdoctorConfig,
+              output: {
+                ...commonRsdoctorConfig.output,
+                ...(config.name === 'web' && { reportDir: './doc_build/web' }),
+              },
+            }),
+          );
+        }
+        return config;
+      },
+    },
   },
   route: {
     cleanUrls: true,
@@ -130,4 +155,5 @@ export default defineConfig({
     include: [],
     exclude: [],
   },
+  llms: true,
 });
diff --git a/website/theme/index.css b/website/theme/index.css
deleted file mode 100644
index 3b80d97ec..000000000
--- a/website/theme/index.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.rspress-home-hero-text {
-  max-width: var(--rp-home-hero-text-max-width);
-}
diff --git a/website/theme/index.tsx b/website/theme/index.tsx
index bdb6392e0..78dfdc9b1 100644
--- a/website/theme/index.tsx
+++ b/website/theme/index.tsx
@@ -1,3 +1,4 @@
+import { useLang } from '@rspress/core/runtime';
 import {
   Banner,
   HomeLayout as BasicHomeLayout,
@@ -17,9 +18,6 @@ import {
 import { NavIcon } from '@rstack-dev/doc-ui/nav-icon';
 import { ToolStack } from './components/ToolStack';
 
-import './index.css';
-import { useLang } from '@rspress/core/runtime';
-
 function HomeLayout() {
   return (
     <BasicHomeLayout