diff --git a/.changeset/react-error-boundary.md b/.changeset/react-error-boundary.md
new file mode 100644
index 0000000000..53b088dd02
--- /dev/null
+++ b/.changeset/react-error-boundary.md
@@ -0,0 +1,5 @@
+---
+'@embeddedchat/react': patch
+---
+
+Added React Error Boundaries to prevent application crashes on component errors.
diff --git a/packages/react/src/views/ChatLayout/ChatLayout.js b/packages/react/src/views/ChatLayout/ChatLayout.js
index d3202a4faa..920031a9fe 100644
--- a/packages/react/src/views/ChatLayout/ChatLayout.js
+++ b/packages/react/src/views/ChatLayout/ChatLayout.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useCallback } from 'react';
 import { Box, useComponentOverrides } from '@embeddedchat/ui-elements';
+import { ErrorBoundary } from '../ErrorBoundary';
 import styles from './ChatLayout.styles';
 import {
   useChannelStore,
@@ -143,17 +144,21 @@ const ChatLayout = () => {
       onDrop={(e) => handleDragDrop(e)}
     >
       <Box css={styles.chatMain}>
-        <ChatBody
-          anonymousMode={anonymousMode}
-          showRoles={showRoles}
-          messageListRef={messageListRef}
-          scrollToBottom={scrollToBottom}
-          clearUnreadDividerRef={clearUnreadDividerRef}
-        />
-        <ChatInput
-          scrollToBottom={scrollToBottom}
-          clearUnreadDividerRef={clearUnreadDividerRef}
-        />
+        <ErrorBoundary>
+          <ChatBody
+            anonymousMode={anonymousMode}
+            showRoles={showRoles}
+            messageListRef={messageListRef}
+            scrollToBottom={scrollToBottom}
+            clearUnreadDividerRef={clearUnreadDividerRef}
+          />
+        </ErrorBoundary>
+        <ErrorBoundary>
+          <ChatInput
+            scrollToBottom={scrollToBottom}
+            clearUnreadDividerRef={clearUnreadDividerRef}
+          />
+        </ErrorBoundary>
         <div id="emoji-popup" />
       </Box>
 
diff --git a/packages/react/src/views/EmbeddedChat.js b/packages/react/src/views/EmbeddedChat.js
index 237fdb5a3f..7d90e43173 100644
--- a/packages/react/src/views/EmbeddedChat.js
+++ b/packages/react/src/views/EmbeddedChat.js
@@ -31,6 +31,8 @@ import { styles } from './EmbeddedChat.styles';
 import GlobalStyles from './GlobalStyles';
 import { overrideECProps } from '../lib/overrideECProps';
 
+import { ErrorBoundary } from './ErrorBoundary';
+
 const EmbeddedChat = (props) => {
   const [remoteOverrides, setRemoteOverrides] = useState({});
 
@@ -288,37 +290,39 @@ const EmbeddedChat = (props) => {
 
   return (
     <ThemeProvider theme={resolvedTheme} mode={dark ? 'dark' : 'light'}>
-      <RCInstanceProvider value={RCContextValue}>
-        <Box
-          css={[
-            styles.embeddedchat(resolvedTheme, dark),
-            css`
-              width: ${width};
-              height: ${height};
-              position: relative;
-            `,
-            fullScreen && styles.fullscreen,
-          ]}
-          className={`ec-embedded-chat ${className} ${classNames}`}
-          style={{ ...style, ...styleOverrides }}
-        >
-          <GlobalStyles />
-          <ToastBarProvider position={toastBarPosition}>
-            {hideHeader ? null : (
-              <ChatHeader
-                isClosable={isClosable}
-                setClosableState={setClosableState}
-                fullScreen={fullScreen}
-                setFullScreen={setFullScreen}
-              />
-            )}
+      <ErrorBoundary>
+        <RCInstanceProvider value={RCContextValue}>
+          <Box
+            css={[
+              styles.embeddedchat(resolvedTheme, dark),
+              css`
+                width: ${width};
+                height: ${height};
+                position: relative;
+              `,
+              fullScreen && styles.fullscreen,
+            ]}
+            className={`ec-embedded-chat ${className} ${classNames}`}
+            style={{ ...style, ...styleOverrides }}
+          >
+            <GlobalStyles />
+            <ToastBarProvider position={toastBarPosition}>
+              {hideHeader ? null : (
+                <ChatHeader
+                  isClosable={isClosable}
+                  setClosableState={setClosableState}
+                  fullScreen={fullScreen}
+                  setFullScreen={setFullScreen}
+                />
+              )}
 
-            <ChatLayout />
+              <ChatLayout />
 
-            <div id="overlay-items" />
-          </ToastBarProvider>
-        </Box>
-      </RCInstanceProvider>
+              <div id="overlay-items" />
+            </ToastBarProvider>
+          </Box>
+        </RCInstanceProvider>
+      </ErrorBoundary>
     </ThemeProvider>
   );
 };
diff --git a/packages/react/src/views/ErrorBoundary/ErrorBoundary.js b/packages/react/src/views/ErrorBoundary/ErrorBoundary.js
new file mode 100644
index 0000000000..282e7ee532
--- /dev/null
+++ b/packages/react/src/views/ErrorBoundary/ErrorBoundary.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Button, Icon } from '@embeddedchat/ui-elements';
+import { styles } from './ErrorBoundary.styles';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Box css={styles.errorContainer}>
+          <Icon name="report" size="3rem" color="#ff5050" css={styles.icon} />
+          <h2 css={styles.heading}>Something went wrong.</h2>
+          <p css={styles.text}>
+            The application encountered an unexpected error.
+          </p>
+          <Box css={styles.buttons}>
+            <Button onClick={() => this.setState({ hasError: false })}>
+              Try Again
+            </Button>
+            <Button onClick={() => window.location.reload()} type="primary">
+              Reload Page
+            </Button>
+          </Box>
+        </Box>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.node,
+};
+
+export default ErrorBoundary;
diff --git a/packages/react/src/views/ErrorBoundary/ErrorBoundary.styles.js b/packages/react/src/views/ErrorBoundary/ErrorBoundary.styles.js
new file mode 100644
index 0000000000..0efdc456f3
--- /dev/null
+++ b/packages/react/src/views/ErrorBoundary/ErrorBoundary.styles.js
@@ -0,0 +1,31 @@
+import { css } from '@emotion/react';
+
+export const styles = {
+  errorContainer: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: 2rem;
+    text-align: center;
+    background-color: inherit;
+    color: inherit;
+  `,
+  icon: css`
+    margin-bottom: 1rem;
+  `,
+  heading: css`
+    margin-bottom: 0.5rem;
+    font-size: 1.25rem;
+  `,
+  text: css`
+    margin-bottom: 1.5rem;
+    opacity: 0.8;
+  `,
+  buttons: css`
+    display: flex;
+    gap: 1rem;
+  `,
+};
diff --git a/packages/react/src/views/ErrorBoundary/ErrorBoundary.test.js b/packages/react/src/views/ErrorBoundary/ErrorBoundary.test.js
new file mode 100644
index 0000000000..0d1906991c
--- /dev/null
+++ b/packages/react/src/views/ErrorBoundary/ErrorBoundary.test.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ErrorBoundary } from './index';
+
+const ProblemChild = () => {
+  throw new Error('Test Error');
+};
+
+describe('ErrorBoundary', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    console.error.mockRestore();
+  });
+
+  test('renders children if no error', () => {
+    render(
+      <ErrorBoundary>
+        <div data-testid="child">Child Content</div>
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  test('renders fallback UI on error and logs error', () => {
+    render(
+      <ErrorBoundary>
+        <ProblemChild />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
+    expect(console.error).toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/src/views/ErrorBoundary/index.js b/packages/react/src/views/ErrorBoundary/index.js
new file mode 100644
index 0000000000..e5d6dda21a
--- /dev/null
+++ b/packages/react/src/views/ErrorBoundary/index.js
@@ -0,0 +1 @@
+export { default as ErrorBoundary } from './ErrorBoundary';