diff --git a/package.json b/package.json
index 54d99bd..7506a6f 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "framer": "^2.4.1",
     "react": "^18.3.1",
     "socket.io": "^4.7.5",
+    "socket.io-client": "^4.7.5",
     "tailwindcss": "^3.4.10",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0fb6ed4..9d25e6e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ devDependencies:
   socket.io:
     specifier: ^4.7.5
     version: 4.7.5
+  socket.io-client:
+    specifier: ^4.7.5
+    version: 4.7.5
   tailwindcss:
     specifier: ^3.4.10
     version: 3.4.10
@@ -702,6 +705,20 @@ packages:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
     dev: true
 
+  /engine.io-client@6.5.4:
+    resolution: {integrity: sha512-GeZeeRjpD2qf49cZQ0Wvh/8NJNfeXkXXcoGh+F77oEAgo9gUHwT1fCRxSNU+YEEaysOJTnsFHmM5oAcPy4ntvQ==}
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.6
+      engine.io-parser: 5.2.3
+      ws: 8.17.1
+      xmlhttprequest-ssl: 2.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /engine.io-parser@5.2.3:
     resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
     engines: {node: '>=10.0.0'}
@@ -1405,6 +1422,20 @@ packages:
       - utf-8-validate
     dev: true
 
+  /socket.io-client@4.7.5:
+    resolution: {integrity: sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.6
+      engine.io-client: 6.5.4
+      socket.io-parser: 4.2.4
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /socket.io-parser@4.2.4:
     resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
     engines: {node: '>=10.0.0'}
@@ -1684,6 +1715,11 @@ packages:
         optional: true
     dev: true
 
+  /xmlhttprequest-ssl@2.0.0:
+    resolution: {integrity: sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
   /yaml@2.5.1:
     resolution: {integrity: sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==}
     engines: {node: '>= 14'}
diff --git a/tsup.config.ts b/tsup.config.ts
index 030838d..2a5488a 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -27,10 +27,11 @@ export default defineConfig((options): any => {
       "src/Button.tsx",
       "src/utils/live-reload/useRealtimeComponent.ts",
     ],
+    platform: "browser",
     format: ["esm", "cjs"],
     dts: true,
     minify: !isDev,
-    external: ["react", "framer", "framer-motion", "socket.io-client"],
+    external: ["react", "framer", "framer-motion"],
     async onSuccess() {
       if (!isDev) return;