diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index 6c747c1583..6299ea7aef 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -14,16 +14,6 @@ import Divider from '@/app/components/base/divider'
 import { searchEmoji } from '@/utils/emoji'
 import cn from '@/utils/classnames'
 
-declare global {
-  // eslint-disable-next-line ts/no-namespace
-  namespace JSX {
-    // eslint-disable-next-line ts/consistent-type-definitions
-    interface IntrinsicElements {
-      'em-emoji': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
-    }
-  }
-}
-
 init({ data })
 
 const backgroundColors = [
diff --git a/web/global.d.ts b/web/global.d.ts
index eb39fe0c39..20b84a5327 100644
--- a/web/global.d.ts
+++ b/web/global.d.ts
@@ -1,3 +1,6 @@
+import './types/i18n'
+import './types/jsx'
+
 declare module 'lamejs';
 declare module 'lamejs/src/js/MPEGMode';
 declare module 'lamejs/src/js/Lame';
@@ -9,4 +12,4 @@ declare module '*.mdx' {
   export default MDXComponent
 }
 
-import './types/i18n'
+export {}
diff --git a/web/types/jsx.d.ts b/web/types/jsx.d.ts
new file mode 100644
index 0000000000..41f1b63250
--- /dev/null
+++ b/web/types/jsx.d.ts
@@ -0,0 +1,13 @@
+// TypeScript type definitions for custom JSX elements
+// Custom JSX elements for emoji-mart web components
+
+import 'react'
+
+declare module 'react' {
+  namespace JSX {
+    // eslint-disable-next-line ts/consistent-type-definitions
+    interface IntrinsicElements {
+      'em-emoji': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+    }
+  }
+}