diff --git a/esbuild.config.ts b/esbuild.config.ts
index 6ae929c..9481e29 100644
--- a/esbuild.config.ts
+++ b/esbuild.config.ts
@@ -3,18 +3,38 @@ import esbuild from 'esbuild';
 
 execSync('tsc -p tsconfig.build.json', { stdio: 'inherit' });
 
-await esbuild.build({
+const commonConfig = {
   entryPoints: ['src/index.tsx'],
   bundle: true,
   sourcemap: true,
   minify: true,
   target: ['es2020'],
-  format: 'esm',
-  outfile: 'dist/index.js',
-  packages: 'external' as const,
-  splitting: false,
+
+  // Keep imports like "Chakra.Menu"
   treeShaking: true,
+
+  // Don't let esbuild split files — Chakra compound components break
+  splitting: false,
+
+  // Important for Chakra v3 (which uses modern ESM + emotion)
   supported: {
     'import-meta': true,
   },
+};
+
+// ESM build - externalize all packages for tree-shaking in bundlers
+await esbuild.build({
+  ...commonConfig,
+  outfile: 'dist/index.js',
+  format: 'esm',
+  packages: 'external' as const,
+});
+
+// CJS build - bundle dependencies to avoid ESM/CJS interop issues
+// Only externalize React (peer dependency)
+await esbuild.build({
+  ...commonConfig,
+  outfile: 'dist/index.cjs',
+  format: 'cjs',
+  external: ['react', 'react-dom', 'react/jsx-runtime'],
 });
diff --git a/package.json b/package.json
index f6f8f1f..b7cc637 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "types": "dist/index.d.ts",
@@ -46,6 +47,10 @@
     {
       "path": "dist/index.js",
       "limit": "300 kB"
+    },
+    {
+      "path": "dist/index.cjs",
+      "limit": "400 kB"
     }
   ],
   "devDependencies": {