mui · DiegoAndai · Feb 4, 2025 · Feb 3, 2025 · Feb 3, 2025 · Feb 3, 2025
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -133,7 +133,7 @@ jobs:
             - run:
                 name: '`pnpm dedupe` was run?'
                 command: |
-                  # #default-branch-switch
+                  # #target-branch-reference
                   if [[ $(git diff --name-status master | grep -E 'pnpm-workspace\.yaml|pnpm-lock.yaml|package\.json') == "" ]];
                   then
                       echo "No changes to dependencies detected. Skipping..."
@@ -926,9 +926,10 @@ workflows:
           filters:
             branches:
               only:
+                # #target-branch-reference
                 - master
-                - next
                 - v5.x
+                - v6.x
     jobs:
       - test_unit:
           <<: *default-context
@@ -976,8 +977,9 @@ workflows:
           filters:
             branches:
               only:
+                # #target-branch-reference
                 - master
-                - next
+                - v6.x
     jobs:
       - test_unit:
           <<: *default-context
@@ -1003,8 +1005,9 @@ workflows:
           filters:
             branches:
               only:
+                # #target-branch-reference
                 - master
-                - next
+                - v6.x
     jobs:
       - test_types_next:
           <<: *default-context

diff --git a/.github/workflows/maintenance.yml b/.github/workflows/maintenance.yml
@@ -4,15 +4,17 @@ on:
   # So that PRs touching the same files as the push are updated
   push:
     branches:
+      # #target-branch-reference
       - master
-      - next
+      - v6.x
   # So that the `dirtyLabel` is removed if conflicts are resolved
   # Could put too much strain on rate limit
   # If we hit the rate limit too often remove this event
   pull_request_target:
     branches:
+      # #target-branch-reference
       - master
-      - next
+      - v6.x
     types: [synchronize]
 
 permissions: {}

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -70,7 +70,7 @@ cd material-ui
 git remote add upstream https://github.com/mui/material-ui.git
 ```
 
-<!-- #default-branch-switch -->
+<!-- #target-branch-reference -->
 
 3. Synchronize your local `master` branch with the upstream one:
 
@@ -144,7 +144,7 @@ If any of these checks fail, refer to [Checks and how to fix them](#checks-and-h
 
 Make sure the following is true:
 
-<!-- #default-branch-switch -->
+<!-- #target-branch-reference -->
 
 - The branch is targeted at `master` for ongoing development. All tests are passing. Code that lands in `master` must be compatible with the latest stable release. It may contain additional features but no breaking changes. We should be able to release a new minor version from the tip of `master` at any time.
 - If a feature is being added:

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 <!-- markdownlint-disable-next-line -->
 <p align="center">
   <a href="https://next.mui.com/core/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
@@ -108,6 +108,8 @@ For how-to questions that don't involve making changes to the code base, please
 
 ## Examples
 
+<!-- #repo-reference -->
+
 Our documentation features [a collection of example projects](https://github.com/mui/material-ui/tree/master/examples).
 
 ## Premium templates

diff --git a/docs/data/material/components/about-the-lab/about-the-lab.md b/docs/data/material/components/about-the-lab/about-the-lab.md
@@ -19,7 +19,7 @@ For a component to be ready to move to the core, the following criteria are cons
 
 To install and save in your `package.json` dependencies, run one of the following commands:
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 <codeblock storageKey="package-manager">
 

diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md
@@ -26,7 +26,7 @@ You can [search the full list of these icons](/material-ui/material-icons/).
 
 Run one of the following commands to install it and save it to your `package.json` dependencies:
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 <codeblock storageKey="package-manager">
 ```bash npm

diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md
@@ -18,7 +18,7 @@ includes the 2,100+ official [Material Icons](https://fonts.google.com/icons?ico
 It depends on `@mui/material`, which requires Emotion packages.
 Use one of the following commands to install it:
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 <codeblock storageKey="package-manager">
 

diff --git a/docs/data/material/customization/dark-mode/dark-mode.md b/docs/data/material/customization/dark-mode/dark-mode.md
@@ -175,6 +175,8 @@ Use the `theme.applyStyles()` utility to apply styles for a specific mode.
 
 We recommend using this function over checking `theme.palette.mode` to switch between styles as it has more benefits:
 
+<!-- #repo-reference -->
+
 - It can be used with [Pigment CSS](https://github.com/mui/material-ui/tree/master/packages/pigment-css-react), our in-house zero-runtime CSS-in-JS solution.
 - It is generally more readable and maintainable.
 - It is slightly more performant as it doesn't require to do style recalculation but the bundle size of SSR generated styles is larger.

diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md
@@ -149,6 +149,8 @@ const theme = createTheme({
 
 {{"demo": "ManuallyProvideCustomColor.js", "defaultCodeOpen": false}}
 
+<!-- #repo-reference -->
+
 If you need to manipulate colors, `@mui/material/styles` provides [a set of utilities](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/index.d.ts#L52-L67) to help with this.
 The following example uses the `alpha()` and `getContrastRatio()` utilities to define tokens using opacity:
 

diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md
@@ -4,6 +4,8 @@
 
 ## Official integrations
 
+<!-- #repo-reference -->
+
 The following integration examples are available in the [`/examples`](https://github.com/mui/material-ui/tree/master/examples) folder of the Material UI GitHub repository.
 These examples feature Material UI paired with other popular React libraries and frameworks, so you can skip the initial setup steps and jump straight into building.
 

diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md
@@ -6,7 +6,7 @@
 
 Run one of the following commands to add Material UI to your project:
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 <codeblock storageKey="package-manager">
 
@@ -156,7 +156,7 @@ For instance, via Google Web Fonts:
 
 You can start using Material UI right away with minimal front-end infrastructure by installing it via CDN, which is a great option for rapid prototyping.
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 Follow [this CDN example](https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn) to get started.
 

diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md
@@ -13,7 +13,7 @@ You don't need to provide any JavaScript polyfill as it manages unsupported brow
 | :----- | :------ | :----- | :------------- | :----------- |
 | >= 121 | >= 115  | >= 109 | >= 15.4        | >= 15.4      |
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 An extensive list can be found in our [.browserlistrc](https://github.com/mui/material-ui/blob/-/.browserslistrc#L12-L27) (check the `stable` entry).
 

diff --git a/docs/data/material/getting-started/templates/blog/README.md b/docs/data/material/getting-started/templates/blog/README.md
@@ -2,14 +2,14 @@
 
 ## Usage
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 1. Copy these folders (`blog` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, markdown-to-jsx.
 3. Import and use the `Blog` component.
 
 ## Demo
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
 View the demo at https://next.mui.com/material-ui/getting-started/templates/blog/.
diff --git a/docs/data/material/getting-started/templates/checkout/README.md b/docs/data/material/getting-started/templates/checkout/README.md
@@ -2,14 +2,14 @@
 
 ## Usage
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 1. Copy these folders (`checkout` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @emotion/styled, @emotion/react.
 3. Import and use the `Checkout` component.
 
 ## Demo
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
 View the demo at https://next.mui.com/material-ui/getting-started/templates/checkout/.
diff --git a/docs/data/material/getting-started/templates/dashboard/README.md b/docs/data/material/getting-started/templates/dashboard/README.md
@@ -2,14 +2,14 @@
 
 ## Usage
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 1. Copy these folders (`dashboard` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, @mui/x-charts, @mui/x-date-pickers, @mui/x-data-grid, @mui/x-tree-view, dayjs
 3. Import and use the `Dashboard` component.
 
 ## Demo
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
 View the demo at https://next.mui.com/material-ui/getting-started/templates/dashboard/.
diff --git a/docs/data/material/getting-started/templates/marketing-page/README.md b/docs/data/material/getting-started/templates/marketing-page/README.md
@@ -2,14 +2,14 @@
 
 ## Usage
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 1. Copy these folders (`marketing-page` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `MarketingPage` component.
 
 ## Demo
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
 View the demo at https://next.mui.com/material-ui/getting-started/templates/marketing-page/.
diff --git a/docs/data/material/getting-started/templates/sign-in-side/README.md b/docs/data/material/getting-started/templates/sign-in-side/README.md
@@ -2,14 +2,14 @@
 
 ## Usage
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 1. Copy these folders (`sign-in-side` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `SignInSide` component.
 
 ## Demo
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
 View the demo at https://next.mui.com/material-ui/getting-started/templates/sign-in-side/.
diff --git a/docs/data/material/getting-started/templates/sign-in/README.md b/docs/data/material/getting-started/templates/sign-in/README.md
@@ -2,14 +2,14 @@
 
 ## Usage
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 1. Copy these folders (`sign-in` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `SignIn` component.
 
 ## Demo
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
 View the demo at https://next.mui.com/material-ui/getting-started/templates/sign-in/.
diff --git a/docs/data/material/getting-started/templates/sign-up/README.md b/docs/data/material/getting-started/templates/sign-up/README.md
@@ -2,14 +2,14 @@
 
 ## Usage
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 1. Copy these folders (`sign-up` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `SignUp` component.
 
 ## Demo
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
 View the demo at https://next.mui.com/material-ui/getting-started/templates/sign-up/.
diff --git a/docs/data/material/guides/localization/localization.md b/docs/data/material/guides/localization/localization.md
@@ -96,7 +96,7 @@ The [Data Grid and Data Grid Pro](/x/react-data-grid/) components have their own
 | Urdu (Pakistan)         | ur-PK               | `urPK`      |
 | Vietnamese              | vi-VN               | `viVN`      |
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 You can [find the source](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/locale/index.ts) in the GitHub repository.
 

diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md
@@ -4,7 +4,7 @@
 
 ## Minimum configuration
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 Material UI requires a minimum version of TypeScript 4.7. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts) example.
 

diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
@@ -272,7 +272,7 @@ export default function GlobalCssSliderDeep() {
 By default, Material UI components come with Emotion as their style engine.
 If, however, you would like to use styled-components, you can configure your app by following the [styled-components guide](/material-ui/integrations/styled-components/) or starting with one of the example projects:
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 - [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
 - [Create React App with styled-components and TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
@@ -580,6 +580,8 @@ It works exactly like styled components. You can [use the same guide](/material-
 
 ### Setup
 
+<!-- #repo-reference -->
+
 If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
 If you use a different framework, or already have set up your project, follow these steps:
 

diff --git a/docs/data/material/integrations/styled-components/styled-components.md b/docs/data/material/integrations/styled-components/styled-components.md
@@ -30,7 +30,7 @@ To use styled-components, you need to configure your bundler to replace it with
 
 If you're using yarn, you can configure it using a package resolution:
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```diff title="package.json"
  {
@@ -100,7 +100,7 @@ For TypeScript, you must also update the `tsconfig.json` as shown here:
 
 We provide boilerplate examples of Create React App with Material UI and styled-components in both JavaScript and TypeScript:
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 - [Material UI + CRA + styled-components (JavaScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
 - [Material UI + CRA + styled-components (TypeScript)](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)

diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md
@@ -16,7 +16,7 @@ See the [v5 migration docs](/material-ui/migration/migrating-from-jss/) for deta
 
 To install and save in your `package.json` dependencies, run:
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npm install @mui/styles@next

diff --git a/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md b/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
@@ -189,6 +189,8 @@ Now, the Button's `backgroundColor`, `borderColor` and text `color` values will
 For framework- or language-specific setup instructions, see [CSS theme variables—Usage—Server-side rendering](/material-ui/customization/css-theme-variables/usage/).
 For framework or language specific setup, see [this](/material-ui/customization/css-theme-variables/usage/)
 
+<!-- #repo-reference -->
+
 See the complete usage of `createCssVarsProvider` in [Material UI](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/ThemeProviderWithVars.tsx) and [Joy UI](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/CssVarsProvider.tsx).
 
 ## API

diff --git a/docs/data/system/getting-started/installation/installation.md b/docs/data/system/getting-started/installation/installation.md
@@ -39,7 +39,7 @@ Please note that [react](https://www.npmjs.com/package/react) is a peer dependen
 MUI System uses [Emotion](https://emotion.sh/docs/introduction) as its default styling engine.
 If you want to use [styled-components](https://styled-components.com/) instead, run one of the following commands:
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 <codeblock storageKey="package-manager">
 

diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md
@@ -156,7 +156,7 @@ Runtime performance takes a hit.
 | c. Render 1,000 styled components | `<StyledDiv>`         |           181ms |
 | d. Render 1,000 Box               | `<Box sx={…}>`        |           296ms |
 
-<!-- #default-branch-switch -->
+<!-- #repo-reference -->
 
 Visit the [benchmark folder](https://github.com/mui/material-ui/tree/master/benchmark/browser) for a reproduction of the metrics above.
 

diff --git a/docs/next.config.ts b/docs/next.config.ts
@@ -189,7 +189,7 @@ export default withDocsInfra({
     // docs-infra
     LIB_VERSION: pkg.version,
     SOURCE_CODE_REPO: 'https://github.com/mui/material-ui',
-    SOURCE_GITHUB_BRANCH: 'master', // #default-branch-switch
+    SOURCE_GITHUB_BRANCH: 'master', // #target-branch-reference
     GITHUB_TEMPLATE_DOCS_FEEDBACK: '4.docs-feedback.yml',
     BUILD_ONLY_ENGLISH_LOCALE: String(buildOnlyEnglishLocale),
     // MUI Core related