Docs

docs/data/base/components/badge/badge.md

@@ -71,27 +71,23 @@ Use the `component` prop to override the root slot with a custom element:
 <BadgeUnstyled component="div" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<BadgeUnstyled components={{ Root: 'div', Badge: 'div' }} />
+<BadgeUnstyled slots={{ root: 'div', badge: 'div' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-badge` to the badge slot:
 
 ```jsx
-<BadgeUnstyled componentsProps={{ badge: { className: 'my-badge' } }} />
+<BadgeUnstyled slotProps={{ badge: { className: 'my-badge' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Hook
 
 ```jsx

docs/data/base/components/button/button.md

@@ -66,27 +66,23 @@ Use the `component` prop to override the root slot with a custom element:
 
 If you provide a non-interactive element such as a `<span>`, the `ButtonUnstyled` component will automatically add the necessary accessibility attributes.
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<ButtonUnstyled components={{ Root: 'div' }} />
+<ButtonUnstyled slots={{ root: 'div' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-button` to the root slot:
 
 ```jsx
-<ButtonUnstyled componentsProps={{ root: { className: 'my-button' } }} />
+<ButtonUnstyled slotProps={{ root: { className: 'my-button' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 Compare the attributes on the `<span>` in this demo with the `ButtonUnstyled` from the previous demo:
 
 {{"demo": "UnstyledButtonsSpan.js"}}

docs/data/base/components/input/input.md

@@ -69,27 +69,23 @@ Use the `component` prop to override the root slot with a custom element:
 <InputUnstyled component="aside" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<InputUnstyled components={{ Root: 'aside' }} />
+<InputUnstyled slots={{ root: 'aside' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-input` to the input slot:
 
 ```jsx
-<InputUnstyled componentsProps={{ input: { className: 'my-input' } }} />
+<InputUnstyled slotProps={{ input: { className: 'my-input' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Hook
 
 ```js

docs/data/base/components/menu/menu.md

@@ -78,27 +78,23 @@ Use the `component` prop to override the root slot with a custom element:
 <MenuItemUnstyled component="span" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<MenuUnstyled components={{ Root: 'nav', Listbox: 'ol' }} />
+<MenuUnstyled slots={{ root: 'nav', listbox: 'ol' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-listbox` to the listbox slot:
 
 ```jsx
-<MenuUnstyled componentsProps={{ listbox: { className: 'my-listbox' } }} />
+<MenuUnstyled slotProps={{ listbox: { className: 'my-listbox' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ### CSS classes
 
 `MenuUnstyled` can set the following class:

docs/data/base/components/select/select.md

@@ -126,27 +126,23 @@ Use the `component` prop to override the root slot with a custom element:
 <SelectUnstyled component="div" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<SelectUnstyled components={{ Root: 'div', Listbox: 'ol' }} />
+<SelectUnstyled slots={{ root: 'div', listbox: 'ol' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-listbox` to the listbox slot:
 
 ```jsx
-<SelectUnstyled componentsProps={{ listbox: { className: 'my-listbox' } }} />
+<SelectUnstyled slotProps={{ listbox: { className: 'my-listbox' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Hook
 
 ```js

docs/data/base/components/slider/slider.md

@@ -108,27 +108,23 @@ Use the `component` prop to override the root slot with a custom element:
 <SliderUnstyled component="div" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<SliderUnstyled components={{ Root: 'div', Thumb: 'div' }} />
+<SliderUnstyled slots={{ root: 'div', thumb: 'div' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-rail` to the rail slot:
 
 ```jsx
-<SliderUnstyled componentsProps={{ rail: { className: 'my-rail' } }} />
+<SliderUnstyled slotProps={{ rail: { className: 'my-rail' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Hook
 
 ```js

docs/data/base/components/snackbar/snackbar.md

@@ -68,27 +68,23 @@ Use the `component` prop to override the root slot with a custom element:
 <SnackbarUnstyled component="span" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<SnackbarUnstyled components={{ Root: 'span' }} />
+<SnackbarUnstyled slots={{ root: 'span' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-snackbar` to the root slot:
 
 ```jsx
-<SnackbarUnstyled componentsProps={{ root: { className: 'my-snackbar' } }} />
+<SnackbarUnstyled slotProps={{ root: { className: 'my-snackbar' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Hook
 
 ```js

docs/data/base/components/switch/switch.md

@@ -63,27 +63,23 @@ Use the `component` prop to override the root slot with a custom element:
 <SwitchUnstyled component="div" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<SwitchUnstyled components={{ Root: 'div', Track: 'div' }} />
+<SwitchUnstyled slots={{ root: 'div', track: 'div' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-thumb` to the thumb slot:
 
 ```jsx
-<SwitchUnstyled componentsProps={{ thumb: { className: 'my-thumb' } }} />
+<SwitchUnstyled slotProps={{ thumb: { className: 'my-thumb' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Hook
 
 ```js

docs/data/base/components/table-pagination/table-pagination.md

@@ -18,7 +18,7 @@ It controls two properties of its parent table:
 - number of rows per page
 
 `TablePaginationUnstyled` renders its internal elements in a `<td>` tag by default so it can be inserted into a table's `<tr>`.
-You can use the `component` or `components.Root` prop to render a different root element—for example, if you need to place the pagination controls outside of the table.
+You can use the `component` or `slots.root` prop to render a different root element—for example, if you need to place the pagination controls outside of the table.
 See the [Slot props section](#slot-props) for details.
 
 {{"demo": "UnstyledPaginationIntroduction.tsx", "defaultCodeOpen": false, "bg": "gradient"}}
@@ -110,27 +110,23 @@ Use the `component` prop to override the root slot with a custom element:
 <TablePaginationUnstyled component="div" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<TablePaginationUnstyled components={{ Root: 'div', Toolbar: 'nav' }} />
+<TablePaginationUnstyled slots={{ root: 'div', toolbar: 'nav' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-spacer` to the spacer slot:
 
 ```jsx
-<TablePaginationUnstyled componentsProps={{ spacer: { className: 'my-spacer' } }} />
+<TablePaginationUnstyled slotProps={{ spacer: { className: 'my-spacer' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Customization
 
 ### Custom pagination options

docs/data/base/components/tabs/tabs.md

@@ -95,27 +95,23 @@ Use the `component` prop to override the root slot with a custom element:
 
 If you provide a non-interactive element such as a `<span>`, the `TabUnstyled` component will automatically add the necessary accessibility attributes.
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<TabUnstyled components={{ Root: 'span' }} />
+<TabUnstyled slots={{ root: 'span' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-tab-list` to the root slot:
 
 ```jsx
-<TabListUnstyled componentsProps={{ root: { className: 'my-tab-list' } }} />
+<TabListUnstyled slotProps={{ root: { className: 'my-tab-list' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Customization
 
 ### Third-party routing library

docs/data/base/getting-started/customization/customization.md

@@ -21,21 +21,21 @@ Additionally, you can import a `[componentName]Classes` object that describes al
 
 ## Overriding subcomponent slots
 
-If you want to make changes to a component's rendered HTML structure, you can override the default subcomponents ("slots") using the `components` and/or `component` prop—see ["Shared props" on the Base Usage page](/base/getting-started/usage/#shared-props) for more details.
+If you want to make changes to a component's rendered HTML structure, you can override the default subcomponents ("slots") using the `slots` and/or `component` prop—see ["Shared props" on the Base Usage page](/base/getting-started/usage/#shared-props) for more details.
 
-The following demo uses [SwitchUnstyled](/base/react-switch/) to show how to create a styled component by applying styles to three of its subcomponent slots: `Root`, `Thumb`, and `Input`.
+The following demo uses [SwitchUnstyled](/base/react-switch/) to show how to create a styled component by applying styles to three of its subcomponent slots: `root`, `thumb`, and `input`.
 
 Note that although this demo uses [MUI System](/system/styled/) as a styling solution, you are free to choose any alternative.
 
 {{"demo": "StylingSlots.js"}}
 
-The components you pass in the `components` prop receive the `ownerState` prop from the top-level component (the "owner").
+The components you pass in the `slots` prop receive the `ownerState` prop from the top-level component (the "owner").
 By convention, it contains all props passed to the owner, merged with its rendering state.
 
 For example:
 
 ```jsx
-<SwitchUnstyled components={{ Thumb: MyCustomThumb }} data-foo="42" />
+<SwitchUnstyled slots={{ thumb: MyCustomThumb }} data-foo="42" />
 ```
 
 In this case, `MyCustomThumb` component receives the `ownerState` object with the following data: