diff --git a/.pnp.cjs b/.pnp.cjs
index 2f3f84f2..022713df 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -210,6 +210,10 @@ const RAW_RUNTIME_STATE =
       "name": "@atls-utils/use-hover",\
       "reference": "workspace:utils/use-hover"\
     },\
+    {\
+      "name": "@atls-utils/use-outside-click",\
+      "reference": "workspace:utils/use-outside-click"\
+    },\
     {\
       "name": "@atls-utils/use-popover",\
       "reference": "workspace:utils/use-popover"\
@@ -271,6 +275,7 @@ const RAW_RUNTIME_STATE =
     ["@atls-ui-parts/upload", ["virtual:8480592f2ac0c5b00b17bd33d76d0c6d79665a3657c712c5bc5180464a86ac9bcb81d64ef54341b94b31e43db66a2fad906cfc6036c573c170560d657b7f96aa#workspace:ui-parts/upload", "workspace:ui-parts/upload"]],\
     ["@atls-ui/design", ["workspace:ui/design"]],\
     ["@atls-utils/use-hover", ["virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#workspace:utils/use-hover", "virtual:ab74b0ad21d788b5faaef36e69cfdc113b850f1834ee613c0e84e69c90b4422225458e49681dd5efa10b62df03744b2c5390da900b6092fa9e40fd6605cda940#workspace:utils/use-hover", "workspace:utils/use-hover"]],\
+    ["@atls-utils/use-outside-click", ["workspace:utils/use-outside-click"]],\
     ["@atls-utils/use-popover", ["workspace:utils/use-popover"]],\
     ["@atls-utils/use-select", ["virtual:9c076913ffd643939b8ac6e8c374fd1470f44689001261d35898fb07091ea0aa596a24d8bcdfb508f949d0c68789b448702cfb68072c423229496303e9a11342#workspace:utils/use-select", "workspace:utils/use-select"]],\
     ["hyperion", ["workspace:."]]\
@@ -1982,6 +1987,16 @@ const RAW_RUNTIME_STATE =
         "linkType": "SOFT"\
       }]\
     ]],\
+    ["@atls-utils/use-outside-click", [\
+      ["workspace:utils/use-outside-click", {\
+        "packageLocation": "./utils/use-outside-click/",\
+        "packageDependencies": [\
+          ["@atls-utils/use-outside-click", "workspace:utils/use-outside-click"],\
+          ["@types/react", "npm:18.2.48"]\
+        ],\
+        "linkType": "SOFT"\
+      }]\
+    ]],\
     ["@atls-utils/use-popover", [\
       ["workspace:utils/use-popover", {\
         "packageLocation": "./utils/use-popover/",\
diff --git a/utils/use-outside-click/package.json b/utils/use-outside-click/package.json
new file mode 100644
index 00000000..ab3d33d5
--- /dev/null
+++ b/utils/use-outside-click/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@atls-utils/use-outside-click",
+  "version": "1.0.0",
+  "license": "BSD-3-Clause",
+  "type": "module",
+  "main": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.48"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      "./package.json": "./package.json",
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts"
+  }
+}
diff --git a/utils/use-outside-click/src/index.ts b/utils/use-outside-click/src/index.ts
new file mode 100644
index 00000000..fddb4c69
--- /dev/null
+++ b/utils/use-outside-click/src/index.ts
@@ -0,0 +1 @@
+export * from './use-outside-click.hook.js'
diff --git a/utils/use-outside-click/src/use-outside-click.hook.ts b/utils/use-outside-click/src/use-outside-click.hook.ts
new file mode 100644
index 00000000..57c04a87
--- /dev/null
+++ b/utils/use-outside-click/src/use-outside-click.hook.ts
@@ -0,0 +1,24 @@
+import type { UseOutsideClickType } from './use-outside-click.interfaces.js'
+
+import { useEffect }                from 'react'
+import { useRef }                   from 'react'
+
+export const useOutsideClick: UseOutsideClickType = (action) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        action()
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [action])
+
+  return { ref }
+}
diff --git a/utils/use-outside-click/src/use-outside-click.interfaces.ts b/utils/use-outside-click/src/use-outside-click.interfaces.ts
new file mode 100644
index 00000000..f243b398
--- /dev/null
+++ b/utils/use-outside-click/src/use-outside-click.interfaces.ts
@@ -0,0 +1 @@
+export type UseOutsideClickType = (action: VoidFunction) => { ref: React.RefObject<HTMLDivElement> }
diff --git a/yarn.lock b/yarn.lock
index 573a21dc..edc70203 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1073,6 +1073,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@atls-utils/use-outside-click@workspace:utils/use-outside-click":
+  version: 0.0.0-use.local
+  resolution: "@atls-utils/use-outside-click@workspace:utils/use-outside-click"
+  dependencies:
+    "@types/react": "npm:18.2.48"
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  languageName: unknown
+  linkType: soft
+
 "@atls-utils/use-popover@workspace:utils/use-popover":
   version: 0.0.0-use.local
   resolution: "@atls-utils/use-popover@workspace:utils/use-popover"