mui · alexfauquette · Apr 9, 2026
diff --git a/docs/next.config.ts b/docs/next.config.ts
@@ -195,7 +195,7 @@ export default withDocsInfra({
   },
   // Ensure CSS from the Data Grid packages is included in the build:
   // https://github.com/mui/mui-x/issues/17427#issuecomment-2813967605
-  transpilePackages: ['@mui/x-data-grid', '@mui/x-data-grid-pro', '@mui/x-data-grid-premium'],
+  transpilePackages: ['@mui/x-data-grid', '@mui/x-data-grid-pro', '@mui/x-data-grid-premium', '@mui/docs-shared-assets'],
   distDir: 'export',
   // Next.js provides a `defaultPathMap` argument, we could simplify the logic.
   // However, we don't in order to prevent any regression in the `findPages()` method.

diff --git a/docs/package.json b/docs/package.json
@@ -3,7 +3,8 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "build": "rimraf ./export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192 next build && pnpm build-sw && pnpm link-check",
+    "build": "pnpm copy-sponsors && rimraf ./export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192 next build && pnpm build-sw && pnpm link-check",
+    "copy-sponsors": "node ./scripts/copySponsorsImages.js",
     "build:clean": "rimraf .next && pnpm build",
     "build-sw": "node ./scripts/buildServiceWorker.js",
     "dev": "next dev",
@@ -49,6 +50,7 @@
     "@mui/x-date-pickers-pro": "9.0.0",
     "@mui/x-license": "9.0.0",
     "@mui/x-tree-view": "9.0.0",
+    "@mui/docs-shared-assets": "git+https://github.com/alexfauquette/shared-docs#70d70e84711a0e11bc754379452e60c5399e8f71",
     "@popperjs/core": "^2.11.8",
     "@react-spring/web": "^10.0.3",
     "@tailwindcss/postcss": "^4.2.2",

diff --git a/docs/scripts/copySponsorsImages.js b/docs/scripts/copySponsorsImages.js
@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+
+const SOURCE_DIR = path.join(
+  __dirname,
+  '../../node_modules/@mui/docs-shared-assets/sponsors',
+);
+const OUTPUT_DIR = path.join(__dirname, '../public/static/sponsors');
+
+if (!fs.existsSync(OUTPUT_DIR)) {
+  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+}
+
+const files = fs.readdirSync(SOURCE_DIR).filter((file) => file.endsWith('.svg'));
+
+for (const file of files) {
+  fs.copyFileSync(path.join(SOURCE_DIR, file), path.join(OUTPUT_DIR, file));
+}
+
+console.log(`Copied ${files.length} sponsor images to ${OUTPUT_DIR}`);
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "docs:build": "pnpm docs:llms:build && pnpm --filter docs build",
     "docs:build-sw": "pnpm --filter docs build-sw",
     "docs:build-color-preview": "babel-node scripts/buildColorTypes",
-    "docs:deploy": "pnpm --filter docs run deploy",
+    "docs:deploy": "pnpm --filter docs run deploy", 
     "docs:dev": "pnpm --filter docs dev",
     "docs:icons": "pnpm --filter docs icons",
     "docs:size-why": "cross-env DOCS_STATS_ENABLED=true pnpm docs:build",
@@ -104,6 +104,7 @@
     "@mui/internal-test-utils": "2.0.18-canary.18",
     "@mui/material": "workspace:^",
     "@mui/utils": "workspace:^",
+    "@mui/docs-shared-assets": "git+https://github.com/alexfauquette/shared-docs",
     "@next/eslint-plugin-next": "15.5.14",
     "@octokit/rest": "22.0.1",
     "@pigment-css/react": "0.0.30",

diff --git a/packages-internal/core-docs/package.json b/packages-internal/core-docs/package.json
@@ -42,6 +42,7 @@
     "@mui-internal/api-docs-builder": "workspace:*",
     "@mui/icons-material": "workspace:*",
     "@mui/material": "workspace:*",
+    "@mui/docs-shared-assets": "git+https://github.com/alexfauquette/shared-docs",
     "@types/chai": "5.2.3",
     "@types/fg-loadcss": "3.1.3",
     "@types/gtag.js": "0.0.20",

diff --git a/packages-internal/core-docs/src/AppLayout/navigation/DiamondSponsors.tsx b/packages-internal/core-docs/src/AppLayout/navigation/DiamondSponsors.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Link } from '@mui/internal-core-docs/Link';
 import { useTranslate } from '@mui/internal-core-docs/i18n';
+import * as X from '@mui/docs-shared-assets/sponsors';
 
 const NativeLink = styled('a')(({ theme }) => ({
   boxSizing: 'border-box', // TODO have CssBaseline in the Next.js layout
@@ -52,94 +53,73 @@ export function DiamondSponsors() {
           borderRadius: '12px 12px 0 0',
         })}
       >
-        <NativeLink
-          data-ga-event-category="sponsor"
-          data-ga-event-action="docs-premium"
-          data-ga-event-label="doit.com"
-          href="https://www.doit.com/?utm_source=mui.com&utm_medium=referral"
-          rel="noopener sponsored"
-          target="_blank"
-        >
-          <Box
-            component="img"
-            src="/static/sponsors/doit-light.svg"
-            alt="doit"
-            title="Management Platform for Google Cloud and AWS"
-            loading="lazy"
-            sx={[
-              {
-                height: '29px',
-                width: '70px',
-              },
-              (theme) =>
-                theme.applyDarkStyles({
-                  content: `url(/static/sponsors/doit-dark.svg)`,
-                }),
-            ]}
-          />
-        </NativeLink>
-        <NativeLink
-          data-ga-event-category="sponsor"
-          data-ga-event-action="docs-premium"
-          data-ga-event-label="formengine.io"
-          href="https://formengine.io/lightweight-react-json-schema-form-builder-library-for-mui?utm_source=mui&utm_medium=sponsor&utm_campaign=mui&utm_content=stop-manually&utm_term=smartway"
-          rel="noopener sponsored"
-          target="_blank"
-        >
-          <Box
-            component="img"
-            src="/static/sponsors/formengine-light.svg"
-            alt="formengine"
-            title="Build forms with MUI the smart way!"
-            loading="lazy"
-            sx={[
-              {
-                height: '23.2px',
-                width: 'auto',
-                maxWidth: '100%',
-              },
-              (theme) =>
-                theme.applyDarkStyles({
-                  content: `url(/static/sponsors/formengine-dark.svg)`,
-                }),
-            ]}
-          />
-        </NativeLink>
+        {X.DIAMOND_SPONSORS.map((sponsor) => (
+          <NativeLink
+            data-ga-event-category="sponsor"
+            data-ga-event-action="docs-premium"
+            data-ga-event-label="doit.com"
+            href={sponsor.href}
+            rel="noopener sponsored"
+            target="_blank"
+          >
+            <Box
+              component="img"
+              src={sponsor.src}
+              alt={sponsor.description}
+              title={sponsor.description}
+              loading="lazy"
+              sx={[
+                {
+                  height: sponsor.logoHeight,
+                  width: sponsor.logoWidth,
+                },
+                sponsor.srcDark
+                  ? (theme) =>
+                      theme.applyDarkStyles({
+                        content: `url(${sponsor.srcDark})`,
+                      })
+                  : {},
+              ]}
+            />
+          </NativeLink>
+        ))}
       </Stack>
-      <Link
-        href="/material-ui/discover-more/backers/#diamond-sponsors"
-        sx={(theme) => ({
-          height: 45,
-          width: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          border: '1px dashed',
-          borderColor: (theme.vars || theme).palette.grey[300],
-          borderRadius: '0 0 12px 12px',
-          backgroundColor: alpha(theme.palette.primary[50], 0.4),
-          transition: theme.transitions.create(['color', 'background-color']),
-          '&:hover': {
-            backgroundColor: (theme.vars || theme).palette.primary[50],
-            borderColor: (theme.vars || theme).palette.primary[200],
-          },
-          '&:focus-visible': {
-            outlineOffset: '-3px',
-          },
-          ...theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primaryDark[700], 0.3),
-            borderColor: alpha(theme.palette.primaryDark[600], 0.5),
+      {X.DIAMOND_SPONSORS.length < 3 ? (
+        <Link
+          href="/material-ui/discover-more/backers/#diamond-sponsors"
+          sx={(theme) => ({
+            height: 45,
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            border: '1px dashed',
+            borderColor: (theme.vars || theme).palette.grey[300],
+            borderRadius: '0 0 12px 12px',
+            backgroundColor: alpha(theme.palette.primary[50], 0.4),
+            transition: theme.transitions.create(['color', 'background-color']),
             '&:hover': {
-              backgroundColor: alpha(theme.palette.primary[700], 0.1),
-              borderColor: alpha(theme.palette.primary[600], 0.4),
+              backgroundColor: (theme.vars || theme).palette.primary[50],
+              borderColor: (theme.vars || theme).palette.primary[200],
             },
-          }),
-        })}
-      >
-        <Typography variant="caption" sx={{ fontWeight: 'medium' }}>
-          {t('becomeADiamondSponsor')}
-        </Typography>
-      </Link>
+            '&:focus-visible': {
+              outlineOffset: '-3px',
+            },
+            ...theme.applyDarkStyles({
+              backgroundColor: alpha(theme.palette.primaryDark[700], 0.3),
+              borderColor: alpha(theme.palette.primaryDark[600], 0.5),
+              '&:hover': {
+                backgroundColor: alpha(theme.palette.primary[700], 0.1),
+                borderColor: alpha(theme.palette.primary[600], 0.4),
+              },
+            }),
+          })}
+        >
+          <Typography variant="caption" sx={{ fontWeight: 'medium' }}>
+            {t('becomeADiamondSponsor')}
+          </Typography>
+        </Link>
+      ) : null}
     </Stack>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml