[base-ui][docs] Improve Base UI traffic from Material UI (#40875)

Signed-off-by: Olivier Tassinari <[email protected]>
Co-authored-by: Danilo Leal <[email protected]>

packages/markdown/prepareMarkdown.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-irregular-whitespace */
 const fs = require('fs');
 const path = require('path');
 const kebabCase = require('lodash/kebabCase');
@@ -63,7 +64,8 @@ function prepareMarkdown(config) {
       const { filename, markdown, userLanguage } = translation;
       const headers = getHeaders(markdown);
       const location = headers.filename || `/${fileRelativeContext}/${filename}`;
-      const title = headers.title || getTitle(markdown);
+      const markdownH1 = getTitle(markdown);
+      const title = headers.title || markdownH1;
       const description = headers.description || getDescription(markdown);
 
       if (title == null || title === '') {
@@ -102,9 +104,8 @@ function prepareMarkdown(config) {
         contents.push(`
 ## Unstyled
 
-:::success
-[Base UI](/base-ui/) provides a headless ("unstyled") version of this [${title}](${headers.unstyled}). Try it if you need more flexibility in customization and a smaller bundle size.
-:::
+Use the [Base UI ${markdownH1}](${headers.unstyled}) for complete ownership of the component's design, with no Material UI styles to override.
+This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.
         `);
       }