callstack · jbroma · Sep 12, 2025 · Sep 12, 2025
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/package.json b/website/package.json
@@ -13,12 +13,9 @@
     "diff:v3-v4:mjs": "git diff @callstack/repack@3.0.0:templates/webpack.config.mjs HEAD:templates/webpack.config.mjs > src/public/diffs/repack_v3-v4_mjs.diff"
   },
   "dependencies": {
-    "@callstack/rspress-theme": "^0.3.1",
-    "@rspress/plugin-llms": "2.0.0-beta.21",
-    "rsbuild-plugin-open-graph": "^1.0.2",
-    "rspress": "2.0.0-beta.21",
-    "rspress-plugin-sitemap": "^1.1.1",
-    "rspress-plugin-vercel-analytics": "^0.3.0"
+    "@callstack/rspress-preset": "^0.4.1",
+    "@callstack/rspress-theme": "^0.4.1",
+    "@rspress/core": "2.0.0-beta.32"
   },
   "devDependencies": {
     "@types/node": "catalog:",

diff --git a/website/rspress.config.ts b/website/rspress.config.ts
@@ -1,126 +1,65 @@
 import * as path from 'node:path';
-import { pluginCallstackTheme } from '@callstack/rspress-theme/plugin';
-import { pluginLlms } from '@rspress/plugin-llms';
-import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
-import pluginSitemap from 'rspress-plugin-sitemap';
-import vercelAnalytics from 'rspress-plugin-vercel-analytics';
-import { defineConfig } from 'rspress/config';
+import { withCallstackPreset } from '@callstack/rspress-preset';
 
 const LATEST_VERSION = 'v5';
 
 const DOCS_ROOT = path.join('src', process.env.REPACK_DOC_VERSION ?? 'latest');
 const EDIT_ROOT_URL = `https://github.com/callstack/repack/tree/main/website/${DOCS_ROOT}`;
 
-export default defineConfig({
-  root: path.join(__dirname, DOCS_ROOT),
-  outDir: 'build',
-  title: process.env.REPACK_DOC_VERSION
-    ? `[${process.env.REPACK_DOC_VERSION}] Re.Pack`
-    : 'Re.Pack',
-  description:
-    'A modern build tool for React Native that brings the Rspack and webpack ecosystem to mobile React Native apps',
-  icon: '/img/favicon.ico',
-  logo: {
-    light: '/img/logo-light.png',
-    dark: '/img/logo-dark.png',
-  },
-  markdown: {
-    checkDeadLinks: true,
-  },
-  route: {
-    cleanUrls: true,
-  },
-  search: {
-    versioned: true,
-    codeBlocks: true,
-  },
-  themeConfig: {
-    enableContentAnimation: true,
-    enableScrollToTop: true,
-    outlineTitle: 'Contents',
-    footer: {
-      message: `Copyright © ${new Date().getFullYear()} Callstack Open Source`,
-    },
-    editLink: {
-      docRepoBaseUrl: EDIT_ROOT_URL,
-      text: 'Edit this page on GitHub',
-    },
-    socialLinks: [
-      {
-        icon: 'github',
-        mode: 'link',
-        content: 'https://github.com/callstack/repack',
-      },
-      {
-        icon: 'X',
-        mode: 'link',
-        content: 'https://x.com/repack_rn',
+export default withCallstackPreset(
+  {
+    context: __dirname,
+    docs: {
+      description:
+        'A modern build tool for React Native that brings the Rspack and webpack ecosystem to mobile React Native apps',
+      editUrl: EDIT_ROOT_URL,
+      icon: '/img/favicon.ico',
+      logoDark: '/img/logo-dark.png',
+      logoLight: '/img/logo-light.png',
+      ogImage: '/img/og-image.jpg',
+      rootDir: DOCS_ROOT,
+      rootUrl: 'https://re-pack.dev',
+      socials: {
+        github: 'https://github.com/callstack/repack',
+        x: 'https://x.com/repack_rn',
+        discord: 'https://discord.gg/TWDBep3nXV',
       },
-      {
-        icon: 'discord',
-        mode: 'link',
-        content: 'https://discord.gg/TWDBep3nXV',
-      },
-    ],
+      title: process.env.REPACK_DOC_VERSION
+        ? `[${process.env.REPACK_DOC_VERSION}] Re.Pack`
+        : 'Re.Pack',
+    },
   },
-  builderConfig: {
-    source: {
-      define: {
-        'global.__REPACK_DOC_VERSION__': JSON.stringify(
-          process.env.REPACK_DOC_VERSION
-        ),
-        'global.__REPACK_DOC_LATEST_VERSION__': JSON.stringify(LATEST_VERSION),
-      },
+  {
+    outDir: 'build',
+    globalStyles:
+      process.env.REPACK_DOC_VERSION !== 'v2' &&
+      process.env.REPACK_DOC_VERSION !== 'v3' &&
+      process.env.REPACK_DOC_VERSION !== 'v4'
+        ? path.join(__dirname, 'theme', 'styles.css')
+        : undefined,
+    themeConfig: {
+      enableScrollToTop: true,
     },
-    output: {
-      distPath: {
-        // set explicitly for sitemap plugin
-        root: 'build',
+    builderConfig: {
+      source: {
+        define: {
+          'global.__REPACK_DOC_VERSION__': JSON.stringify(
+            process.env.REPACK_DOC_VERSION
+          ),
+          'global.__REPACK_DOC_LATEST_VERSION__':
+            JSON.stringify(LATEST_VERSION),
+        },
       },
-    },
-    plugins: [
-      pluginOpenGraph({
-        title: 'Re.Pack',
-        type: 'website',
-        url: 'https://re-pack.dev',
-        image: 'https://re-pack.dev/img/og-image.jpg',
-        description: 'A modern build tool for React Native',
-        twitter: {
-          site: '@repack_rn',
-          card: 'summary_large_image',
+      tools: {
+        rspack(_config, { addRules }) {
+          addRules([
+            {
+              resourceQuery: /raw/,
+              type: 'asset/source',
+            },
+          ]);
         },
-      }),
-    ],
-    tools: {
-      rspack(_config, { addRules }) {
-        addRules([
-          {
-            resourceQuery: /raw/,
-            type: 'asset/source',
-          },
-        ]);
       },
     },
-  },
-  globalStyles:
-    process.env.REPACK_DOC_VERSION !== 'v2' &&
-    process.env.REPACK_DOC_VERSION !== 'v3' &&
-    process.env.REPACK_DOC_VERSION !== 'v4'
-      ? path.join(__dirname, 'theme', 'styles.css')
-      : undefined,
-  plugins: [
-    // @ts-ignore
-    pluginSitemap({
-      domain: 'https://re-pack.dev',
-    }),
-    // @ts-ignore
-    vercelAnalytics(),
-    // @ts-ignore
-    pluginCallstackTheme(),
-    pluginLlms({
-      exclude: ({ page }) => {
-        return page.routePath.includes('404');
-      },
-    }),
-  ],
-});
+  }
+);
diff --git a/website/src/latest/api/cli/bundle.mdx b/website/src/latest/api/cli/bundle.mdx
@@ -6,7 +6,7 @@
 
 In the root of an existing project, run this command in your terminal of choice:
 
-import { PackageManagerTabs } from 'rspress/theme';
+import { PackageManagerTabs } from '@theme';
 
 <PackageManagerTabs command={{
   npm: 'npm run react-native bundle',

diff --git a/website/src/latest/api/cli/start.mdx b/website/src/latest/api/cli/start.mdx
@@ -6,7 +6,7 @@
 
 In the root of an existing React Native project with Re.Pack, run this command in your terminal of choice:
 
-import { PackageManagerTabs } from 'rspress/theme';
+import { PackageManagerTabs } from '@theme';
 
 <PackageManagerTabs command={{
   npm: "npm run react-native start",

diff --git a/website/src/latest/api/plugins/module-federation-v2.mdx b/website/src/latest/api/plugins/module-federation-v2.mdx
@@ -26,7 +26,7 @@ The plugin extends the standard Module Federation 2.0 plugin with functionality
 
 First, install the official `@module-federation/enhanced` package which is required by Re.Pack:
 
-import { PackageManagerTabs } from 'rspress/theme';
+import { PackageManagerTabs } from '@theme';
 
 <PackageManagerTabs command="install @module-federation/enhanced" />
 

diff --git a/website/src/latest/docs/features/dev-server.mdx b/website/src/latest/docs/features/dev-server.mdx
@@ -21,7 +21,7 @@ For complete DevServer configuration options and API reference, check out the [D
 
 To start the dev server, you can use the following command:
 
-import { PackageManagerTabs } from 'rspress/theme';
+import { PackageManagerTabs } from '@theme';
 
 <PackageManagerTabs command={{
   npm: "npm run react-native start",

diff --git a/website/src/latest/docs/features/nativewind.mdx b/website/src/latest/docs/features/nativewind.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs } from 'rspress/theme';
+import { PackageManagerTabs } from '@theme';
 
 # NativeWind
 

diff --git a/website/src/latest/docs/features/reanimated.mdx b/website/src/latest/docs/features/reanimated.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs } from 'rspress/theme';
+import { PackageManagerTabs } from '@theme';
 
 # React Native Reanimated
 

diff --git a/website/src/latest/docs/getting-started/quick-start.mdx b/website/src/latest/docs/getting-started/quick-start.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs, Steps, Tabs, Tab } from 'rspress/theme';
+import { PackageManagerTabs, Steps, Tabs, Tab } from '@theme';
 
 # Quick start
 

diff --git a/website/src/latest/docs/guides/bundle-analysis.mdx b/website/src/latest/docs/guides/bundle-analysis.mdx
@@ -9,7 +9,7 @@ Bundle analysis is a crucial process that helps you understand your app's perfor
 
 ### Installation
 
-import { PackageManagerTabs, Tabs, Tab } from 'rspress/theme';
+import { PackageManagerTabs, Tabs, Tab } from '@theme';
 
 <Tabs groupId="bundler">
   <Tab label="Rspack" value="rspack">

diff --git a/website/src/latest/docs/guides/configuration.mdx b/website/src/latest/docs/guides/configuration.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from 'rspress/theme';
+import { Tab, Tabs } from '@theme';
 import { CodeBlock } from '@theme';
 import RspackCJSTemplate from '../../../../../templates/rspack.config.cjs?raw';
 import RspackESMTemplate from '../../../../../templates/rspack.config.mjs?raw';

diff --git a/website/src/latest/docs/guides/deploy.mdx b/website/src/latest/docs/guides/deploy.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs } from 'rspress/theme';
+import { PackageManagerTabs } from '@theme';
 
 # Deployment 
 

diff --git a/website/src/latest/docs/guides/expo-modules.mdx b/website/src/latest/docs/guides/expo-modules.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs, Steps } from 'rspress/theme';
+import { PackageManagerTabs, Steps } from '@theme';
 
 # Expo Modules
 

diff --git a/website/src/latest/docs/migration-guides/metro.mdx b/website/src/latest/docs/migration-guides/metro.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs, Steps, Tabs, Tab } from 'rspress/theme';
+import { PackageManagerTabs, Steps, Tabs, Tab } from '@theme';
 import { CodeBlock } from '@theme';
 import RspackCJSTemplate from '../../../../../templates/rspack.config.cjs?raw';
 import RspackESMTemplate from '../../../../../templates/rspack.config.mjs?raw';

diff --git a/website/src/latest/docs/migration-guides/rspack.mdx b/website/src/latest/docs/migration-guides/rspack.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs, Steps, Tabs, Tab } from 'rspress/theme';
+import { PackageManagerTabs, Steps, Tabs, Tab } from '@theme';
 
 # Migrating to Rspack
 

diff --git a/website/src/v2/docs/getting-started.mdx b/website/src/v2/docs/getting-started.mdx
@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-import { Tab, Tabs } from 'rspress/theme';
+import { Tab, Tabs } from '@theme';
 
 # Getting Started
 

diff --git a/website/src/v3/docs/getting-started.mdx b/website/src/v3/docs/getting-started.mdx
@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-import { Tab, Tabs } from 'rspress/theme';
+import { Tab, Tabs } from '@theme';
 
 # Getting Started
 

diff --git a/website/src/v4/docs/getting-started.mdx b/website/src/v4/docs/getting-started.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs, Steps } from 'rspress/theme';
+import { PackageManagerTabs, Steps } from '@theme';
 
 # Getting Started
 

diff --git a/website/theme/index.tsx b/website/theme/index.tsx
@@ -1,6 +1,10 @@
 import { PrevNextPage, VersionBadge } from '@callstack/rspress-theme';
-import { NoSSR } from 'rspress/runtime';
-import { CodeBlockRuntime, Link, Layout as RspressLayout } from 'rspress/theme';
+import { NoSSR } from '@rspress/core/runtime';
+import {
+  CodeBlockRuntime,
+  Link,
+  Layout as RspressLayout,
+} from '@rspress/core/theme';
 
 const OldVersionAnnouncement = ({ version, latestVersion }) => (
   <div className="py-2 px-4 flex flex-col sm:flex-row items-center justify-center bg-amber-50 text-amber-900 border-b border-amber-200 text-sm">
@@ -56,4 +60,4 @@ const CustomPrevNextPage = (props) => {
 
 export { CustomPrevNextPage as PrevNextPage };
 
-export * from 'rspress/theme';
+export * from '@rspress/core/theme';