diff --git a/compatibility-tests/fixtures/next/package/package.json b/compatibility-tests/fixtures/next/package/package.json
index f536242..b9bb805 100644
--- a/compatibility-tests/fixtures/next/package/package.json
+++ b/compatibility-tests/fixtures/next/package/package.json
@@ -9,6 +9,7 @@
     "@theatre/core": "0.0.1-COMPAT.1",
     "@theatre/r3f": "0.0.1-COMPAT.1",
     "@theatre/studio": "0.0.1-COMPAT.1",
+    "theatric": "0.0.1-COMPAT.1",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/compatibility-tests/fixtures/next/package/pages/theatric.js b/compatibility-tests/fixtures/next/package/pages/theatric.js
new file mode 100644
index 0000000..6408c7d
--- /dev/null
+++ b/compatibility-tests/fixtures/next/package/pages/theatric.js
@@ -0,0 +1,77 @@
+import {button, initialize, useControls} from 'theatric'
+import {render} from 'react-dom'
+import React, {useState} from 'react'
+
+// initialize()
+
+function SomeComponent({id}) {
+  const {foo, $get, $set} = useControls(
+    {
+      foo: 0,
+      bar: 0,
+      bez: button(() => {
+        $set((p) => p.foo, 2)
+        $set((p) => p.bar, 3)
+        console.log($get((p) => p.foo))
+      }),
+    },
+    {folder: id},
+  )
+
+  return (
+    <div>
+      {id}: {foo}
+    </div>
+  )
+}
+
+export default function App() {
+  const {bar, $set, $get} = useControls({
+    bar: {foo: 'bar'},
+    baz: button(() => console.log($get((p) => p.bar))),
+  })
+
+  const {another, panel, yo} = useControls(
+    {
+      another: '',
+      panel: '',
+      yo: 0,
+    },
+    {panel: 'My panel'},
+  )
+
+  const {} = useControls({})
+
+  const [showComponent, setShowComponent] = useState(false)
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div>{JSON.stringify(bar)}</div>
+      <SomeComponent id="first" />
+      <SomeComponent id="second" />
+      <button
+        onClick={() => {
+          setShowComponent(!showComponent)
+        }}
+      >
+        Show another component
+      </button>
+      <button
+        onClick={() => {
+          $set((p) => p.bar.foo, $get((p) => p.bar.foo) + 1)
+        }}
+      >
+        Increment stuff
+      </button>
+      {showComponent && <SomeComponent id="hidden" />}
+      {yo}
+    </div>
+  )
+}
diff --git a/compatibility-tests/scripts/scripts.mjs b/compatibility-tests/scripts/scripts.mjs
index ccfdc96..c3ea58b 100644
--- a/compatibility-tests/scripts/scripts.mjs
+++ b/compatibility-tests/scripts/scripts.mjs
@@ -9,6 +9,13 @@ import onCleanup from 'node-cleanup'
 import * as verdaccioPackage from 'verdaccio'
 import {chromium, devices} from 'playwright'
 
+/**
+ * @param {string} pkg
+ * @returns boolean
+ */
+const isTheatreDependency = (pkg) =>
+  pkg.startsWith('@theatre/') || pkg === 'theatric'
+
 const verbose = !!argv['verbose']
 
 if (!verbose) {
@@ -120,7 +127,7 @@ async function patchTheatreDependencies(pathToPackageJson, version) {
     const dependencies = packageJson[dependencyType]
     if (dependencies) {
       for (const dependencyName of Object.keys(dependencies)) {
-        if (dependencyName.startsWith('@theatre/')) {
+        if (isTheatreDependency(dependencyName)) {
           dependencies[dependencyName] = version
         }
       }
@@ -210,6 +217,7 @@ const packagesToPublish = [
   '@theatre/react',
   '@theatre/browser-bundles',
   '@theatre/r3f',
+  'theatric',
 ]
 
 /**
diff --git a/compatibility-tests/verdaccio.yml b/compatibility-tests/verdaccio.yml
index 5d25dbb..dce9ea9 100644
--- a/compatibility-tests/verdaccio.yml
+++ b/compatibility-tests/verdaccio.yml
@@ -15,6 +15,9 @@ packages:
   '@theatre/*':
     access: $all
     publish: $all
+  'theatric':
+    access: $all
+    publish: $all
   '@*/*':
     access: $all
     publish: $all
diff --git a/packages/theatric/devEnv/build.ts b/packages/theatric/devEnv/build.ts
index 599d720..cb4c484 100644
--- a/packages/theatric/devEnv/build.ts
+++ b/packages/theatric/devEnv/build.ts
@@ -26,6 +26,14 @@ const definedGlobals = {
 
 function createBundles(watch: boolean) {
   const pathToPackage = path.join(__dirname, '../')
+  const pkgJson = require(path.join(pathToPackage, 'package.json'))
+  const listOfDependencies = Object.keys(pkgJson.dependencies || {})
+  const listOfPeerDependencies = Object.keys(pkgJson.peerDependencies || {})
+  const listOfAllDependencies = [
+    ...listOfDependencies,
+    ...listOfPeerDependencies,
+  ]
+
   const esbuildConfig: Parameters<typeof build>[0] = {
     entryPoints: [path.join(pathToPackage, 'src/index.ts')],
     bundle: true,
@@ -36,7 +44,12 @@ function createBundles(watch: boolean) {
     mainFields: ['browser', 'module', 'main'],
     target: ['firefox57', 'chrome58'],
     conditions: ['browser', 'node'],
-    plugins: [externalPlugin([/^[\@a-zA-Z]+/])],
+    plugins: [
+      externalPlugin([
+        // if a dependency is listed in the package.json, it should be external
+        ...listOfAllDependencies.map((d) => new RegExp(`^${d}`)),
+      ]),
+    ],
   }
 
   build({
diff --git a/packages/theatric/package.json b/packages/theatric/package.json
index 0201bab..1693a88 100644
--- a/packages/theatric/package.json
+++ b/packages/theatric/package.json
@@ -36,13 +36,13 @@
     "esbuild": "^0.12.15",
     "esbuild-register": "^2.5.0",
     "npm-run-all": "^4.1.5",
+    "lodash-es": "^4.17.21",
     "typescript": "^4.4.2"
   },
   "dependencies": {
     "@theatre/core": "workspace:*",
     "@theatre/react": "workspace:*",
-    "@theatre/studio": "workspace:*",
-    "lodash-es": "^4.17.21"
+    "@theatre/studio": "workspace:*"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/scripts/build.mjs b/scripts/build.mjs
index bdc8385..63d1bca 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -8,6 +8,7 @@ const packagesToBuild = [
   '@theatre/react',
   '@theatre/browser-bundles',
   '@theatre/r3f',
+  'theatric',
 ]
 ;(async function () {
   // better quote function from https://github.com/google/zx/pull/167
diff --git a/scripts/clean.mjs b/scripts/clean.mjs
index f5f46b4..229401f 100644
--- a/scripts/clean.mjs
+++ b/scripts/clean.mjs
@@ -8,6 +8,7 @@ const packages = [
   '@theatre/react',
   '@theatre/browser-bundles',
   '@theatre/r3f',
+  'theatric',
 ]
 
 ;(async function () {
diff --git a/scripts/prerelease.mjs b/scripts/prerelease.mjs
index 12148e2..7c3e08c 100644
--- a/scripts/prerelease.mjs
+++ b/scripts/prerelease.mjs
@@ -12,6 +12,7 @@ const packagesToPublish = [
   '@theatre/react',
   '@theatre/browser-bundles',
   '@theatre/r3f',
+  'theatric',
 ]
 
 /**
diff --git a/scripts/release.mjs b/scripts/release.mjs
index 1f8fa35..be28740 100644
--- a/scripts/release.mjs
+++ b/scripts/release.mjs
@@ -21,6 +21,7 @@ const packagesToBuild = [
   '@theatre/react',
   '@theatre/browser-bundles',
   '@theatre/r3f',
+  'theatric',
 ]
 
 const packagesToPublish = [
@@ -30,6 +31,7 @@ const packagesToPublish = [
   '@theatre/react',
   '@theatre/browser-bundles',
   '@theatre/r3f',
+  'theatric',
 ]
 
 /**
@@ -44,6 +46,7 @@ const packagesWhoseVersionsShouldBump = [
   'packages/react',
   'packages/browser-bundles',
   'packages/r3f',
+  'theatric',
 ]
 
 ;(async function () {