diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
new file mode 100644
index 00000000000000..e3c2b903f487b0
--- /dev/null
+++ b/docs/data/base/components/button/button.md
@@ -0,0 +1,17 @@
+---
+product: base
+title: React button unstyled
+githubLabel: 'component: button'
+---
+
+# Button unstyled
+
+<p class="description">Buttons allow users to take actions, and make choices, with a single tap.</p>
+
+## Basic usage
+
+## Customizing the root element
+
+## Complex customization
+
+## `useButton` hook
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index ee8cbea2427260..633c849de3744b 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -11,6 +11,11 @@ const pages = [
     title: 'Components',
     icon: 'ToggleOnIcon',
     children: [
+      {
+        pathname: '/base/components/inputs',
+        subheader: 'inputs',
+        children: [{ pathname: '/base/react-button', title: 'Button' }],
+      },
       {
         pathname: '/base/components/navigation',
         subheader: 'navigation',
diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
new file mode 100644
index 00000000000000..385dd06130f672
--- /dev/null
+++ b/docs/data/joy/components/button/button.md
@@ -0,0 +1,22 @@
+---
+product: joy-ui
+title: React Button component
+---
+
+# Button
+
+<p class="description">Buttons allow users to take actions, and make choices, with a single tap.</p>
+
+## Variants
+
+## Colors
+
+## Sizes
+
+## Icon
+
+## Loading
+
+## Upload
+
+## Third-party routing library
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
new file mode 100644
index 00000000000000..61830dafd73109
--- /dev/null
+++ b/docs/data/joy/pages.ts
@@ -0,0 +1,14 @@
+const pages = [
+  {
+    pathname: '/joy-ui/react-',
+    title: 'Components',
+    icon: 'ToggleOnIcon',
+    children: [
+      {
+        pathname: '/joy-ui/react-button',
+      },
+    ],
+  },
+];
+
+export default pages;
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 49a12c4826bd5c..2c57e4217a74f7 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -16,6 +16,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import pages from 'docs/src/pages';
 import basePages from 'docs/data/base/pages';
 import materialPages from 'docs/data/material/pages';
+import joyPages from 'docs/data/joy/pages';
 import systemPages from 'docs/data/system/pages';
 import PageContext from 'docs/src/modules/components/PageContext';
 import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
@@ -191,6 +192,9 @@ function AppWrapper(props) {
   if (asPathWithoutLang.startsWith('/material-ui')) {
     productPages = materialPages;
   }
+  if (asPathWithoutLang.startsWith('/joy-ui')) {
+    productPages = joyPages;
+  }
   if (asPathWithoutLang.startsWith('/system') && FEATURE_TOGGLE.enable_system_scope) {
     productPages = systemPages;
   }
diff --git a/docs/pages/base/react-button.js b/docs/pages/base/react-button.js
new file mode 100644
index 00000000000000..a62bb10d3e2ea3
--- /dev/null
+++ b/docs/pages/base/react-button.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/data/base/components/button/button.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}
diff --git a/docs/pages/joy-ui/react-button.js b/docs/pages/joy-ui/react-button.js
new file mode 100644
index 00000000000000..a315fc8b316528
--- /dev/null
+++ b/docs/pages/joy-ui/react-button.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/data/joy/components/button/button.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}
diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
index 500dd74fc805a8..c7ba945cbb194d 100644
--- a/docs/src/featureToggle.js
+++ b/docs/src/featureToggle.js
@@ -9,4 +9,5 @@ module.exports = {
   enable_redirects: false, // related to new structure change
   enable_mui_base_scope: true, // will be enabled after the migration
   enable_system_scope: false, // will be enabled after the migration
+  enable_joy_scope: true,
 };
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 86043af6de9797..592cfa670f7cdb 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -30,6 +30,7 @@ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import materialPkgJson from '../../../../packages/mui-material/package.json';
 import basePkgJson from '../../../../packages/mui-base/package.json';
 import systemPkgJson from '../../../../packages/mui-system/package.json';
+import joyPkgJson from '../../../../packages/mui-joy/package.json';
 
 const savedScrollTop = {};
 
@@ -188,16 +189,22 @@ function ProductDrawerButton(props) {
           />
           <LinksWrapper>
             <Link
-              href={ROUTES.baseDocs}
+              href={ROUTES.materialDocs}
               // eslint-disable-next-line material-ui/no-hardcoded-labels
             >
-              MUI Base <KeyboardArrowRight fontSize="small" />
+              Material UI <KeyboardArrowRight fontSize="small" />
             </Link>
             <Link
-              href={ROUTES.materialDocs}
+              href={ROUTES.joyDocs}
               // eslint-disable-next-line material-ui/no-hardcoded-labels
             >
-              Material UI <KeyboardArrowRight fontSize="small" />
+              Joy UI <KeyboardArrowRight fontSize="small" />
+            </Link>
+            <Link
+              href={ROUTES.baseDocs}
+              // eslint-disable-next-line material-ui/no-hardcoded-labels
+            >
+              MUI Base <KeyboardArrowRight fontSize="small" />
             </Link>
             <Link
               href={ROUTES.systemDocs}
@@ -428,6 +435,7 @@ function AppNavDrawer(props) {
     const isProductScoped =
       router.asPath.startsWith('/x') ||
       router.asPath.startsWith('/material-ui') ||
+      router.asPath.startsWith('/joy-ui') ||
       (router.asPath.startsWith('/system') && FEATURE_TOGGLE.enable_system_scope) ||
       router.asPath.startsWith('/base');
 
@@ -571,6 +579,15 @@ function AppNavDrawer(props) {
                 ])}
               />
             )}
+            {router.asPath.startsWith('/joy-ui/') && (
+              <ProductIdentifier
+                name="Joy UI"
+                metadata="MUI Core"
+                versionSelector={renderVersionSelector([
+                  { text: `v${joyPkgJson.version}`, current: true },
+                ])}
+              />
+            )}
             {router.asPath.startsWith('/system/') && FEATURE_TOGGLE.enable_system_scope && (
               <ProductIdentifier
                 name="MUI System"
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 2735c4520afecc..00ca152290d375 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -5,6 +5,7 @@ import ReactDOMServer from 'react-dom/server';
 import PropTypes from 'prop-types';
 import NextLink from 'next/link';
 import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
+import Chip from '@mui/material/Chip';
 import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
 import ToggleOffRoundedIcon from '@mui/icons-material/ToggleOffRounded';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
@@ -19,6 +20,7 @@ import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
 import { useRouter } from 'next/router';
 import { isNewLocation } from 'docs/src/modules/utils/replaceUrl';
+import getUrlProduct from 'docs/src/modules/utils/getUrlProduct';
 
 const SearchButton = styled('button')(({ theme }) => {
   return {
@@ -156,17 +158,44 @@ const NewStartScreen = () => {
 function DocSearcHit(props) {
   const { children, hit } = props;
 
+  function displayTag(pathname) {
+    if (!pathname.match(/^\/(material-ui|joy-ui|base|x\/(react-data-grid|api))\//)) {
+      return null;
+    }
+    let text = '';
+    if (pathname.startsWith('/material-ui/')) {
+      text = 'Material UI';
+    }
+    if (pathname.startsWith('/joy-ui/')) {
+      text = 'Joy UI';
+    }
+    if (pathname.startsWith('/base/')) {
+      text = 'MUI Base';
+    }
+    return <Chip label={text} size="small" sx={{ mr: 1 }} />;
+  }
+
   if (hit.pathname) {
     return (
-      <Link href={hit.pathname} as={hit.as}>
+      <Link
+        href={hit.pathname}
+        as={hit.as}
+        sx={{ display: 'flex !important', '& .DocSearch-Hit-Container': { flex: 1, minWidth: 0 } }}
+      >
         {children}
+        {displayTag(hit.pathname)}
       </Link>
     );
   }
 
   // DocSearch stores the old results in its cache
   // hit.pathname won't be defined for them.
-  return <Link href={hit.url}>{children}</Link>;
+  return (
+    <Link href={hit.url}>
+      {children}
+      {displayTag(hit.pathname)}
+    </Link>
+  );
 }
 
 DocSearcHit.propTypes = {
@@ -193,6 +222,7 @@ export default function AppSearch() {
   }, [setIsOpen]);
   const router = useRouter();
   const isNewDocStructure = isNewLocation(router.asPath);
+  const productSpace = getUrlProduct(router.asPath);
 
   const keyboardNavigator = {
     navigate({ item }) {
@@ -296,6 +326,7 @@ export default function AppSearch() {
             indexName="material-ui"
             searchParameters={{
               facetFilters: ['version:master', facetFilterLanguage],
+              optionalFilters: isNewDocStructure ? [`product:${productSpace}`] : [],
             }}
             placeholder={search}
             transformItems={(items) => {
diff --git a/docs/src/modules/utils/getUrlProduct.test.js b/docs/src/modules/utils/getUrlProduct.test.js
new file mode 100644
index 00000000000000..11e3610424ff18
--- /dev/null
+++ b/docs/src/modules/utils/getUrlProduct.test.js
@@ -0,0 +1,29 @@
+import { expect } from 'chai';
+import getUrlProduct from './getUrlProduct';
+
+describe('getUrlProduct', () => {
+  it('get material-ui', () => {
+    expect(getUrlProduct('/material-ui/react-button/')).to.equal('material-ui');
+    expect(getUrlProduct('/zh/material-ui/react-button/')).to.equal('material-ui');
+  });
+
+  it('get base', () => {
+    expect(getUrlProduct('/base/react-button-unstyled/')).to.equal('base');
+    expect(getUrlProduct('/zh/base/react-button-unstyled/')).to.equal('base');
+  });
+
+  it('get joy-ui', () => {
+    expect(getUrlProduct('/joy-ui/react-button/')).to.equal('joy-ui');
+    expect(getUrlProduct('/zh/joy-ui/react-button/')).to.equal('joy-ui');
+  });
+
+  it('get data-grid', () => {
+    expect(getUrlProduct('/x/react-data-grid/components')).to.equal('data-grid');
+    expect(getUrlProduct('/zh/x/react-data-grid/components')).to.equal('data-grid');
+  });
+
+  it('get date-picker', () => {
+    expect(getUrlProduct('/x/react-date-picker/components')).to.equal('date-picker');
+    expect(getUrlProduct('/zh/x/react-date-picker/components')).to.equal('date-picker');
+  });
+});
diff --git a/docs/src/modules/utils/getUrlProduct.ts b/docs/src/modules/utils/getUrlProduct.ts
new file mode 100644
index 00000000000000..7570e9bd939f30
--- /dev/null
+++ b/docs/src/modules/utils/getUrlProduct.ts
@@ -0,0 +1,7 @@
+export default function getUrlProduct(asPath: string) {
+  const urlWithoutLang = asPath.replace(/^\/[a-zA-Z]{2}\//, '/');
+  if (urlWithoutLang.startsWith('/x')) {
+    return urlWithoutLang.replace('/x/react-', '').replace(/\/.*/, '');
+  }
+  return urlWithoutLang.replace(/^\/([^/]+)\/.*/, '$1');
+}
diff --git a/docs/src/modules/utils/replaceHtmlLinks.ts b/docs/src/modules/utils/replaceHtmlLinks.ts
index 828be6dccc0fec..ae5074c64f7888 100644
--- a/docs/src/modules/utils/replaceHtmlLinks.ts
+++ b/docs/src/modules/utils/replaceHtmlLinks.ts
@@ -74,6 +74,7 @@ export default function replaceHtmlLinks(html: string, asPath: string) {
   asPath = asPath.replace(/^\/[a-z]{2}\//, '/');
   if (
     asPath.startsWith('/material-ui/') ||
+    asPath.startsWith('/joy-ui/') ||
     asPath.startsWith('/x/') ||
     asPath.startsWith('/base/') ||
     (FEATURE_TOGGLE.enable_system_scope && asPath.startsWith('/system'))
diff --git a/docs/src/modules/utils/replaceUrl.ts b/docs/src/modules/utils/replaceUrl.ts
index 3f55a07a36f964..ff3dcad848f7a8 100644
--- a/docs/src/modules/utils/replaceUrl.ts
+++ b/docs/src/modules/utils/replaceUrl.ts
@@ -10,6 +10,7 @@ export function isNewLocation(url: string) {
     url.startsWith('/x') ||
     url.startsWith('/material-ui') ||
     url.startsWith('/base') ||
+    url.startsWith('/joy-ui') ||
     (FEATURE_TOGGLE.enable_system_scope && url.startsWith('/system'))
   );
 }
diff --git a/docs/src/route.ts b/docs/src/route.ts
index 3f9c914b28ff0d..97bfdc20058cf5 100644
--- a/docs/src/route.ts
+++ b/docs/src/route.ts
@@ -12,6 +12,7 @@ const ROUTES = {
   handbook: 'https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b',
   baseDocs: '/base/getting-started/installation/',
   materialDocs: '/material-ui/getting-started/installation/',
+  joyDocs: '/joy-ui/react-button/',
   systemDocs: '/system/basics/',
   materialIcons: FEATURE_TOGGLE.enable_redirects
     ? '/material-ui/material-icons/'