diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index e4166e5c79..4c06e93214 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+'use client';
+
 import React, { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import { ButtonProps } from './types';
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 04ce6bcdfa..1095a18844 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+'use client';
+
 import React, { forwardRef } from 'react';
 import { HeadingProps } from './types';
 import { useCanon } from '../../contexts/canon';
diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx
index 1df46c8a78..d4dbf601e3 100644
--- a/packages/canon/src/components/Icon/Icon.tsx
+++ b/packages/canon/src/components/Icon/Icon.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+'use client';
+
 import React from 'react';
 import { useCanon } from '../../contexts/canon';
 import type { IconProps } from './types';
diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx
index 3af01f92f9..ad778ba0a7 100644
--- a/packages/canon/src/components/Text/Text.tsx
+++ b/packages/canon/src/components/Text/Text.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+'use client';
+
 import React, { forwardRef } from 'react';
 import { TextProps } from './types';
 import { useCanon } from '../../contexts/canon';
diff --git a/packages/canon/src/contexts/canon.tsx b/packages/canon/src/contexts/canon.tsx
index a8c21e8fa9..a7e9f73bc8 100644
--- a/packages/canon/src/contexts/canon.tsx
+++ b/packages/canon/src/contexts/canon.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+'use client';
+
 import React, { createContext, useContext, ReactNode } from 'react';
 import { IconMap, IconNames } from '../components/Icon/types';
 import { defaultIcons } from '../components/Icon/icons';