diff --git a/www/packages/docs-ui/src/components/CodeTabs/index.tsx b/www/packages/docs-ui/src/components/CodeTabs/index.tsx
index 35df69d0118f0..20e6d3e7891a9 100644
--- a/www/packages/docs-ui/src/components/CodeTabs/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeTabs/index.tsx
@@ -53,6 +53,36 @@ export const CodeTabs = ({
     return "source" in typedProps
   }
 
+  const getCodeBlockProps = (
+    codeBlock: React.ReactElement<
+      unknown,
+      string | React.JSXElementConstructor<any>
+    >
+  ): CodeBlockProps | undefined => {
+    if (typeof codeBlock.props !== "object" || !codeBlock.props) {
+      return undefined
+    }
+
+    if ("source" in codeBlock.props) {
+      return codeBlock.props as CodeBlockProps
+    }
+
+    if (
+      "children" in codeBlock.props &&
+      typeof codeBlock.props.children === "object" &&
+      codeBlock.props.children
+    ) {
+      return getCodeBlockProps(
+        codeBlock.props.children as React.ReactElement<
+          unknown,
+          string | React.JSXElementConstructor<any>
+        >
+      )
+    }
+
+    return undefined
+  }
+
   const tabs: CodeTab[] = useMemo(() => {
     const tempTabs: CodeTab[] = []
     Children.forEach(children, (child) => {
@@ -79,10 +109,19 @@ export const CodeTabs = ({
 
       const codeBlockProps = codeBlock.props as CodeBlockProps
 
+      const modifiedProps: CodeBlockProps = {
+        ...(getCodeBlockProps(codeBlock) || {
+          source: "",
+        }),
+        badgeLabel: undefined,
+        hasTabs: true,
+        className: clsx("!my-0", codeBlockProps.className),
+      }
+
       tempTabs.push({
         label: typedChildProps.label,
         value: typedChildProps.value,
-        codeProps: codeBlockProps,
+        codeProps: modifiedProps,
         codeBlock: {
           ...codeBlock,
           props: {
@@ -91,14 +130,7 @@ export const CodeTabs = ({
               ...(typeof codeBlockProps.children === "object"
                 ? codeBlockProps.children
                 : {}),
-              props: {
-                ...(React.isValidElement(codeBlockProps.children)
-                  ? (codeBlockProps.children.props as Record<string, unknown>)
-                  : {}),
-                badgeLabel: undefined,
-                hasTabs: true,
-                className: clsx("!my-0", codeBlockProps.className),
-              },
+              props: modifiedProps,
             },
           },
         },
diff --git a/www/packages/docs-ui/src/components/Npm2YarnCode/index.tsx b/www/packages/docs-ui/src/components/Npm2YarnCode/index.tsx
index 1592c6f678510..6ff09ede8b30d 100644
--- a/www/packages/docs-ui/src/components/Npm2YarnCode/index.tsx
+++ b/www/packages/docs-ui/src/components/Npm2YarnCode/index.tsx
@@ -13,6 +13,7 @@ export const Npm2YarnCode = ({ npmCode, ...rest }: Npm2YarnCodeProps) => {
   const lang = "bash"
 
   const { title = "", ...codeOptions } = rest
+  codeOptions.hasTabs = true
 
   const tabs = [
     {