From 0e1c72576ecd4eeddd71e3536a3c88b99388dbf4 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 23 Jan 2026 22:01:38 +0000
Subject: [PATCH] Fixes client vs server side

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 docs-ui/src/components/Theming/index.tsx | 50 ++++++++++++++++--------
 docs-ui/src/utils/definitions.ts         | 11 ++++++
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/docs-ui/src/components/Theming/index.tsx b/docs-ui/src/components/Theming/index.tsx
index d06f51348b..f47e86306a 100644
--- a/docs-ui/src/components/Theming/index.tsx
+++ b/docs-ui/src/components/Theming/index.tsx
@@ -1,11 +1,16 @@
-import { MDXRemote } from 'next-mdx-remote-client/rsc';
-import { formattedMDXComponents } from '@/mdx-components';
-import type {
-  ComponentDefinition,
-  DataAttributeValues,
-} from '../../../../packages/ui/src/types';
+'use client';
 
-export function Theming({ definition }: { definition: ComponentDefinition }) {
+import { formattedMDXComponents } from '@/mdx-components';
+import type { DataAttributeValues } from '../../../../packages/ui/src/types';
+
+interface ThemingProps {
+  definition: {
+    classNames: Record<string, string>;
+    dataAttributes?: Record<string, string[]>;
+  };
+}
+
+export function Theming({ definition }: ThemingProps) {
   const classNames = definition.classNames;
   const dataAttributes = definition.dataAttributes;
 
@@ -33,15 +38,28 @@ export function Theming({ definition }: { definition: ComponentDefinition }) {
     ...Object.values(classNames).slice(1),
   ];
 
+  // Use the same styled components from MDX
+  const H2 = formattedMDXComponents.h2!;
+  const P = formattedMDXComponents.p!;
+  const Ul = formattedMDXComponents.ul!;
+  const Li = formattedMDXComponents.li!;
+  const Code = formattedMDXComponents.code!;
+
   return (
-    <MDXRemote
-      components={formattedMDXComponents}
-      source={`## Theming
-
-        Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
-
-        ${classNamesArray.map(selector => `- \`${selector}\``).join('\n')}
-      `}
-    />
+    <div>
+      <H2>Theming</H2>
+      <P>
+        Our theming system is based on a mix between CSS classes, CSS variables
+        and data attributes. If you want to customise this component, you can
+        use one of these class names below.
+      </P>
+      <Ul>
+        {classNamesArray.map((selector, index) => (
+          <Li key={index}>
+            <Code>{selector}</Code>
+          </Li>
+        ))}
+      </Ul>
+    </div>
   );
 }
diff --git a/docs-ui/src/utils/definitions.ts b/docs-ui/src/utils/definitions.ts
index d279d73775..452a519980 100644
--- a/docs-ui/src/utils/definitions.ts
+++ b/docs-ui/src/utils/definitions.ts
@@ -1 +1,12 @@
+'use client';
+
+/**
+ * Client-side re-export of UI component definitions.
+ *
+ * The 'use client' directive here creates a boundary that prevents Next.js
+ * from analyzing the transitive dependencies (hooks) during SSR/SSG.
+ *
+ * This allows the UI package to remain pure and free of Next.js-specific
+ * directives while still working correctly in the Next.js App Router.
+ */
 export * from '../../../packages/ui/src/definitions';