` to the root slot:
```jsx
@@ -45,7 +45,7 @@ The code snippet below shows how to override this by assigning a `
` to the
The `slotProps` prop is an object that contains the props for all slots within a component.
You can use it to define additional custom props for a component's interior elements.
-For example, the code snippet below shows how to add a custom CSS class to the badge slot of the Base UI Badge component:
+For example, the code snippet below shows how to add a custom CSS class to the badge slot of the MUI Base Badge component:
```jsx
@@ -78,13 +78,13 @@ If you did the same with `slots.root`, you would need to place this attribute on
## Components vs. hooks
-Base UI includes two kinds of building blocks: **components** and **hooks**.
+MUI Base includes two kinds of building blocks: **components** and **hooks**.
:::info
Hooks encapsulate _logic_; components provide _structure_.
:::
-Many Base UI components are implemented with the help of [React hooks](https://react.dev/reference/react/hooks).
+Many MUI Base components are implemented with the help of [React hooks](https://react.dev/reference/react/hooks).
You can use components or hooks—or a combination of both—when building custom components.
In general, we recommend that you begin building with the component, and if you find that you are too limited by the customization options available, then consider refactoring your component to use the corresponding hook instead.
diff --git a/docs/data/base/guides/next-js-app-router/next-js-app-router.md b/docs/data/base/guides/next-js-app-router/next-js-app-router.md
index 11db3639e39933..6df1db77b739dc 100644
--- a/docs/data/base/guides/next-js-app-router/next-js-app-router.md
+++ b/docs/data/base/guides/next-js-app-router/next-js-app-router.md
@@ -1,18 +1,18 @@
# Next.js App Router
-
Learn how to use Base UI with the Next.js App Router.
+
Learn how to use MUI Base with the Next.js App Router.
## Example
Starting fresh on a new App Router-based project?
-Jump right into the code with [this example: Base UI - Next.js App Router with Tailwind CSS in TypeScript](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts).
+Jump right into the code with [this example: MUI Base - Next.js App Router with Tailwind CSS in TypeScript](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts).
## Next.js and React Server Components
The Next.js App Router implements React Server Components, [an upcoming feature for React](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md).
-To support the App Router, the components and hooks from Base UI that need access to browser APIs are exported with the `"use client"` directive.
+To support the App Router, the components and hooks from MUI Base that need access to browser APIs are exported with the `"use client"` directive.
:::warning
React Server Components should not be conflated with the concept of server-side rendering (SSR).
@@ -21,9 +21,9 @@ So-called Client Components are still server-rendered to HTML.
For more details, see [this explanation](https://github.com/reactwg/server-components/discussions/4) of Client Components and SSR from the React Working Group.
:::
-## Setting up Base UI with the App Router
+## Setting up MUI Base with the App Router
-Base UI gives you the freedom to choose your own styling solution, so setting up a Next.js App Router project largely depends on what you choose.
+MUI Base gives you the freedom to choose your own styling solution, so setting up a Next.js App Router project largely depends on what you choose.
This guide covers Tailwind CSS, Emotion, and other CSS-in-JS solutions like styled-components.
### Tailwind CSS
@@ -46,7 +46,7 @@ module.exports = {
};
```
-Refer to this [example repo](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) for a full working demo of a Next.js 13 app using Base UI and Tailwind CSS.
+Refer to this [example repo](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) for a full working demo of a Next.js 13 app using MUI Base and Tailwind CSS.
### Emotion
@@ -153,13 +153,13 @@ Currently, `prepend` does not work reliably with the App Router, but you can wor
### Other CSS-in-JS libraries
-To use Next.js with Base UI and styled-components or other CSS-in-JS solutions, follow the [Next.js doc on CSS-in-JS](https://nextjs.org/docs/app/building-your-application/styling/css-in-js).
+To use Next.js with MUI Base and styled-components or other CSS-in-JS solutions, follow the [Next.js doc on CSS-in-JS](https://nextjs.org/docs/app/building-your-application/styling/css-in-js).
## Customization
### Using callbacks for slot props
-A common customization method in Base UI is to pass a callback to slots in `slotProps` in order to apply dynamic props. For example, you might want to change the background color by applying a different class when a Button is disabled:
+A common customization method in MUI Base is to pass a callback to slots in `slotProps` in order to apply dynamic props. For example, you might want to change the background color by applying a different class when a Button is disabled:
```tsx
// page.tsx
diff --git a/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md b/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
index 19918913131b44..979cccb0be9341 100644
--- a/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
+++ b/docs/data/base/guides/overriding-component-structure/overriding-component-structure.md
@@ -1,8 +1,8 @@
# Overriding component structure
-
Learn how to override the default DOM structure of Base UI components.
+
Learn how to override the default DOM structure of MUI Base components.
-Base UI components are designed to suit the widest possible range of use cases, but you may occasionally need to change how a component's structure is rendered in the DOM.
+MUI Base components are designed to suit the widest possible range of use cases, but you may occasionally need to change how a component's structure is rendered in the DOM.
To understand how to do this, it helps to have an accurate mental model of the components.
@@ -13,7 +13,7 @@ Slots are most commonly filled by HTML tags, but may also be filled by React com
All components contain a root slot that defines their primary node in the DOM tree; more complex components also contain additional interior slots named after the elements they represent.
-All _non-utility_ Base UI components accept [the `slots` prop](#the-slots-prop) for overriding their rendered HTML structure.
+All _non-utility_ MUI Base components accept [the `slots` prop](#the-slots-prop) for overriding their rendered HTML structure.
Additionally, you can pass custom props to [interior slots](#interior-slots) using `slotProps`.
diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
index 92cf9f71fa4ad9..75353e35b15e2c 100644
--- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
+++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md
@@ -1,10 +1,10 @@
# Working with Tailwind CSS
-
Learn how to style Base UI components with Tailwind CSS.
+
Learn how to style MUI Base components with Tailwind CSS.
## Getting started
-The goal of this guide is to teach you how to style Base UI components using Tailwind CSS while building an interactive and accessible app.
+The goal of this guide is to teach you how to style MUI Base components using Tailwind CSS while building an interactive and accessible app.
### Prerequisites
@@ -243,7 +243,7 @@ You should now see the player rendered on the page, but the component is not yet
### Create the Slider component
-Let's start by giving life to the slider with the Slider component from Base UI.
+Let's start by giving life to the slider with the Slider component from MUI Base.
First, create a new file called `Slider.tsx`.
Copy and paste the code below into the file:
@@ -376,7 +376,7 @@ Since we want to have an additional dot inside the thumb, we need to add new ele
Note that after the thumb, we are still rendering the `children` passed via props.
This is important because the `children` in this case contain a hidden `
` element which makes the thumb accessible.
-This is just one example, but this pattern of building custom components for each slot is possible with all Base UI components.
+This is just one example, but this pattern of building custom components for each slot is possible with all MUI Base components.
:::warning
When building custom components for the slots, always propagate the props sent from the owner component on the root element.
@@ -389,7 +389,7 @@ This is useful if you want to style the component based on some internal state.
## Adding a custom focus selector to the buttons
To finish this guide off, let's see how you can add custom styles based on a component's internal state.
-We'll create a custom Button component that uses the `focusVisible` state from the Base UI Button to apply a cyan ring around it.
+We'll create a custom Button component that uses the `focusVisible` state from the MUI Base Button to apply a cyan ring around it.
This is what it'll look like:
@@ -513,9 +513,9 @@ Some classes were slightly changed on some buttons so we have a consistent focus
These are the things we covered in this guide:
-✅ How to use Tailwind CSS utility classes to style Base UI components, using the `slotProps` prop for targeting specific slots within the component.\
+✅ How to use Tailwind CSS utility classes to style MUI Base components, using the `slotProps` prop for targeting specific slots within the component.\
✅ How to create custom components for specific slots in more complex customization scenarios.
We used the `component` prop to pass them into the parent component.\
✅ How to apply conditional styling based on the owner component's state using a callback as value for the `slotProps` prop.
-Get all the code used in this guide in the [Base UI with Tailwind CSS](https://codesandbox.io/p/sandbox/working-with-tailwind-css-dhmf8w) example project.
+Get all the code used in this guide in the [MUI Base with Tailwind CSS](https://codesandbox.io/p/sandbox/working-with-tailwind-css-dhmf8w) example project.
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index 7b024e970b9268..d76d2c7807cbb8 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -26,18 +26,17 @@ const pages: readonly MuiPage[] = [
children: [
{ pathname: '/base-ui/react-autocomplete', title: 'Autocomplete' },
{ pathname: '/base-ui/react-button', title: 'Button' },
- { pathname: '/base-ui/react-checkbox', title: 'Checkbox', planned: true },
+ { pathname: '/base-ui/react-checkbox', title: 'Checkbox' },
{ pathname: '/base-ui/react-input', title: 'Input' },
- { pathname: '/base-ui/react-number-input', title: 'Number Input', unstable: true },
- { pathname: '/base-ui/react-radio-group', title: 'Radio Group', planned: true },
- { pathname: '/base-ui/react-rating', title: 'Rating', planned: true },
+ { pathname: '/base-ui/react-number-input', title: 'Number Input' },
+ { pathname: '/base-ui/react-radio-group', title: 'Radio Group' },
+ { pathname: '/base-ui/react-rating', title: 'Rating' },
{ pathname: '/base-ui/react-select', title: 'Select' },
{ pathname: '/base-ui/react-slider', title: 'Slider' },
{ pathname: '/base-ui/react-switch', title: 'Switch' },
{
pathname: '/base-ui/react-toggle-button-group',
title: 'Toggle Button Group',
- planned: true,
},
],
},
@@ -46,7 +45,7 @@ const pages: readonly MuiPage[] = [
subheader: 'data-display',
children: [
{ pathname: '/base-ui/react-badge', title: 'Badge' },
- { pathname: '/base-ui/react-tooltip', title: 'Tooltip', planned: true },
+ { pathname: '/base-ui/react-tooltip', title: 'Tooltip' },
],
},
{
@@ -66,7 +65,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/base-ui/react-accordion',
title: 'Accordion',
- planned: true,
},
],
},
@@ -74,9 +72,9 @@ const pages: readonly MuiPage[] = [
pathname: '/base-ui/components/navigation',
subheader: 'navigation',
children: [
- { pathname: '/base-ui/react-drawer', title: 'Drawer', planned: true },
+ { pathname: '/base-ui/react-drawer', title: 'Drawer' },
{ pathname: '/base-ui/react-menu', title: 'Menu' },
- { pathname: '/base-ui/react-pagination', title: 'Pagination', planned: true },
+ { pathname: '/base-ui/react-pagination', title: 'Pagination' },
{ pathname: '/base-ui/react-table-pagination', title: 'Table Pagination' },
{ pathname: '/base-ui/react-tabs', title: 'Tabs' },
],
@@ -91,7 +89,7 @@ const pages: readonly MuiPage[] = [
{ pathname: '/base-ui/react-modal', title: 'Modal' },
{ pathname: '/base-ui/react-no-ssr', title: 'No-SSR' },
{ pathname: '/base-ui/react-popper', title: 'Popper' },
- { pathname: '/base-ui/react-popup', title: 'Popup', unstable: true },
+ { pathname: '/base-ui/react-popup', title: 'Popup' },
{ pathname: '/base-ui/react-portal', title: 'Portal' },
{ pathname: '/base-ui/react-textarea-autosize', title: 'Textarea Autosize' },
{ pathname: '/base-ui/react-transitions', title: 'Transitions' },
diff --git a/docs/data/joy/components/accordion/accordion.md b/docs/data/joy/components/accordion/accordion.md
index 001b36fdab64d0..c1277c312680af 100644
--- a/docs/data/joy/components/accordion/accordion.md
+++ b/docs/data/joy/components/accordion/accordion.md
@@ -4,6 +4,7 @@ title: React Accordion component
components: Accordion, AccordionDetails, AccordionGroup, AccordionSummary
githubLabel: 'component: accordion'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+unstyled: https://base-ui.com/react/components/accordion
---
# Accordion
diff --git a/docs/data/joy/components/autocomplete/autocomplete.md b/docs/data/joy/components/autocomplete/autocomplete.md
index ebf5bf7344fba8..85adcf917c5c2d 100644
--- a/docs/data/joy/components/autocomplete/autocomplete.md
+++ b/docs/data/joy/components/autocomplete/autocomplete.md
@@ -287,7 +287,7 @@ The following demo relies on [autosuggest-highlight](https://github.com/moroshko
### GitHub's picker
-To reproduce GitHub's label picker, the `Autocomplete` is rendered inside a Base UI [`Popper`](/base-ui/react-popper/). To remove the popup behavior from the autocomplete, replace the listbox slot with the `AutocompleteListbox` component.
+To reproduce GitHub's label picker, the `Autocomplete` is rendered inside a MUI Base [`Popper`](/base-ui/react-popper/). To remove the popup behavior from the autocomplete, replace the listbox slot with the `AutocompleteListbox` component.
{{"demo": "GitHubLabel.js"}}
diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md
index e5ba349dfeaf25..25c2487f64fada 100644
--- a/docs/data/joy/components/badge/badge.md
+++ b/docs/data/joy/components/badge/badge.md
@@ -3,7 +3,6 @@ productId: joy-ui
title: React Badge component
components: Badge
githubLabel: 'component: badge'
-unstyled: /base-ui/react-badge/
---
# Badge
diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
index b6bed946b9590a..e74eb854d02080 100644
--- a/docs/data/joy/components/button/button.md
+++ b/docs/data/joy/components/button/button.md
@@ -4,7 +4,6 @@ title: React Button component
components: Button, IconButton
githubLabel: 'component: button'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
-unstyled: /base-ui/react-button/
---
# Button
diff --git a/docs/data/joy/components/checkbox/checkbox.md b/docs/data/joy/components/checkbox/checkbox.md
index 4583812b0d8664..1f0d1698b776ec 100644
--- a/docs/data/joy/components/checkbox/checkbox.md
+++ b/docs/data/joy/components/checkbox/checkbox.md
@@ -4,6 +4,7 @@ title: React Checkbox component
components: Checkbox
githubLabel: 'component: checkbox'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+unstyled: https://base-ui.com/react/components/checkbox
---
# Checkbox
diff --git a/docs/data/joy/components/divider/divider.md b/docs/data/joy/components/divider/divider.md
index 60917da7cbab5f..2f56d0d77e0fd6 100644
--- a/docs/data/joy/components/divider/divider.md
+++ b/docs/data/joy/components/divider/divider.md
@@ -3,6 +3,7 @@ productId: joy-ui
title: React Divider component
components: Divider
githubLabel: 'component: divider'
+unstyled: https://base-ui.com/react/components/separator
---
# Divider
diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md
index 27575fa6d3bca4..433c0a9f69fe4b 100644
--- a/docs/data/joy/components/input/input.md
+++ b/docs/data/joy/components/input/input.md
@@ -2,7 +2,7 @@
productId: joy-ui
title: React Input component
components: FormControl, FormHelperText, FormLabel, Input
-unstyled: /base-ui/react-input/
+unstyled: https://base-ui.com/react/components/input
---
# Input
diff --git a/docs/data/joy/components/menu/menu.md b/docs/data/joy/components/menu/menu.md
index 26af6084268566..b76b35c12afe90 100644
--- a/docs/data/joy/components/menu/menu.md
+++ b/docs/data/joy/components/menu/menu.md
@@ -4,7 +4,7 @@ title: React Menu component
components: Menu, MenuItem, MenuList, MenuButton
githubLabel: 'component: menu'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
-unstyled: /base-ui/react-menu/
+unstyled: https://base-ui.com/react/components/menu
---
# Menu
@@ -91,7 +91,7 @@ Use `slotProps` to pass props to the IconButton component.
### Positioned menu
-The `Menu` is based on the Base UI `Popper` component, which exposes a few [placement props](/base-ui/react-popper/#placement).
+The `Menu` is based on the MUI Base `Popper` component, which exposes a few [placement props](/base-ui/react-popper/#placement).
For example, this is how you'd go for displaying the menu on the bottom-end of the anchor button.
{{"demo": "PositionedMenu.js"}}
diff --git a/docs/data/joy/components/modal/modal.md b/docs/data/joy/components/modal/modal.md
index ff5045d23f6792..5a085d57e4634c 100644
--- a/docs/data/joy/components/modal/modal.md
+++ b/docs/data/joy/components/modal/modal.md
@@ -4,6 +4,7 @@ title: React Modal component
components: Modal, ModalClose, ModalDialog, ModalOverflow, DialogTitle, DialogContent, DialogActions
githubLabel: 'component: modal'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+unstyled: https://base-ui.com/react/components/dialog
---
# Modal
@@ -226,7 +227,7 @@ Use `sx` prop with `theme.breakpoints.only('xs')` to customize the styles of the
### Focus trap
-Base UI `Modal` moves the focus back to the body of the component if the focus tries to escape it.
+MUI Base `Modal` moves the focus back to the body of the component if the focus tries to escape it.
This is done for accessibility purposes, but it can potentially create issues for your users.
diff --git a/docs/data/joy/components/radio-button/radio-button.md b/docs/data/joy/components/radio-button/radio-button.md
index b0726b188a1706..215d0559056684 100644
--- a/docs/data/joy/components/radio-button/radio-button.md
+++ b/docs/data/joy/components/radio-button/radio-button.md
@@ -4,6 +4,7 @@ title: React Radio Button component
components: Radio, RadioGroup
githubLabel: 'component: radio'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+unstyled: https://base-ui.com/react/components/radio
---
# Radio
diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
index ecfd4ace80361b..4b984c5e0168dd 100644
--- a/docs/data/joy/components/select/select.md
+++ b/docs/data/joy/components/select/select.md
@@ -4,7 +4,7 @@ title: React Select component
components: Select, Option
githubLabel: 'component: select'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-unstyled: /base-ui/react-select/
+unstyled: https://base-ui.com/react/components/select
---
# Select
diff --git a/docs/data/joy/components/slider/slider.md b/docs/data/joy/components/slider/slider.md
index 795077148638bb..5b99afbc3de236 100644
--- a/docs/data/joy/components/slider/slider.md
+++ b/docs/data/joy/components/slider/slider.md
@@ -3,7 +3,7 @@ productId: joy-ui
title: React Slider component
components: Slider
githubLabel: 'component: slider'
-unstyled: /base-ui/react-slider/
+unstyled: https://base-ui.com/react/components/slider
---
# Slider
diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md
index be49a207cf053f..d2f3c3bf711e08 100644
--- a/docs/data/joy/components/switch/switch.md
+++ b/docs/data/joy/components/switch/switch.md
@@ -3,7 +3,7 @@ productId: joy-ui
title: React Switch component
components: Switch
githubLabel: 'component: switch'
-unstyled: /base-ui/react-switch/
+unstyled: https://base-ui.com/react/components/switch
---
# Switch
diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md
index a0370ad6719bde..932f7665681b40 100644
--- a/docs/data/joy/components/tabs/tabs.md
+++ b/docs/data/joy/components/tabs/tabs.md
@@ -4,7 +4,7 @@ title: React Tabs component
components: Tab, TabList, TabPanel, Tabs
githubLabel: 'component: tabs'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
-unstyled: /base-ui/react-tabs/
+unstyled: https://base-ui.com/react/components/menu
---
# Tabs
diff --git a/docs/data/joy/components/text-field/text-field.md b/docs/data/joy/components/text-field/text-field.md
index d2adcae1ab4a5f..6ea1ebedce4ddd 100644
--- a/docs/data/joy/components/text-field/text-field.md
+++ b/docs/data/joy/components/text-field/text-field.md
@@ -2,6 +2,7 @@
productId: joy-ui
title: React Text Field component
githubLabel: 'component: text field'
+unstyled: https://base-ui.com/react/components/field
---
# Text Field
diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index 40513178fa5524..3302bdfac3d7cb 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -3,7 +3,6 @@ productId: joy-ui
title: React Textarea component
components: Textarea
githubLabel: 'component: TextareaAutosize'
-unstyled: /base-ui/react-textarea-autosize/
---
# Textarea
@@ -14,7 +13,7 @@ unstyled: /base-ui/react-textarea-autosize/
## Introduction
-Joy UI's textarea component is built on top of the Base UI [`TextareaAutoSize`](/base-ui/react-textarea-autosize/) component.
+Joy UI's textarea component is built on top of the MUI Base [`TextareaAutoSize`](/base-ui/react-textarea-autosize/) component.
{{"demo": "TextareaUsage.js", "hideToolbar": true, "bg": "gradient"}}
diff --git a/docs/data/joy/components/toggle-button-group/toggle-button-group.md b/docs/data/joy/components/toggle-button-group/toggle-button-group.md
index b4d7a2322796f5..94ae80b5402e58 100644
--- a/docs/data/joy/components/toggle-button-group/toggle-button-group.md
+++ b/docs/data/joy/components/toggle-button-group/toggle-button-group.md
@@ -3,6 +3,7 @@ productId: joy-ui
title: React Toggle Button Group component
githubLabel: 'component: toggle button'
components: ToggleButtonGroup, Button, IconButton
+unstyled: https://base-ui.com/react/components/toggle-group
---
# Toggle Button Group
diff --git a/docs/data/joy/components/tooltip/tooltip.md b/docs/data/joy/components/tooltip/tooltip.md
index 958b6ce3ab25e4..c00e1d433d30b2 100644
--- a/docs/data/joy/components/tooltip/tooltip.md
+++ b/docs/data/joy/components/tooltip/tooltip.md
@@ -4,6 +4,7 @@ title: React Tooltip component
components: Tooltip
githubLabel: 'component: tooltip'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+unstyled: https://base-ui.com/react/components/tooltip
---
# Tooltip
diff --git a/docs/data/joy/getting-started/overview/overview.md b/docs/data/joy/getting-started/overview/overview.md
index a1a7cb56a2402a..d8dd66a87eda6d 100644
--- a/docs/data/joy/getting-started/overview/overview.md
+++ b/docs/data/joy/getting-started/overview/overview.md
@@ -55,7 +55,7 @@ For example, observe how each element of the [Input](/joy-ui/react-input/) compo
### Accessibility
-Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base-ui/getting-started/), giving you many accessibility features out of the box.
+Joy UI components are built on top of [MUI Base's unstyled components and low-level hooks](/base-ui/getting-started/), giving you many accessibility features out of the box.
We strive to make all components accessible to end users who require assistive technology, and offer suggestions for optimizing accessibility throughout our documentation.
Joy UI's Form Control component automatically generates a unique ID that links the Input that it wraps with the Form Label and Form Helper Text components, ensuring that your app complies with this guideline:
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
index ed4f0dd5147010..0aea88918d72e4 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
@@ -128,7 +128,7 @@ export default function ColorInversionFooter() {
Joy UI
- Base UI
+ MUI Base
Material UI
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
index adb2bb70afa7e2..ce972aa2b3bbef 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
@@ -133,7 +133,7 @@ export default function ColorInversionFooter() {
Joy UI
- Base UI
+ MUI Base
Material UI
diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md
index 7618b34439ab53..eeeb0a89e33131 100644
--- a/docs/data/material/components/click-away-listener/click-away-listener.md
+++ b/docs/data/material/components/click-away-listener/click-away-listener.md
@@ -12,8 +12,8 @@ githubLabel: 'component: ClickAwayListener'
## This document has moved
:::warning
-Please refer to the [Click-Away Listener](/base-ui/react-click-away-listener/) component page in the Base UI docs for demos and details on usage.
+Please refer to the [Click-Away Listener](/base-ui/react-click-away-listener/) component page in the MUI Base docs for demos and details on usage.
-Click-Away Listener is a part of the standalone [Base UI](/base-ui/) component library.
-It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after Base UI gets a stable release.
+Click-Away Listener is a part of the standalone MUI Base component library.
+It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after MUI Base gets a stable release.
:::
diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md
index dec36823a9d88f..ac2611539ebcd3 100644
--- a/docs/data/material/components/no-ssr/no-ssr.md
+++ b/docs/data/material/components/no-ssr/no-ssr.md
@@ -11,8 +11,8 @@ components: NoSsr
## This document has moved
:::warning
-Please refer to the [No-SSR](/base-ui/react-no-ssr/) component page in the Base UI docs for demos and details on usage.
+Please refer to the [No-SSR](/base-ui/react-no-ssr/) component page in the MUI Base docs for demos and details on usage.
-No-SSR is a part of the standalone [Base UI](/base-ui/) component library.
-It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after Base UI gets a stable release.
+No-SSR is a part of the standalone MUI Base component library.
+It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after MUI Base gets a stable release.
:::
diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md
index 1730cd0fd38c6e..85833d7e6da69c 100644
--- a/docs/data/material/components/popper/popper.md
+++ b/docs/data/material/components/popper/popper.md
@@ -15,12 +15,12 @@ Some important features of the Popper component:
- 🕷 Popper relies on the 3rd party library ([Popper.js](https://popper.js.org/)) for perfect positioning.
- 💄 It's an alternative API to react-popper. It aims for simplicity.
-- Its child element is a [Base UI Portal](/base-ui/react-portal/) on the body of the document to avoid rendering problems.
+- Its child element is a [MUI Base Portal](/base-ui/react-portal/) on the body of the document to avoid rendering problems.
You can disable this behavior with `disablePortal`.
- The scroll isn't blocked like with the [Popover](/material-ui/react-popover/) component.
The placement of the popper updates with the available area in the viewport.
- Clicking away does not hide the Popper component.
- If you need this behavior, you can use the [Base UI Click-Away Listener](/base-ui/react-click-away-listener/) - see the example in the [menu documentation section](/material-ui/react-menu/#composition-with-menu-list).
+ If you need this behavior, you can use the [MUI Base Click-Away Listener](/base-ui/react-click-away-listener/) - see the example in the [menu documentation section](/material-ui/react-menu/#composition-with-menu-list).
- The `anchorEl` is passed as the reference object to create a new `Popper.js` instance.
{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md
index 2f66f2159fd063..d8e92c4db26418 100644
--- a/docs/data/material/components/portal/portal.md
+++ b/docs/data/material/components/portal/portal.md
@@ -12,8 +12,8 @@ githubLabel: 'component: Portal'
## This document has moved
:::warning
-Please refer to the [Portal](/base-ui/react-portal/) component page in the Base UI docs for demos and details on usage.
+Please refer to the [Portal](/base-ui/react-portal/) component page in the MUI Base docs for demos and details on usage.
-Portal is a part of the standalone [Base UI](/base-ui/) component library.
-It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after Base UI gets a stable release.
+Portal is a part of the standalone MUI Base component library.
+It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after MUI Base gets a stable release.
:::
diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md
index 74205facd6ae01..b3bf54fff4fd5a 100644
--- a/docs/data/material/components/text-fields/text-fields.md
+++ b/docs/data/material/components/text-fields/text-fields.md
@@ -44,7 +44,7 @@ The `helperText` prop can then be used to provide feedback to the user about the
## Multiline
-The `multiline` prop transforms the Text Field into a [Base UI Textarea Autosize](/base-ui/react-textarea-autosize/) element.
+The `multiline` prop transforms the Text Field into a [MUI Base Textarea Autosize](/base-ui/react-textarea-autosize/) element.
Unless the `rows` prop is set, the height of the text field dynamically matches its content.
You can use the `minRows` and `maxRows` props to bound it.
@@ -275,7 +275,7 @@ We do not recommend using `type="number"` with a Text Field due to potential usa
:::
-If you need a text field with number validation, you can use Base UI's [Number Input](/base-ui/react-number-input/) instead.
+If you need a text field with number validation, you can use MUI Base's [Number Input](/base-ui/react-number-input/) instead.
You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/19154) to track the progress of introducing the Number Input component to Material UI.
diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md
index d4b51a9a2da082..be947db10d8717 100644
--- a/docs/data/material/components/textarea-autosize/textarea-autosize.md
+++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md
@@ -12,8 +12,8 @@ githubLabel: 'component: TextareaAutosize'
## This document has moved
:::warning
-Please refer to the [Textarea Autosize](/base-ui/react-textarea-autosize/) component page in the Base UI docs for demos and details on usage.
+Please refer to the [Textarea Autosize](/base-ui/react-textarea-autosize/) component page in the MUI Base docs for demos and details on usage.
-Textarea Autosize is a part of the standalone [Base UI](/base-ui/) component library.
-It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after Base UI gets a stable release.
+Textarea Autosize is a part of the standalone MUI Base component library.
+It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after MUI Base gets a stable release.
:::
diff --git a/docs/data/material/customization/shadow-dom/shadow-dom.md b/docs/data/material/customization/shadow-dom/shadow-dom.md
index fc19540b8b0f9b..fbb4061c327bf3 100644
--- a/docs/data/material/customization/shadow-dom/shadow-dom.md
+++ b/docs/data/material/customization/shadow-dom/shadow-dom.md
@@ -32,7 +32,7 @@ ReactDOM.createRoot(shadowRootElement).render(
### 2. Theme
-Material UI components like Menu, Dialog, Popover, and others use the [Base UI Portal](/base-ui/react-portal/) component to render a new "subtree" in a container outside of current DOM hierarchy.
+Material UI components like Menu, Dialog, Popover, and others use the [MUI Base Portal](/base-ui/react-portal/) component to render a new "subtree" in a container outside of current DOM hierarchy.
By default, this container is `document.body`.
But since the styles are applied only inside of the Shadow DOM, we need to render portals inside the Shadow DOM container as well:
diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md
index b5176081f84c33..8a03acd40b583a 100644
--- a/docs/data/material/discover-more/backers/backers.md
+++ b/docs/data/material/discover-more/backers/backers.md
@@ -2,7 +2,7 @@
Support the development of the open-source projects of the MUI organization through crowdfunding.
-Material UI, Base UI, MUI System, and Joy UI are crowd-funded open-source projects, licensed under the permissive MIT license.
+Material UI, MUI Base, MUI System, and Joy UI are crowd-funded open-source projects, licensed under the permissive MIT license.
Sponsorship increases the rate of bug fixes, documentation improvements, and feature development.
## Diamond sponsors
@@ -74,7 +74,7 @@ via [Open Collective](https://opencollective.com/mui-org)
### Why is Material UI a "crowd-funded open-source project"?
-Material UI (as well as Base UI, MUI System, and Joy UI) is open-source to give users great freedom in how they use the software and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use cases.
+Material UI (as well as MUI Base, MUI System, and Joy UI) is open-source to give users great freedom in how they use the software and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use cases.
To ensure that these open-source libraries can stand the test of time for our users, they need to be well-directed and financially sustainable.
The absolute best way to support the MUI organization to work on its libraries' ongoing development efforts is to become a sponsor.
diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md
index 4dc5721b2d857d..f6d1a386e51db3 100644
--- a/docs/data/material/getting-started/overview/overview.md
+++ b/docs/data/material/getting-started/overview/overview.md
@@ -30,13 +30,13 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293
It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul.
You can count on the community's support for years to come (for example [Stack Overflow](https://trends.stackoverflow.co/?tags=material-ui)).
-### Material UI vs. Base UI
+### Material UI vs. MUI Base
-Material UI and [Base UI](/base-ui/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions.
+Material UI and MUI Base feature many of the same UI components, but MUI Base comes without any default styles or styling solutions.
Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/docs/introduction) (or [styled-components](https://styled-components.com/)).
-Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, future versions of Material UI will use Base UI components and hooks for its foundational structure.
+MUI Base, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, future versions of Material UI will use MUI Base components and hooks for its foundational structure.
## Start now
diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
index 56c22bfc22d13c..1e3bf6016e98dd 100644
--- a/docs/data/material/integrations/interoperability/interoperability.md
+++ b/docs/data/material/integrations/interoperability/interoperability.md
@@ -376,7 +376,7 @@ const CustomizedSlider = styled(Slider)(
### Portals
-The [Base UI Portal](/base-ui/react-portal/) component provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+The [MUI Base Portal](/base-ui/react-portal/) component provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
Because of the way styled-components scopes its CSS, you may run into issues where styling is not applied.
For example, if you attempt to style the `tooltip` generated by the [Tooltip](/material-ui/react-tooltip/) component,
diff --git a/docs/data/system/getting-started/overview/overview.md b/docs/data/system/getting-started/overview/overview.md
index 63060be32272eb..4c56a1414e73ce 100644
--- a/docs/data/system/getting-started/overview/overview.md
+++ b/docs/data/system/getting-started/overview/overview.md
@@ -10,7 +10,7 @@ title: Overview
MUI System is a set of CSS utilities to help you build custom designs more efficiently.
It's used internally by libraries like [Material UI](/material-ui/), [Joy UI](/joy-ui/getting-started/).
-It can also be used to style [Base UI](/base-ui/) components.
+It can also be used to style MUI Base components.
MUI System gives you a set of flexible, generic wrapper components like [`Box`](/system/react-box/) and [`Container`](/system/react-container/) that can be quickly customized using the `sx` prop.
This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant `const` definitions with styled-components.
@@ -24,9 +24,9 @@ Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/).
- **Avoid context-switching:** with styled-components, you frequently have to jump between the usage and the definition to find what you need. With MUI System, it's all in one place.
- **Forget unnecessary custom names:** if you've ever struggled to come up with a good name for a styled-component, then you'll appreciate skipping that step entirely when using MUI System.
-## MUI System vs. Base UI
+## MUI System vs. MUI Base
-[Base UI](/base-ui/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as our other component libraries like Material UI and Joy UI).
+MUI Base is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as our other component libraries like Material UI and Joy UI).
-Base UI is a standalone component library, whereas MUI System is _supplemental_ in that it's designed to be paired with Base UI or any third-party components.
+MUI Base is a standalone component library, whereas MUI System is _supplemental_ in that it's designed to be paired with MUI Base or any third-party components.
See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System.
diff --git a/docs/mui-vale/styles/MUI/MuiBrandName.yml b/docs/mui-vale/styles/MUI/MuiBrandName.yml
index c12fb2f40d9a8d..7b980872b24450 100644
--- a/docs/mui-vale/styles/MUI/MuiBrandName.yml
+++ b/docs/mui-vale/styles/MUI/MuiBrandName.yml
@@ -12,6 +12,7 @@ swap:
Material UI: Material UI
MUI X: MUI X
Base UI: Base UI
+ MUI Base: MUI Base
MUI System: MUI System
MUI Store: MUI Store
MUI Core: MUI Core
diff --git a/docs/next.config.mjs b/docs/next.config.ts
similarity index 95%
rename from docs/next.config.mjs
rename to docs/next.config.ts
index aaf5919d1c1f26..df35d969bb97ea 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.ts
@@ -5,18 +5,14 @@ import * as fs from 'fs';
// @ts-ignore
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import { createRequire } from 'module';
-import { findPages } from './src/modules/utils/find.mjs';
+import { NextConfig } from 'next';
+import { findPages } from './src/modules/utils/find';
+import { LANGUAGES, LANGUAGES_SSR, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config';
const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
const require = createRequire(import.meta.url);
-const withDocsInfra = require('./nextConfigDocsInfra.js');
-const {
- LANGUAGES,
- LANGUAGES_SSR,
- LANGUAGES_IGNORE_PAGES,
- LANGUAGES_IN_PROGRESS,
-} = require('./config.js');
+const withDocsInfra = require('./nextConfigDocsInfra');
const workspaceRoot = path.join(currentDirectory, '../');
@@ -30,7 +26,7 @@ const pkgContent = fs.readFileSync(path.resolve(workspaceRoot, 'package.json'),
const pkg = JSON.parse(pkgContent);
export default withDocsInfra({
- webpack: (config, options) => {
+ webpack: (config: NextConfig, options): NextConfig => {
const plugins = config.plugins.slice();
if (process.env.DOCS_STATS_ENABLED) {
@@ -260,6 +256,15 @@ export default withDocsInfra({
return map;
},
+ redirects: async () => {
+ return [
+ {
+ source: '/base-ui/',
+ destination: 'https://base-ui.com',
+ permanent: true,
+ },
+ ];
+ },
// Used to signal we run pnpm build
...(process.env.NODE_ENV === 'production'
? {
@@ -276,4 +281,4 @@ export default withDocsInfra({
];
},
}),
-});
+} satisfies NextConfig);
diff --git a/docs/package.json b/docs/package.json
index fcabb6a62ffe6a..91d02cfc8552dc 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -16,7 +16,7 @@
"typescript": "tsc -p tsconfig.json && tsc -p scripts/tsconfig.json",
"typescript:transpile": "echo 'Use `pnpm docs:typescript:formatted'` instead && exit 1",
"typescript:transpile:dev": "echo 'Use `pnpm docs:typescript'` instead && exit 1",
- "link-check": "node ./scripts/reportBrokenLinks.js"
+ "link-check": "tsx ./scripts/reportBrokenLinks.js"
},
"dependencies": {
"@babel/core": "^7.26.0",
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 1b3a4e4e061636..f22f3cdbc9fcde 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -39,7 +39,7 @@ import SvgBaseUiLogo, {
} from 'docs/src/icons/SvgBaseUiLogo';
import './global.css';
import '../public/static/components-gallery/base-theme.css';
-import config from '../config';
+import * as config from '../config';
// Remove the license warning from demonstration purposes
LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);
@@ -226,7 +226,7 @@ function AppWrapper(props) {
if (productId === 'base-ui') {
return {
metadata: '',
- name: 'Base UI',
+ name: 'MUI Base',
logo: SvgBaseUiLogo,
logoSvg: baseSvgLogoString,
wordmarkSvg: baseSvgWordmarkString,
diff --git a/docs/pages/base-ui.tsx b/docs/pages/base-ui.tsx
deleted file mode 100644
index 91f8644f6512c9..00000000000000
--- a/docs/pages/base-ui.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import Divider from '@mui/material/Divider';
-import Head from 'docs/src/modules/components/Head';
-import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
-import AppHeader from 'docs/src/layouts/AppHeader';
-import AppFooter from 'docs/src/layouts/AppFooter';
-import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
-import BaseUIHero from 'docs/src/components/productBaseUI/BaseUIHero';
-import BaseUISummary from 'docs/src/components/productBaseUI/BaseUISummary';
-import BaseUIComponents from 'docs/src/components/productBaseUI/BaseUIComponents';
-import BaseUICustomization from 'docs/src/components/productBaseUI/BaseUICustomization';
-import BaseUIEnd from 'docs/src/components/productBaseUI/BaseUIEnd';
-import BaseUITestimonial from 'docs/src/components/productBaseUI/BaseUITestimonial';
-
-export default function BaseUI() {
- return (
-
-
- {/* eslint-disable-next-line @next/next/no-page-custom-font */}
-
-
-
- );
-}
diff --git a/docs/pages/material-ui/api/icon-button.json b/docs/pages/material-ui/api/icon-button.json
index 09cb6b9e7dc49e..cfb79b5bfe0f07 100644
--- a/docs/pages/material-ui/api/icon-button.json
+++ b/docs/pages/material-ui/api/icon-button.json
@@ -19,7 +19,7 @@
},
"default": "false"
},
- "loading": { "type": { "name": "bool" }, "default": "false" },
+ "loading": { "type": { "name": "bool" }, "default": "null" },
"loadingIndicator": {
"type": { "name": "node" },
"default": " = {
// Core
- 'Base UI': (
+ 'MUI Base': (
= {
// Core open-source libraries
- 'Base UI': yes,
+ 'MUI Base': yes,
'MUI System': yes,
'Material UI': yes,
'Joy UI': yes,
@@ -840,7 +840,7 @@ const communityData: Record = {
const proData: Record = {
// Core
- 'Base UI': yes,
+ 'MUI Base': yes,
'MUI System': yes,
'Material UI': yes,
'Joy UI': yes,
@@ -944,7 +944,7 @@ const proData: Record = {
const premiumData: Record = {
// Core
- 'Base UI': yes,
+ 'MUI Base': yes,
'MUI System': yes,
'Material UI': yes,
'Joy UI': yes,
@@ -1369,7 +1369,7 @@ export default function PricingTable({
{divider}
{renderRow('Joy UI')}
{divider}
- {renderRow('Base UI')}
+ {renderRow('MUI Base')}
{divider}
{renderRow('MUI System')}
CSS adventure
}
- description="Base UI's skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you're free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
+ description="MUI Base's skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you're free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
/>
{DEMOS.map((name) => (
diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
index b1263233e99c6f..0a5bbcc037a2eb 100644
--- a/docs/src/components/productBaseUI/BaseUICustomization.tsx
+++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -244,14 +244,14 @@ export default function BaseUICustomization() {
setIndex(0)}>
setIndex(1)}>
@@ -265,7 +265,7 @@ export default function BaseUICustomization() {
diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx
index cf9ea8da96761d..60206f1cc03785 100644
--- a/docs/src/components/productBaseUI/BaseUIEnd.tsx
+++ b/docs/src/components/productBaseUI/BaseUIEnd.tsx
@@ -37,14 +37,14 @@ export default function BaseUIEnd() {
}
description={
- Base UI wouldn't be possible without our global community of contributors. Join
- us today to get help when you need it, and lend a hand when you can.
+ MUI Base wouldn't be possible without our global community of contributors.
+ Join us today to get help when you need it, and lend a hand when you can.
}
/>
- Base UI vs. Material UI
+ MUI Base vs. Material UI
- Base UI features many of the same components as Material UI, but without the
+ MUI Base features many of the same components as Material UI, but without the
Material Design implementation.
@@ -70,7 +70,7 @@ export default function BaseUIEnd() {
Does it come with styles?
- Base UI is not packaged with any default theme or built-in style engine.
+ MUI Base is not packaged with any default theme or built-in style engine.
This makes it a great choice if you need complete control over how your app's
CSS is implemented.
diff --git a/docs/src/components/productBaseUI/BaseUIHero.tsx b/docs/src/components/productBaseUI/BaseUIHero.tsx
index a90fe44968141a..1d876f56c148dc 100644
--- a/docs/src/components/productBaseUI/BaseUIHero.tsx
+++ b/docs/src/components/productBaseUI/BaseUIHero.tsx
@@ -62,7 +62,7 @@ export default function BaseUIHero() {
/
- Base UI
+ MUI Base
@@ -80,13 +80,13 @@ export default function BaseUIHero() {
total flexibility
- Base UI gives you a set of foundational "headless" components that you can
+ MUI Base gives you a set of foundational "headless" components that you can
build with using any styling solution you choose—no need to override any default style
engine or theme.
Essential building blocks
sleek and accessible UIs
}
- description="Base UI abstracts away the more frustrating aspects of UI development—like accessibility, cross-browser compatibility, and event handling—so you can skip ahead to design implementation."
+ description="MUI Base abstracts away the more frustrating aspects of UI development—like accessibility, cross-browser compatibility, and event handling—so you can skip ahead to design implementation."
/>
diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
index c7c19b95ef433a..96a49163b6d500 100644
--- a/docs/src/components/productBaseUI/BaseUITestimonial.tsx
+++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -44,13 +44,13 @@ export default function BaseUITestimonial() {
component="img"
src="/static/branding/base-ui/nhost-screenshot.png"
srcSet="/static/branding/base-ui/nhost-screenshot-2x.png 2x"
- alt="Screenshot displaying part of the Nhost dashboard that used Base UI to be built."
+ alt="Screenshot displaying part of the Nhost dashboard that used MUI Base to be built."
loading="lazy"
sx={{ backgroundColor: '#fff', width: 510, height: 210 }}
/>
- Nhost's new dashboard, powered by Base UI
+ Nhost's new dashboard, powered by MUI Base
“After considering various options, we decided to migrate our custom components to
- Material UI, and that's when we discovered Base UI. As a set of headless
+ Material UI, and that's when we discovered MUI Base. As a set of headless
components, it offered exactly what we needed to implement our design system while
maintaining full customizability. The focus on accessibility was also a big plus, as it
ensured that our dashboard was usable by everyone. Low-level component hooks were just
diff --git a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
index 5d970f332f47c1..ca1288536f6419 100644
--- a/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
+++ b/docs/src/components/productBaseUI/BaseUIThemesDemo.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import clsx from 'clsx';
-// Base UI imports
+// @mui/base imports
import { Badge, badgeClasses } from '@mui/base/Badge';
import { Input, InputProps } from '@mui/base/Input';
import { Dropdown } from '@mui/base/Dropdown';
@@ -819,7 +819,7 @@ export default function BaseUIThemesDemo() {
- Oh, hey, this is a Base UI modal.
+ Oh, hey, this is a MUI Base modal.
- Base UI modals manages modal stacking when more than one is needed, creates a
+ MUI Base modals manages modal stacking when more than one is needed, creates a
backdrop to disable interaction with the rest of the app, and a lot more.
Close
@@ -1022,7 +1022,7 @@ export default function BaseUIThemesDemo() {
-
This is a Base UI snackbar.
+
This is a MUI Base snackbar.
Free to design as you want it.
diff --git a/docs/src/components/productBaseUI/MuiBaseDeprecation.tsx b/docs/src/components/productBaseUI/MuiBaseDeprecation.tsx
new file mode 100644
index 00000000000000..d7356a453d41f2
--- /dev/null
+++ b/docs/src/components/productBaseUI/MuiBaseDeprecation.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
+
+export default function MuiBaseDeprecation(props: {
+ newComponentName?: string;
+ newComponentUrl?: string;
+}) {
+ if (props.newComponentUrl && props.newComponentName) {
+ return (
+
+
+
+ @mui/base has been deprecated and has been replaced by Base UI. We strongly recommend
+ using the Base UI {props.newComponentName} component {' '}
+ instead.
+
+
+
+ );
+ }
+ return (
+
+
+
+ @mui/base has been deprecated and has been replaced by{' '}
+ Base UI . We strongly recommend using the new package
+ instead.
+
+
+
+ );
+}
+
+function Icon() {
+ return (
+
+
+
+
+ );
+}
diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx
index a0297d91a066da..6f1adb0f36e10f 100644
--- a/docs/src/components/productCore/CoreProducts.tsx
+++ b/docs/src/components/productCore/CoreProducts.tsx
@@ -4,7 +4,6 @@ import Section from 'docs/src/layouts/Section';
import { InfoCard } from '@mui/docs/InfoCard';
import { Theme } from '@mui/material/styles';
import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
-import SvgBaseUiLogo from 'docs/src/icons/SvgBaseUiLogo';
import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
import WebRoundedIcon from '@mui/icons-material/WebRounded';
@@ -35,13 +34,6 @@ const content = [
"An open-source React component library that implements MUI's own in-house design principles.",
link: '/joy-ui/getting-started/',
},
- {
- icon:
{content.map(({ icon, title, description, link }) => (
-
+
- Material UI vs. Base UI
+ Material UI vs. MUI Base
- Material UI implements Google's Material Design whereas Base UI features
+ Material UI implements Google's Material Design whereas MUI Base features
many of the same components, but without the Material Design implementation.
diff --git a/docs/src/components/showcase/NotificationCard.tsx b/docs/src/components/showcase/NotificationCard.tsx
index 8088639cedbbe4..b352d8c22f8244 100644
--- a/docs/src/components/showcase/NotificationCard.tsx
+++ b/docs/src/components/showcase/NotificationCard.tsx
@@ -65,7 +65,7 @@ export default function NotificationCard() {
Incredible discoveries
- It's about Material UI & Base UI...
+ It's about Material UI & MUI Base...