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/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/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';