From b37a87c3551be5cfb002b6690759d18172c670cd Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 1 Aug 2025 13:30:46 +0300
Subject: [PATCH] docs: fix code block titles not showing in UI docs (#13119)

---
 www/apps/ui/contentlayer.config.ts | 8 ++++++++
 www/apps/ui/package.json           | 1 +
 www/yarn.lock                      | 1 +
 3 files changed, 10 insertions(+)

diff --git a/www/apps/ui/contentlayer.config.ts b/www/apps/ui/contentlayer.config.ts
index d3c6ad5043..ff3d27f5df 100644
--- a/www/apps/ui/contentlayer.config.ts
+++ b/www/apps/ui/contentlayer.config.ts
@@ -4,6 +4,7 @@ import { defineDocumentType, makeSource } from "contentlayer/source-files"
 import rehypeSlug from "rehype-slug"
 import { uiRehypePlugin } from "../../packages/remark-rehype-plugins/src"
 import { ExampleRegistry } from "./src/registries/example-registry"
+import rehypeMdxCodeProps from "rehype-mdx-code-props"
 
 export const Doc = defineDocumentType(() => ({
   name: "Doc",
@@ -38,6 +39,13 @@ export default makeSource({
         },
       ],
       [rehypeSlug],
+      [
+        // @ts-expect-error issue with type compatibility
+        rehypeMdxCodeProps,
+        {
+          tagName: "code",
+        },
+      ],
     ],
     mdxOptions: (options) => {
       return {
diff --git a/www/apps/ui/package.json b/www/apps/ui/package.json
index 21a6220025..eb8d39bc32 100644
--- a/www/apps/ui/package.json
+++ b/www/apps/ui/package.json
@@ -33,6 +33,7 @@
     "postcss": "8.4.27",
     "react": "rc",
     "react-dom": "rc",
+    "rehype-mdx-code-props": "^3.0.1",
     "rehype-slug": "^6.0.0",
     "remark": "^14.0.3",
     "slugify": "^1.6.6",
diff --git a/www/yarn.lock b/www/yarn.lock
index 07772c40b0..07b8b96560 100644
--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -16618,6 +16618,7 @@ turbo@latest:
     react: rc
     react-docgen: ^7.1.0
     react-dom: rc
+    rehype-mdx-code-props: ^3.0.1
     rehype-slug: ^6.0.0
     remark: ^14.0.3
     remark-rehype-plugins: "*"