mui · siriwatknp · Sep 13, 2021 · Aug 12, 2021 · Aug 12, 2021 · Aug 12, 2021
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -64,9 +64,13 @@ module.exports = {
       config.externals = [
         (ctx, callback) => {
           const { request } = ctx;
-          const hasDependencyOnRepoPackages = ['notistack', '@material-ui/data-grid'].includes(
-            request,
-          );
+          const hasDependencyOnRepoPackages = [
+            'notistack',
+            '@mui/x-data-grid',
+            '@mui/x-data-grid-pro',
+            '@mui/x-data-grid-generator',
+            '@material-ui/x-license',
+          ].includes(request);
 
           if (hasDependencyOnRepoPackages) {
             return callback(null);
@@ -106,7 +110,8 @@ module.exports = {
           // transpile 3rd party packages with dependencies in this repository
           {
             test: /\.(js|mjs|jsx)$/,
-            include: /node_modules(\/|\\)(notistack|@material-ui(\/|\\)data-grid)/,
+            include:
+              /node_modules(\/|\\)(notistack|@mui(\/|\\)x-data-grid|@mui(\/|\\)x-data-grid-pro|@mui(\/|\\)x-license-pro|@mui(\/|\\)x-data-grid-generator)/,
             use: {
               loader: 'babel-loader',
               options: {

diff --git a/docs/package.json b/docs/package.json
@@ -30,7 +30,9 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.15",
-    "@material-ui/data-grid": "^4.0.0-alpha.37",
+    "@mui/x-data-grid": "^4.0.0",
+    "@mui/x-data-grid-pro": "^4.0.0",
+    "@mui/x-data-grid-generator": "^4.0.0",
     "@mui/core": "5.0.0-alpha.45",
     "@mui/docs": "5.0.0-rc.0",
     "@mui/icons-material": "5.0.0-rc.0",

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -1,3 +1,11 @@
+/* eslint-disable import/first */
+import { LicenseInfo } from '@mui/x-data-grid-pro';
+
+// Remove the license warning from demonstration purposes
+LicenseInfo.setLicenseKey(
+  '0f94d8b65161817ca5d7f7af8ac2f042T1JERVI6TVVJLVN0b3J5Ym9vayxFWFBJUlk9MTY1NDg1ODc1MzU1MCxLRVlWRVJTSU9OPTE=',
+);
+
 import 'docs/src/modules/components/bootstrap';
 // --- Post bootstrap -----
 import * as React from 'react';

diff --git a/docs/pages/branding/x-advanced.tsx b/docs/pages/branding/x-advanced.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Head from 'docs/src/modules/components/Head';
+import CssBaseline from '@mui/material/CssBaseline';
+import BrandingProvider from 'docs/src/BrandingProvider';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import XHero from 'docs/src/components/productX/XHero';
+import XComponents from 'docs/src/components/productX/XComponents';
+import XDataGrid from 'docs/src/components/productX/XDataGrid';
+import XTheming from 'docs/src/components/productX/XTheming';
+import XRoadmap from 'docs/src/components/productX/XRoadmap';
+import References, { ADVANCED_CUSTOMERS } from 'docs/src/components/home/References';
+import AppFooter from 'docs/src/layouts/AppFooter';
+
+export default function Home() {
+  return (
+    <BrandingProvider>
+      <Head
+        title="MUI: Performant advanced components."
+        description="We are kicking it off with the most powerful Data Grid on the market and there's a lot more to come. Build complex applications with our advanced components."
+      />
+      <CssBaseline />
+      <AppHeader />
+      <main>
+        <XHero />
+        <References companies={ADVANCED_CUSTOMERS} />
+        <XComponents />
+        <XDataGrid />
+        <XTheming />
+        <XRoadmap />
+      </main>
+      <AppFooter />
+    </BrandingProvider>
+  );
+}
diff --git a/docs/public/static/branding/companies/boeing-dark.svg b/docs/public/static/branding/companies/boeing-dark.svg
diff --git a/docs/public/static/branding/companies/boeing-light.svg b/docs/public/static/branding/companies/boeing-light.svg
diff --git a/docs/public/static/branding/companies/deloitte-dark.svg b/docs/public/static/branding/companies/deloitte-dark.svg