diff --git a/.changeset/hungry-rings-live.md b/.changeset/hungry-rings-live.md
new file mode 100644
index 0000000000..b1c94af784
--- /dev/null
+++ b/.changeset/hungry-rings-live.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Removed client directive as they are not needed in React 18.
diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx
index b85b33190d..cb7c0df626 100644
--- a/canon-docs/src/app/(docs)/components/icon/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon/page.mdx
@@ -1,5 +1,4 @@
 import { PropsTable } from '@/components/PropsTable';
-import { icons } from '@backstage/canon';
 import { IconPreview } from '@/snippets/icon';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
@@ -44,7 +43,7 @@ Icons are used to represent an action or a state.
 <PropsTable
   data={{
     name: {
-      type: Object.keys(icons),
+      type: 'icon',
       responsive: false,
     },
     size: {
diff --git a/canon-docs/src/components/CodeBlock/client.tsx b/canon-docs/src/components/CodeBlock/client.tsx
new file mode 100644
index 0000000000..27f5bc1a02
--- /dev/null
+++ b/canon-docs/src/components/CodeBlock/client.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { CodeBlockProps } from '.';
+import { Text } from '../../../../packages/canon';
+import styles from './styles.module.css';
+
+export const CodeBlockClient = ({
+  out,
+  title,
+}: {
+  out: string;
+  title?: CodeBlockProps['title'];
+}) => {
+  return (
+    <div className={styles.codeBlock}>
+      {title && (
+        <div className={styles.title}>
+          <Text variant="body">{title}</Text>
+        </div>
+      )}
+      <div dangerouslySetInnerHTML={{ __html: out }} className={styles.code} />
+    </div>
+  );
+};
diff --git a/canon-docs/src/components/CodeBlock/index.tsx b/canon-docs/src/components/CodeBlock/index.tsx
index bbcf4d63da..4c0fe72960 100644
--- a/canon-docs/src/components/CodeBlock/index.tsx
+++ b/canon-docs/src/components/CodeBlock/index.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
 import type { BundledLanguage } from 'shiki';
 import { codeToHtml } from 'shiki';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import styles from './styles.module.css';
+import { CodeBlockClient } from './client';
 
-interface CodeBlockProps {
+export interface CodeBlockProps {
   lang?: BundledLanguage;
   title?: string;
   code?: string;
@@ -19,14 +17,5 @@ export async function CodeBlock({ lang = 'tsx', title, code }: CodeBlockProps) {
     },
   });
 
-  return (
-    <div className={styles.codeBlock}>
-      {title && (
-        <div className={styles.title}>
-          <Text variant="body">{title}</Text>
-        </div>
-      )}
-      <div dangerouslySetInnerHTML={{ __html: out }} className={styles.code} />
-    </div>
-  );
+  return <CodeBlockClient out={out} title={title} />;
 }
diff --git a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
index 6d3a727333..8401cafd78 100644
--- a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+++ b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
@@ -1,6 +1,7 @@
+'use client';
+
+import { Icon, Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { Icon } from '../../../../packages/canon/src/components/Icon';
 
 interface BaseUIProps {
   href: string;
diff --git a/canon-docs/src/components/IconLibrary/IconLibrary.tsx b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
index b8ca8acdea..be666fc896 100644
--- a/canon-docs/src/components/IconLibrary/IconLibrary.tsx
+++ b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
@@ -13,12 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use client';
 
-import React from 'react';
-import { Icon } from '../../../../packages/canon/src/components/Icon';
-import type { IconNames } from '../../../../packages/canon/src/components/Icon';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { icons } from '../../../../packages/canon/src/components/Icon/icons';
+import { Text, Icon, icons } from '../../../../packages/canon';
+import type { IconNames } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {
diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx
index 555df84903..69bff9ffe6 100644
--- a/canon-docs/src/components/PropsTable/PropsTable.tsx
+++ b/canon-docs/src/components/PropsTable/PropsTable.tsx
@@ -1,6 +1,8 @@
-import React from 'react';
+'use client';
+
 import * as Table from '../Table';
 import { Chip } from '../Chip';
+import { icons } from '../../../../packages/canon';
 
 // Define a more specific type for the data object
 type PropData = {
@@ -33,7 +35,9 @@ export const PropsTable = <T extends Record<string, PropData>>({
               <div
                 style={{ display: 'flex', flexWrap: 'wrap', gap: '0.375rem' }}
               >
-                {Array.isArray(data[n].type) ? (
+                {data[n].type === 'icon' ? (
+                  Object.keys(icons).map(icon => <Chip key={icon}>{icon}</Chip>)
+                ) : Array.isArray(data[n].type) ? (
                   data[n].type.map(t => <Chip key={t}>{t}</Chip>)
                 ) : (
                   <Chip>{data[n].type}</Chip>
diff --git a/canon-docs/src/components/Snippet/index.tsx b/canon-docs/src/components/Snippet/index.tsx
index 2c7c4c5a02..e1af88cb12 100644
--- a/canon-docs/src/components/Snippet/index.tsx
+++ b/canon-docs/src/components/Snippet/index.tsx
@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { CodeBlock } from '../CodeBlock';
-import { Text } from '../../../../packages/canon/src/components/Text';
 import { Collapsible } from '@base-ui-components/react/collapsible';
 import styles from './styles.module.css';
 
@@ -31,7 +30,7 @@ export const Snippet = ({
           {preview}
         </div>
         <Collapsible.Trigger className={styles.trigger}>
-          <Text variant="body">View code</Text>
+          View code
         </Collapsible.Trigger>
       </div>
       <Collapsible.Panel className={styles.panel}>
diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css
index 65bdc62d05..dc892e099c 100644
--- a/canon-docs/src/components/Snippet/styles.module.css
+++ b/canon-docs/src/components/Snippet/styles.module.css
@@ -33,6 +33,7 @@
   right: 16px;
   bottom: 12px;
   cursor: pointer;
+  font-size: 14px;
 }
 
 [data-theme='dark'] .previewContent {
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index 41dfadf2ea..cdf9ddd63c 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
-import { Text } from '../../../../packages/canon/src/components/Text';
 
 export const Root = ({
   className,
diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx
index 182eaa03b4..5eb16edbfe 100644
--- a/canon-docs/src/mdx-components.tsx
+++ b/canon-docs/src/mdx-components.tsx
@@ -6,7 +6,6 @@ import { Box } from '../../packages/canon/src/components/Box';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
-    // Allows customizing built-in components, e.g. to add styling.
     h1: ({ children }) => (
       <Box style={{ marginTop: '4rem' }}>
         <h1
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
index 4c14880e48..e801d85641 100644
--- a/canon-docs/src/snippets/field.tsx
+++ b/canon-docs/src/snippets/field.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Input, Field } from '../../../packages/canon';
 
 export const FieldPreview = () => {
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
index d320f3a24a..69d0b62b7f 100644
--- a/canon-docs/src/snippets/input.tsx
+++ b/canon-docs/src/snippets/input.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Input, Grid } from '../../../packages/canon';
 
 export const InputPreview = () => {
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index c44d81dc15..abdd027bf0 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import clsx from 'clsx';
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index fd1158f3e3..6c16f32ffd 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx
index 610b3ae86e..c761d0d104 100644
--- a/packages/canon/src/components/Icon/Icon.tsx
+++ b/packages/canon/src/components/Icon/Icon.tsx
@@ -14,8 +14,6 @@
  * 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/Input/Input.tsx b/packages/canon/src/components/Input/Input.tsx
index c07f13fabe..5eb68e7bf4 100644
--- a/packages/canon/src/components/Input/Input.tsx
+++ b/packages/canon/src/components/Input/Input.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { ElementRef, forwardRef } from 'react';
 import { Input as InputPrimitive } from '@base-ui-components/react/input';
 import clsx from 'clsx';
diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx
index 0606b2cd4c..1d490bc0ef 100644
--- a/packages/canon/src/components/Text/Text.tsx
+++ b/packages/canon/src/components/Text/Text.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';
diff --git a/packages/canon/src/contexts/canon.tsx b/packages/canon/src/contexts/canon.tsx
index 7091413fd3..69a9e30b6f 100644
--- a/packages/canon/src/contexts/canon.tsx
+++ b/packages/canon/src/contexts/canon.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { createContext, ReactNode, useContext } from 'react';
 import { icons } from '../components/Icon/icons';
 import { IconMap, IconNames } from '../components/Icon/types';