diff --git a/packages/ui/src/hooks/index.ts b/packages/ui/src/hooks/index.ts
index 119f8e5..cce26e9 100644
--- a/packages/ui/src/hooks/index.ts
+++ b/packages/ui/src/hooks/index.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @stylistic/padding-line-between-statements */
 export { useBoolean } from './use-boolean';
 export { useDisclosure } from './use-disclosure';
+export { useLayoutEffect } from './use-layout-effect';
 export { usePosition, type Placement } from './use-position';
 export { useScroll } from './use-scroll';
 export { useWindowDimension } from './use-window-dimension';
diff --git a/packages/ui/src/hooks/use-layout-effect.ts b/packages/ui/src/hooks/use-layout-effect.ts
new file mode 100644
index 0000000..3b0f3f5
--- /dev/null
+++ b/packages/ui/src/hooks/use-layout-effect.ts
@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect as useReactLayoutEffect } from 'react';
+
+export const useLayoutEffect =
+  typeof globalThis?.document !== 'undefined'
+    ? useReactLayoutEffect
+    : useEffect;