diff --git a/README.md b/README.md
index 6f3362dea052..2a2e74287018 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ The community isn't contributing improvements as fast as the problems deserved t
We are using a commercial license to forward the development of the most advanced features, where the MIT model can't sustain it.
A feature should only be commercial if it has no great MIT alternatives.
-Find more details [on the docs](https://mui.com/x/advanced-components/#licenses).
+Find more details [in the docs](https://mui.com/x/introduction/licensing/).
- [DataGrid](https://mui.com/components/data-grid/), published under `@mui/x-data-grid`, MIT licensed.
- [DataGridPro](https://mui.com/components/data-grid/#commercial-version), published under `@mui/x-data-grid-pro`, commercially licensed.
diff --git a/docs/data/advanced-components/overview.md b/docs/data/advanced-components/overview.md
deleted file mode 100644
index 63c382fb1179..000000000000
--- a/docs/data/advanced-components/overview.md
+++ /dev/null
@@ -1,211 +0,0 @@
----
-title: Overview
----
-
-# MUI X - Overview
-
-MUI X is a collection of advanced UI components for complex use cases.
-
-## Licenses
-
-> While [MUI Core](/core/) is entirely licensed under MIT, [MUI X](/x/) serves a part of its components as MIT and the rest under a commercial license.
-> You will need to purchase a license to access features that are only available with the Pro and Premium Plans.
-> See [Pricing](https://mui.com/pricing/) for details.
-
-### MIT vs. commercial
-
-_How do we decide if a feature is MIT or commercial?_
-
-We have been building MIT React components since 2014,
-and have learned much about the strengths and weaknesses of the MIT license model.
-The health of this model is improving every day.
-As the community grows, it increases the probability that developers contribute improvements to the project.
-You can find our pledge to nurture the MIT licensed content on [this Stewardship page](https://mui-org.notion.site/Stewardship-542a2226043d4f4a96dfb429d16cf5bd).
-
-However, we believe that we have reached the sustainability limits of what the model can support for advancing our mission forward.
-We have seen too many MIT licensed components moving slowly or getting abandoned.
-The community isn't contributing improvements as fast as the problems deserved to be solved.
-
-We are using a commercial license to forward the development of the most advanced features, where the MIT model can't sustain it.
-A feature should only be commercial if it has no great MIT alternatives.
-
-The detailed feature comparison is available on the [Pricing](https://mui.com/pricing/) page.
-
-### Community Plan
-
-MUI X's Community Plan is published under [MIT license](https://tldrlegal.com/license/mit-license) and [free forever](https://mui-org.notion.site/Stewardship-542a2226043d4f4a96dfb429d16cf5bd#20f609acab4441cf9346614119fbbac1).
-This plan contains features we believe are sustainable by the contributions of the open-source community.
-
-Community Plan packages:
-
-- [`@mui/x-data-grid`](https://www.npmjs.com/package/@mui/x-data-grid)
-- [`@mui/x-date-pickers`](https://www.npmjs.com/package/@mui/x-date-pickers)
-
-### Pro Plan
-
-The MUI X Pro Plan expands on the limitations of the Community Plan with more advanced features such as multi-filtering, multi-sorting, column resizing and column pinning.
-
-The Pro Plan is available under a commercial license—visit the [Pricing](https://mui.com/pricing/) page for details.
-This plan contains the features that are at the limit of what the open-source model can sustain.
-For instance, providing support for handling massive amounts of data, in a flexible data grid integrated with a comprehensive set of components.
-
-Pro Plan packages:
-
-- [`@mui/x-data-grid-pro`](https://www.npmjs.com/package/@mui/x-data-grid-pro)
-- [`@mui/x-date-pickers-pro`](https://www.npmjs.com/package/@mui/x-date-pickers-pro)
-
-The features exclusive to the Pro Plan are marked with the icon across our documentation.
-
-
-
-
-
-
-
-
-
-
Install the necessary packages to start building with MUI X components.
+
+MUI X packages are available through the free MIT-licensed Community Plan, or the commercially-licensed Pro and Premium Plans.
+See [the licensing page](/x/introduction/licensing/) for complete details.
+
+## Peer dependencies
+
+MUI X components have a peer dependency on `@mui/material`: the installation [instructions](/material-ui/getting-started/installation/).
+
+## Components
+
+Note that you only need to install the packages corresponding to the components you're using—e.g. data grid users don't need to install date and time pickers.
+
+### Data grid
+
+The installation [instructions](/x/react-data-grid/getting-started/#installation).
+
+### Date and Time pickers
+
+The installation [instructions](/x/react-date-pickers/getting-started/#setup).
diff --git a/docs/data/introduction/licensing/licensing.md b/docs/data/introduction/licensing/licensing.md
new file mode 100644
index 000000000000..244a08f148fb
--- /dev/null
+++ b/docs/data/introduction/licensing/licensing.md
@@ -0,0 +1,192 @@
+# Licensing
+
+MUI X is an open-core, MIT-licensed library. Purchase a commercial license for advanced features and support.
+
+## MIT vs. commercial licenses
+
+MUI has been building MIT-licensed React components since 2014, and we are committed to the continued advancement of the open-source libraries.
+Anything we release under an MIT license will remain MIT-licensed forever.
+You can learn more about our stewardship ethos in [this document from our company handbook](https://mui-org.notion.site/Stewardship-542a2226043d4f4a96dfb429d16cf5bd).
+
+We offer commercial licenses to developers who need the most advanced features that cannot be easily maintained by the open-source community.
+Commercial licenses enable us to support a full-time staff of engineers, which is simply not possible through the MIT model.
+
+Rest assured that when we release features commercially, it's only because we believe that you will not find a better MIT-licensed alternative anywhere else.
+
+See the [Pricing](https://mui.com/pricing/) page for a detailed feature comparison.
+
+## Plans
+
+### Community Plan
+
+The free version of MUI X is [published under an MIT license](https://tldrlegal.com/license/mit-license) and is [free forever](https://mui-org.notion.site/Stewardship-542a2226043d4f4a96dfb429d16cf5bd#20f609acab4441cf9346614119fbbac1).
+This version contains features that we believe are maintainable by contributions from the open-source community.
+
+MIT licensed packages:
+
+- [`@mui/x-data-grid`](https://www.npmjs.com/package/@mui/x-data-grid)
+- [`@mui/x-date-pickers`](https://www.npmjs.com/package/@mui/x-date-pickers)
+
+### Pro Plan
+
+The Pro version of MUI X expands on the features of the free version with more advanced capabilities such as multi-filtering, multi-sorting, column resizing and column pinning for the data grid; as well as the date range picker component.
+
+The Pro version is available under a commercial license—visit [the Pricing page](https://mui.com/pricing/) for details.
+
+Pro packages:
+
+- [`@mui/x-data-grid-pro`](https://www.npmjs.com/package/@mui/x-data-grid-pro)
+- [`@mui/x-date-pickers-pro`](https://www.npmjs.com/package/@mui/x-date-pickers-pro)
+
+:::info
+The features exclusive to the Pro version are marked with the icon throughout the documentation.
+:::
+
+### Premium Plan
+
+The Premium version of MUI X covers the most advanced features of the data grid, such as row grouping, Excel export, and aggregation, in addition to everything that's included in the Pro Plan.
+
+The Premium version is available under a commercial license—visit [the Pricing page](https://mui.com/pricing/) for details.
+
+Premium package:
+
+- [`@mui/x-data-grid-premium`](https://www.npmjs.com/package/@mui/x-data-grid-premium)
+
+:::info
+The features exclusive to the Premium version are marked with the icon throughout the documentation.
+:::
+
+## Upgrading from Pro to Premium
+
+You can use your Pro license as a credit when purchasing MUI X Premium.
+We'll provide you with a discount based on the remaining time that your current license is valid.
+Please contact us at [sales@mui.com](mailto:sales@mui.com?subject=My%20upgrade%20discount%20to%20Premium) to upgrade.
+
+## Evaluation (trial) licenses
+
+In accordance with our [End User License Agreement](https://mui.com/store/legal/mui-x-eula/#evaluation-trial-licenses), you can use the Pro and Premium components without a commercial license for 30 days without restrictions.
+You don't need to contact us to use these components for evaluation purposes.
+
+You will need to purchase a commercial license in order to remove the watermarks and console warnings, and after the 30-day evaluation period.
+
+## How many developer seats do I need?
+
+The number of seats purchased on your license must correspond to the number of concurrent developers contributing changes to the front-end code of the project that uses MUI X Pro or Premium.
+
+**Example 1.** Company 'A' is developing an application named 'AppA'.
+The app needs to render 10K rows of data in a table and allow users to group, filter, and sort.
+The dev team adds MUI X Pro to the project to satisfy this requirement.
+Five front-end and ten back-end developers are working on 'AppA'.
+Only one developer is tasked with configuring and modifying the data grid.
+The front-end developers and only are contributing code to the front-end.
+Company 'A' purchases five licenses.
+
+**Example 2.** A UI development team at Company 'B' creates its own UI library for
+internal development and includes MUI X Pro as a component.
+The team working on 'AppA' uses the new library and so does the team working on 'AppB'.
+'AppA' has 5 front-end developers and 'AppB' has three.
+There are two front-end developers on the UI development team.
+Company 'B' purchases ten licenses.
+
+This is [the relevant clause in the EULA.](https://mui.com/store/legal/mui-x-eula/#required-quantity-of-licenses)
+
+## License key installation
+
+When you purchase a commercial license, you'll receive a license key by email.
+This key removes all watermarks and console warnings.
+
+:::warning
+Licenses purchased after **May 13, 2022** are only compatible with MUI X `v5.11.0` or later.
+
+Please update your package if you're using an earlier version.
+
+If this isn't possible, please contact sales@mui.com to request a compatible license key.
+:::
+
+### How to install the key
+
+```jsx
+import { LicenseInfo } from '@mui/x-license-pro';
+
+LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');
+```
+
+### Where to install the key
+
+You need to call `setLicenseKey` before React renders the first component.
+You only need to install the key once in your application.
+
+:::info
+When using Next.js, you should call `setLicenseKey` in [`_app.js`](https://nextjs.org/docs/advanced-features/custom-app):
+
+```tsx
+LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');
+
+function MyApp({ Component, pageProps }) {
+ return ;
+}
+
+export default MyApp;
+```
+
+:::
+
+### What is the key for?
+
+The license key is meant to help you [stay compliant](https://mui.com/store/legal/mui-x-eula/#license-key) with the EULA of the commercial licenses.
+While each developer needs to be licensed, the license key is set once per project, where the components are used.
+
+### Security
+
+The license key is checked without making any network requests—it's designed to be public.
+It's expected that the license key will be exposed in a JavaScript bundle;
+we simply ask licensed users not to actively publicize their license key.
+
+### Validation failures
+
+If the validation of the license key fails, the component displays a watermark and provides a console warning in both development and production.
+End users can still use the component.
+
+Here are the different possible validation errors:
+
+#### Missing license key
+
+If the license key is missing, the component will look something like this:
+
+
+
+
+
+
MUI X is a collection of advanced React UI components for complex use cases.
+
+## Introduction
+
+MUI X is a collection of advanced UI components, including a [data grid](/x/react-data-grid/) and [date and time pickers](/x/react-date-pickers/getting-started/).
+
+These components are significantly more complex than the ones found in the MUI Core libraries.
+They feature advanced functionality for data-rich applications and a wide range of other use cases.
+
+:::info
+MUI X is **open core**—base components are MIT-licensed, while more advanced features require a Pro or Premium commercial license.
+See [Licensing](/x/introduction/licensing/) for details.
+
+Throughout the documentation, Pro- and Premium-only features are denoted with the [](https://mui.com/store/items/mui-pro/) and [](https://mui.com/store/items/mui-premium/) icons, respectively.
+:::
+
+## Advantages of MUI X
+
+- **Ship faster:** Our team has invested thousands of hours into these components so you don't have to. Get up and running in a fraction of the time it would take to build from scratch.
+- **Expand on the power of MUI Core**: MUI X components work seamlessly with MUI Core libraries like Material UI, delivering more advanced functionality, but can also be used standalone.
+- **Grow with us:** You can start for free with the MIT-licensed packages, and upgrade to Pro or Premium when you need more advanced features or professional support.
+- **Dedicated maintenance:** MUI X is maintained by a full-time staff of engineers, so you can rest assured that any issues will be addressed in a timely manner.
+- **Professional support (🚧 in the future):** Pro and Premium users will get access to professional support from our team as well as priority for bug fixes and requests.
+
+## MUI X vs. MUI Core
+
+MUI X is a collection of advanced UI components for complex use cases.
+Most of MUI X's components are available for free, but more advanced features require a Pro or Premium commercial license.
+
+MUI Core focuses on empowering the creation of great design systems with React.
+It comes with two themes (Material Design and a in-house one).
+It's about solving design problems.
+It contains foundational UI component libraries like Material UI and MUI Base.
+These libraries are open source, MIT-licensed, and free forever.
+
+MUI X components are fully compatible with MUI Core.
+MUI X can extend the functionality of UIs built with Material UI or MUI Base, but its components can also stand on their own, they can be used with third-parties React component libraries that implement different designs.
+
+You can find [more details](https://mui-org.notion.site/MUI-X-3f8ad249aeca430d81aae5dee947451a#f8e48daaf2fa4902b1415e3708560c0f) about the difference in our handbook.
diff --git a/docs/data/introduction/roadmap/roadmap.md b/docs/data/introduction/roadmap/roadmap.md
new file mode 100644
index 000000000000..38d946bdf5c2
--- /dev/null
+++ b/docs/data/introduction/roadmap/roadmap.md
@@ -0,0 +1,20 @@
+# Roadmap
+
+Find out about our plans for MUI X.
+
+## MUI X roadmap
+
+To learn more about our plans for MUI X, visit the [public roadmap](https://github.com/mui/mui-x/projects/1).
+
+:::warning
+We operate in a dynamic environment,so things are subject to change.
+The information provided is intended to outline the general direction, but is for informational purposes only.
+
+We may decide to add or remove new items at any time, depending on our capability to deliver, while meeting our quality standards.
+The development, releases, and timing of any features or functionality remains at the sole discretion of MUI.
+The roadmap does not represent a commitment, obligation, or promise to deliver at any time.
+:::
+
+## Global roadmap
+
+To learn more about our plans for MUI in general, visit the [global roadmap](/material-ui/discover-more/roadmap/).
diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md
new file mode 100644
index 000000000000..40b01d53be11
--- /dev/null
+++ b/docs/data/introduction/support/support.md
@@ -0,0 +1,31 @@
+# Support
+
+How to get support for MUI X components, including feature requests, bug fixes, answers to how-to questions, and professional support from the team.
+
+## GitHub
+
+We use GitHub issues as a bug and feature request tracker.
+If you think you've found a bug, or you have a new feature idea, please start by [making sure it hasn't already been reported or fixed](https://github.com/mui/mui-x/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed).
+You can search through existing issues and pull requests to see if someone has reported one similar to yours.
+
+[Open an issue](https://github.com/mui/mui-x/issues/new/choose) in the MUI X repo.
+
+## Stack Overflow
+
+Visit Stack Overflow to ask questions and read crowdsourced answers from expert developers in the MUI community, as well as MUI maintainers.
+
+[Post a question about MUI X](https://stackoverflow.com/questions/tagged/mui) on Stack Overflow.
+
+## Professional support
+
+When purchasing a MUI X Pro or Premium license you get access to professional support until the end of your subscription.
+Support is available on multiple channels, but the recommended channels are:
+
+- GitHub: You can [open a new issue](https://github.com/mui/mui-x/issues/new/choose) and leave your Order ID, so we can prioritize accordingly.
+- Email: If you need to share **private information** you can [submit a request](https://support.mui.com/hc/en-us/requests/new?tf_360023797420=mui_x) or send an email to [x@mui.com](mailto:x@mui.com).
+
+Including your Order ID in the issue helps us prioritize the issues based on the following support levels:
+
+1. MUI X Pro: maintainers give these issues more attention than the ones from the community.
+2. MUI X Premium: The same as MUI X Pro, but with higher priority.
+3. MUI X Priority support add-on (coming soon): Provides a 24h SLA for the first answer.
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index 0e89aed1a3bb..754f1d125bb4 100644
--- a/docs/data/pages.ts
+++ b/docs/data/pages.ts
@@ -2,9 +2,16 @@ import type { MuiPage } from '@mui/monorepo/docs/src/MuiPage';
const pages: MuiPage[] = [
{
- pathname: '/x/advanced-components',
- title: 'Overview',
+ pathname: '/x/introduction',
+ scopePathnames: ['/x/introduction'],
icon: 'DescriptionIcon',
+ children: [
+ { pathname: `/x/introduction`, title: 'Overview' },
+ { pathname: `/x/introduction/installation` },
+ { pathname: `/x/introduction/licensing` },
+ { pathname: `/x/introduction/support` },
+ { pathname: `/x/introduction/roadmap` },
+ ],
},
{
pathname: '/x/react-data-grid',
diff --git a/docs/next.config.js b/docs/next.config.js
index 21a8a5e06cfa..b0d1c536acf5 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -159,7 +159,7 @@ module.exports = {
redirects: async () => [
{
source: '/',
- destination: '/x/react-data-grid/',
+ destination: '/x/introduction/',
permanent: false,
},
],
diff --git a/docs/pages/x/advanced-components/index.js b/docs/pages/x/introduction/index.js
similarity index 79%
rename from docs/pages/x/advanced-components/index.js
rename to docs/pages/x/introduction/index.js
index 6410ed8f226d..d553e9f3c6c4 100644
--- a/docs/pages/x/advanced-components/index.js
+++ b/docs/pages/x/introduction/index.js
@@ -4,7 +4,7 @@ import {
demos,
docs,
demoComponents,
-} from 'docsx/data/advanced-components/overview.md?@mui/markdown';
+} from 'docsx/data/introduction/overview/overview.md?@mui/markdown';
export default function Page() {
return ;
diff --git a/docs/pages/x/introduction/installation.js b/docs/pages/x/introduction/installation.js
new file mode 100644
index 000000000000..6722f02a3fd6
--- /dev/null
+++ b/docs/pages/x/introduction/installation.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/introduction/installation/installation.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/x/introduction/licensing.js b/docs/pages/x/introduction/licensing.js
new file mode 100644
index 000000000000..86b24f79b505
--- /dev/null
+++ b/docs/pages/x/introduction/licensing.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/introduction/licensing/licensing.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/x/introduction/roadmap.js b/docs/pages/x/introduction/roadmap.js
new file mode 100644
index 000000000000..526f550f9790
--- /dev/null
+++ b/docs/pages/x/introduction/roadmap.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/introduction/roadmap/roadmap.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/x/introduction/support.js b/docs/pages/x/introduction/support.js
new file mode 100644
index 000000000000..a6fcfcc644bd
--- /dev/null
+++ b/docs/pages/x/introduction/support.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docsx/data/introduction/support/support.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/public/_redirects b/docs/public/_redirects
index e47069d1d78b..8784693388b3 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -1,4 +1,4 @@
-/ /x/advanced-components/
+/ /x/introduction/ 301
# For links that we can't edit later on, e.g. hosted in the code published on npm or sent by email
# should all be prefixed with x-
@@ -6,7 +6,7 @@
/r/x-get-license scope=premium https://mui.com/store/items/mui-x-premium/ 302
/r/x-get-license https://mui.com/pricing/ 302
/r/x-license-eula https://mui.com/store/legal/mui-x-eula/ 302
-/r/x-license-key-installation https://mui.com/x/advanced-components/#license-key-installation 302
+/r/x-license-key-installation https://mui.com/x/introduction/licensing/#license-key-installation 302
/r/x-data-grid-no-dimensions https://mui.com/x/react-data-grid/layout/ 302
# Legacy redirection
@@ -20,6 +20,8 @@
/:lang/x/react-data-grid/group-pivot/ /:lang/x/react-data-grid/tree-data/ 301
/x/react-data-grid/columns/ /x/react-data-grid/column-definition/ 301
/:lang/x/react-data-grid/columns/ /:lang/x/react-data-grid/column-definition/ 301
+/x/advanced-components/ /x/introduction/ 301
+/:lang/x/advanced-components/ /:lang/x/introduction/ 301
# 2023
# Proxies
diff --git a/docs/public/static/x/commercial-header-icon-dark.png b/docs/public/static/x/commercial-header-icon-dark.png
deleted file mode 100644
index 9fda42059556..000000000000
Binary files a/docs/public/static/x/commercial-header-icon-dark.png and /dev/null differ
diff --git a/docs/public/static/x/commercial-header-icon-light.png b/docs/public/static/x/commercial-header-icon-light.png
deleted file mode 100644
index 3b4eb15ce0df..000000000000
Binary files a/docs/public/static/x/commercial-header-icon-light.png and /dev/null differ
diff --git a/packages/x-license-pro/package.json b/packages/x-license-pro/package.json
index d2691cea416b..fc5cc7bb13ee 100644
--- a/packages/x-license-pro/package.json
+++ b/packages/x-license-pro/package.json
@@ -8,7 +8,7 @@
"bugs": {
"url": "https://github.com/mui/mui-x/issues"
},
- "homepage": "https://mui.com/x/advanced-components/",
+ "homepage": "https://mui.com/x/introduction/",
"sideEffects": false,
"publishConfig": {
"access": "public"