diff --git a/docs/data/joy/components/autocomplete/CountrySelect.js b/docs/data/joy/components/autocomplete/CountrySelect.js
index f58cc87f1a2faa..760bddbc201890 100644
--- a/docs/data/joy/components/autocomplete/CountrySelect.js
+++ b/docs/data/joy/components/autocomplete/CountrySelect.js
@@ -10,7 +10,7 @@ export default function CountrySelect() {
     <Autocomplete
       id="country-select-demo"
       placeholder="Choose a country"
-      componentsProps={{
+      slotProps={{
         input: {
           autoComplete: 'new-password', // disable autocomplete and autofill
         },
diff --git a/docs/data/joy/components/autocomplete/CountrySelect.tsx b/docs/data/joy/components/autocomplete/CountrySelect.tsx
index f58cc87f1a2faa..760bddbc201890 100644
--- a/docs/data/joy/components/autocomplete/CountrySelect.tsx
+++ b/docs/data/joy/components/autocomplete/CountrySelect.tsx
@@ -10,7 +10,7 @@ export default function CountrySelect() {
     <Autocomplete
       id="country-select-demo"
       placeholder="Choose a country"
-      componentsProps={{
+      slotProps={{
         input: {
           autoComplete: 'new-password', // disable autocomplete and autofill
         },
diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.js b/docs/data/joy/components/autocomplete/GitHubLabel.js
index 27b2cbb6003029..5bca82cf893ced 100644
--- a/docs/data/joy/components/autocomplete/GitHubLabel.js
+++ b/docs/data/joy/components/autocomplete/GitHubLabel.js
@@ -134,7 +134,7 @@ export default function GitHubLabel() {
               multiple
               size="sm"
               placeholder="Filter labels"
-              components={{ listbox: Listbox }}
+              slots={{ listbox: Listbox }}
               onClose={(event, reason) => {
                 if (reason === 'escape') {
                   handleClose();
diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.tsx b/docs/data/joy/components/autocomplete/GitHubLabel.tsx
index 6f6c9fc657bcc8..2db87d8b9489d1 100644
--- a/docs/data/joy/components/autocomplete/GitHubLabel.tsx
+++ b/docs/data/joy/components/autocomplete/GitHubLabel.tsx
@@ -134,7 +134,7 @@ export default function GitHubLabel() {
               multiple
               size="sm"
               placeholder="Filter labels"
-              components={{ listbox: Listbox }}
+              slots={{ listbox: Listbox }}
               onClose={(event, reason) => {
                 if (reason === 'escape') {
                   handleClose();
diff --git a/docs/data/joy/components/autocomplete/Virtualize.js b/docs/data/joy/components/autocomplete/Virtualize.js
index 1c20f09c0078ad..9067a26fa68e69 100644
--- a/docs/data/joy/components/autocomplete/Virtualize.js
+++ b/docs/data/joy/components/autocomplete/Virtualize.js
@@ -121,7 +121,7 @@ export default function Virtualize() {
         sx={{ width: 300 }}
         disableListWrap
         placeholder="Type to search"
-        components={{
+        slots={{
           listbox: ListboxComponent,
         }}
         options={OPTIONS}
diff --git a/docs/data/joy/components/autocomplete/Virtualize.tsx b/docs/data/joy/components/autocomplete/Virtualize.tsx
index e3d708d9f9fe76..97ed0ff9ca782e 100644
--- a/docs/data/joy/components/autocomplete/Virtualize.tsx
+++ b/docs/data/joy/components/autocomplete/Virtualize.tsx
@@ -121,7 +121,7 @@ export default function Virtualize() {
         sx={{ width: 300 }}
         disableListWrap
         placeholder="Type to search"
-        components={{
+        slots={{
           listbox: ListboxComponent,
         }}
         options={OPTIONS}
diff --git a/docs/data/joy/components/autocomplete/Virtualize.tsx.preview b/docs/data/joy/components/autocomplete/Virtualize.tsx.preview
index 04ca6bb06d2ad0..a4beb5945dc715 100644
--- a/docs/data/joy/components/autocomplete/Virtualize.tsx.preview
+++ b/docs/data/joy/components/autocomplete/Virtualize.tsx.preview
@@ -4,7 +4,7 @@
     sx={{ width: 300 }}
     disableListWrap
     placeholder="Type to search"
-    components={{
+    slots={{
       listbox: ListboxComponent,
     }}
     options={OPTIONS}
diff --git a/docs/data/joy/components/autocomplete/autocomplete.md b/docs/data/joy/components/autocomplete/autocomplete.md
index b93886027ff96a..c91d9fa492cc46 100644
--- a/docs/data/joy/components/autocomplete/autocomplete.md
+++ b/docs/data/joy/components/autocomplete/autocomplete.md
@@ -301,7 +301,7 @@ In the event you want the avoid autofill, you can try the following:
 
   ```jsx
   <Autocomplete
-    componentsProps={{
+    slotProps={{
       input: {
         autoComplete: 'new-password',
       },
@@ -318,7 +318,7 @@ You can work around the issue with the `disablePortal` prop.
 
 ```jsx
 <Autocomplete
-  componentsProps={{
+  slotProps={{
     listbox: {
       disablePortal: true,
     },
diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
index 3f292d57e17675..14f23cbf27cdb0 100644
--- a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
+++ b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
@@ -54,7 +54,7 @@ export default function ExampleButtonCheckbox() {
                 setValue((val) => val.filter((text) => text !== item));
               }
             }}
-            componentsProps={{
+            slotProps={{
               action: ({ checked }) => ({
                 sx: {
                   bgcolor: checked ? 'background.surface' : 'transparent',
diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
index c199896884f320..f450650981482e 100644
--- a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
+++ b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
@@ -52,7 +52,7 @@ export default function ExampleChoiceChipCheckbox() {
                       setValue((val) => val.filter((text) => text !== item));
                     }
                   }}
-                  componentsProps={{
+                  slotProps={{
                     action: ({ checked }) => ({
                       sx: checked
                         ? {
diff --git a/docs/data/joy/components/checkbox/FocusCheckbox.js b/docs/data/joy/components/checkbox/FocusCheckbox.js
index 84dca85f4ee7cc..a9885f6a661be6 100644
--- a/docs/data/joy/components/checkbox/FocusCheckbox.js
+++ b/docs/data/joy/components/checkbox/FocusCheckbox.js
@@ -9,14 +9,14 @@ export default function FocusCheckbox() {
         label="Label"
         defaultChecked
         // to demonstrate the focus outline
-        componentsProps={{ action: { className: checkboxClasses.focusVisible } }}
+        slotProps={{ action: { className: checkboxClasses.focusVisible } }}
       />
       <Checkbox
         label="Label"
         defaultChecked
         sx={{ [`& > .${checkboxClasses.checkbox}`]: { position: 'relative' } }}
         // to demonstrate the focus outline
-        componentsProps={{ action: { className: checkboxClasses.focusVisible } }}
+        slotProps={{ action: { className: checkboxClasses.focusVisible } }}
       />
     </Box>
   );
diff --git a/docs/data/joy/components/checkbox/HoverCheckbox.js b/docs/data/joy/components/checkbox/HoverCheckbox.js
index d08dc19ce1bf65..5baeb23e7876c4 100644
--- a/docs/data/joy/components/checkbox/HoverCheckbox.js
+++ b/docs/data/joy/components/checkbox/HoverCheckbox.js
@@ -7,7 +7,7 @@ export default function HoverCheckbox() {
     <Checkbox
       uncheckedIcon={<Done />}
       label="Label"
-      componentsProps={{
+      slotProps={{
         root: ({ checked, focusVisible }) => ({
           sx: !checked
             ? {
diff --git a/docs/data/joy/components/checkbox/OverlayCheckbox.js b/docs/data/joy/components/checkbox/OverlayCheckbox.js
index ef85864c3a870d..f1b142d3bdf2d7 100644
--- a/docs/data/joy/components/checkbox/OverlayCheckbox.js
+++ b/docs/data/joy/components/checkbox/OverlayCheckbox.js
@@ -22,7 +22,7 @@ export default function OverlayCheckbox() {
           label="Focus outline covers the parent!"
           overlay
           // Force the outline to appear in the demo. Usually, you don't need this in your project.
-          componentsProps={{ action: { className: checkboxClasses.focusVisible } }}
+          slotProps={{ action: { className: checkboxClasses.focusVisible } }}
         />
       </Sheet>
     </Box>
diff --git a/docs/data/joy/components/chip/LinkChip.js b/docs/data/joy/components/chip/LinkChip.js
index f27c3cd533ff9e..5e612da06f6f67 100644
--- a/docs/data/joy/components/chip/LinkChip.js
+++ b/docs/data/joy/components/chip/LinkChip.js
@@ -3,7 +3,7 @@ import Chip from '@mui/joy/Chip';
 
 export default function ClickableChip() {
   return (
-    <Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
+    <Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
       Anchor chip
     </Chip>
   );
diff --git a/docs/data/joy/components/chip/LinkChip.tsx b/docs/data/joy/components/chip/LinkChip.tsx
index f27c3cd533ff9e..5e612da06f6f67 100644
--- a/docs/data/joy/components/chip/LinkChip.tsx
+++ b/docs/data/joy/components/chip/LinkChip.tsx
@@ -3,7 +3,7 @@ import Chip from '@mui/joy/Chip';
 
 export default function ClickableChip() {
   return (
-    <Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
+    <Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
       Anchor chip
     </Chip>
   );
diff --git a/docs/data/joy/components/chip/LinkChip.tsx.preview b/docs/data/joy/components/chip/LinkChip.tsx.preview
index a521dc9a0bf2cb..65d462c04cfb56 100644
--- a/docs/data/joy/components/chip/LinkChip.tsx.preview
+++ b/docs/data/joy/components/chip/LinkChip.tsx.preview
@@ -1,3 +1,3 @@
-<Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
+<Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
   Anchor chip
 </Chip>
\ No newline at end of file
diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.js b/docs/data/joy/components/menu/MenuIconSideNavExample.js
index 109f82b1df3065..d06529bc2712e7 100644
--- a/docs/data/joy/components/menu/MenuIconSideNavExample.js
+++ b/docs/data/joy/components/menu/MenuIconSideNavExample.js
@@ -89,7 +89,7 @@ function MenuButton({ children, menu, open, onOpen, onLeaveMenu, label, ...props
         actions: menuActions,
         anchorEl: buttonRef.current,
         modifiers,
-        componentsProps: {
+        slotProps: {
           listbox: {
             id: `nav-example-menu-${label}`,
             'aria-label': label,
diff --git a/docs/data/joy/components/menu/MenuToolbarExample.js b/docs/data/joy/components/menu/MenuToolbarExample.js
index d111e0866ca009..ac3cca52510706 100644
--- a/docs/data/joy/components/menu/MenuToolbarExample.js
+++ b/docs/data/joy/components/menu/MenuToolbarExample.js
@@ -51,7 +51,7 @@ const MenuButton = React.forwardRef(
           open,
           actions: menuActions,
           anchorEl: buttonRef.current,
-          componentsProps: {
+          slotProps: {
             listbox: {
               id: `toolbar-example-menu-${children}`,
               'aria-label': children,
diff --git a/docs/data/joy/components/menu/MenuUsage.js b/docs/data/joy/components/menu/MenuUsage.js
index 90b0143d4258cf..c45ff2b464e77f 100644
--- a/docs/data/joy/components/menu/MenuUsage.js
+++ b/docs/data/joy/components/menu/MenuUsage.js
@@ -78,7 +78,7 @@ export default function MenuUsage() {
             anchorEl={anchorEl}
             open={open}
             onClose={handleClose}
-            componentsProps={{
+            slotProps={{
               listbox: {
                 'aria-labelledby': 'menu-usage-button',
               },
diff --git a/docs/data/joy/components/modal/FadeModalDialog.js b/docs/data/joy/components/modal/FadeModalDialog.js
index 61d1310613f117..37262235dab95b 100644
--- a/docs/data/joy/components/modal/FadeModalDialog.js
+++ b/docs/data/joy/components/modal/FadeModalDialog.js
@@ -18,7 +18,7 @@ export default function FadeModalDialog() {
             keepMounted
             open={!['exited', 'exiting'].includes(state)}
             onClose={() => setOpen(false)}
-            componentsProps={{
+            slotProps={{
               backdrop: {
                 sx: {
                   opacity: 0,
diff --git a/docs/data/joy/components/radio/ExampleAlignmentButtons.js b/docs/data/joy/components/radio/ExampleAlignmentButtons.js
index 718e807c1111ea..f8ccf227fe71ff 100644
--- a/docs/data/joy/components/radio/ExampleAlignmentButtons.js
+++ b/docs/data/joy/components/radio/ExampleAlignmentButtons.js
@@ -55,7 +55,7 @@ export default function ExampleAlignmentButtons() {
               }[item]
             }
             variant={alignment === item ? 'solid' : 'plain'}
-            componentsProps={{
+            slotProps={{
               input: { 'aria-label': item },
               action: {
                 sx: { borderRadius: 0, transition: 'none' },
diff --git a/docs/data/joy/components/radio/ExampleProductAttributes.js b/docs/data/joy/components/radio/ExampleProductAttributes.js
index ded950eb3c1ae6..1b52896fb8cb13 100644
--- a/docs/data/joy/components/radio/ExampleProductAttributes.js
+++ b/docs/data/joy/components/radio/ExampleProductAttributes.js
@@ -48,7 +48,7 @@ export default function ExampleProductAttributes() {
                 color={color}
                 checkedIcon={<Done fontSize="xl2" />}
                 value={color}
-                componentsProps={{
+                slotProps={{
                   input: { 'aria-label': color },
                   radio: {
                     sx: {
diff --git a/docs/data/joy/components/radio/ExampleSegmentedControls.js b/docs/data/joy/components/radio/ExampleSegmentedControls.js
index 70a316c6082d5f..44bdf2f81aa718 100644
--- a/docs/data/joy/components/radio/ExampleSegmentedControls.js
+++ b/docs/data/joy/components/radio/ExampleSegmentedControls.js
@@ -38,7 +38,7 @@ export default function ExampleSegmentedControls() {
               px: 2,
               alignItems: 'center',
             }}
-            componentsProps={{
+            slotProps={{
               action: ({ checked }) => ({
                 sx: {
                   ...(checked && {
diff --git a/docs/data/joy/components/radio/IconlessRadio.js b/docs/data/joy/components/radio/IconlessRadio.js
index 9cc4b42b0e8c29..ca4662bdc0933a 100644
--- a/docs/data/joy/components/radio/IconlessRadio.js
+++ b/docs/data/joy/components/radio/IconlessRadio.js
@@ -41,7 +41,7 @@ export default function IconlessRadio() {
               overlay
               disableIcon
               value={value}
-              componentsProps={{
+              slotProps={{
                 label: ({ checked }) => ({
                   sx: {
                     fontWeight: 'lg',
diff --git a/docs/data/joy/components/radio/RadioButtons.js b/docs/data/joy/components/radio/RadioButtons.js
index 25f829372c073d..70a1c7dc7c7e74 100644
--- a/docs/data/joy/components/radio/RadioButtons.js
+++ b/docs/data/joy/components/radio/RadioButtons.js
@@ -16,14 +16,14 @@ export default function RadioButtons() {
         onChange={handleChange}
         value="a"
         name="radio-buttons"
-        componentsProps={{ input: { 'aria-label': 'A' } }}
+        slotProps={{ input: { 'aria-label': 'A' } }}
       />
       <Radio
         checked={selectedValue === 'b'}
         onChange={handleChange}
         value="b"
         name="radio-buttons"
-        componentsProps={{ input: { 'aria-label': 'B' } }}
+        slotProps={{ input: { 'aria-label': 'B' } }}
       />
     </Box>
   );
diff --git a/docs/data/joy/components/radio/RadioPositionEnd.js b/docs/data/joy/components/radio/RadioPositionEnd.js
index d0efa8187ee17b..f33fd10bbd79b3 100644
--- a/docs/data/joy/components/radio/RadioPositionEnd.js
+++ b/docs/data/joy/components/radio/RadioPositionEnd.js
@@ -34,7 +34,7 @@ export default function RadioPositionEnd() {
               value={item}
               label={item}
               sx={{ flexGrow: 1, flexDirection: 'row-reverse' }}
-              componentsProps={{
+              slotProps={{
                 action: ({ checked }) => ({
                   sx: (theme) => ({
                     ...(checked && {
diff --git a/docs/data/joy/components/radio/radio-pt.md b/docs/data/joy/components/radio/radio-pt.md
index 9583f9d9a3ea89..58f3dfc61f4d68 100644
--- a/docs/data/joy/components/radio/radio-pt.md
+++ b/docs/data/joy/components/radio/radio-pt.md
@@ -98,7 +98,7 @@ Here are a few tips to make sure you have an accessible radio button component:
 ```jsx
 <Radio
   value="radioA"
-  componentsProps={{
+  slotProps={{
     input: {
       'aria-label': 'Radio A',
     },
diff --git a/docs/data/joy/components/radio/radio-zh.md b/docs/data/joy/components/radio/radio-zh.md
index 9583f9d9a3ea89..58f3dfc61f4d68 100644
--- a/docs/data/joy/components/radio/radio-zh.md
+++ b/docs/data/joy/components/radio/radio-zh.md
@@ -98,7 +98,7 @@ Here are a few tips to make sure you have an accessible radio button component:
 ```jsx
 <Radio
   value="radioA"
-  componentsProps={{
+  slotProps={{
     input: {
       'aria-label': 'Radio A',
     },
diff --git a/docs/data/joy/components/radio/radio.md b/docs/data/joy/components/radio/radio.md
index 925df4bdbd5209..5ca6897f8ef192 100644
--- a/docs/data/joy/components/radio/radio.md
+++ b/docs/data/joy/components/radio/radio.md
@@ -119,7 +119,7 @@ Here are a few tips to make sure you have an accessible radio button component:
 ```jsx
 <Radio
   value="radioA"
-  componentsProps={{
+  slotProps={{
     input: {
       'aria-label': 'Radio A',
     },
diff --git a/docs/data/joy/components/select/SelectCustomOption.js b/docs/data/joy/components/select/SelectCustomOption.js
index fa6d4582c70fb6..529285c88f21dc 100644
--- a/docs/data/joy/components/select/SelectCustomOption.js
+++ b/docs/data/joy/components/select/SelectCustomOption.js
@@ -9,7 +9,7 @@ export default function SelectCustomOption() {
   return (
     <Select
       defaultValue="1"
-      componentsProps={{
+      slotProps={{
         listbox: {
           sx: {
             '--List-decorator-size': '44px',
diff --git a/docs/data/joy/components/select/SelectCustomValueAppearance.js b/docs/data/joy/components/select/SelectCustomValueAppearance.js
index b829eb7b1b0903..c992c942ffd460 100644
--- a/docs/data/joy/components/select/SelectCustomValueAppearance.js
+++ b/docs/data/joy/components/select/SelectCustomValueAppearance.js
@@ -21,7 +21,7 @@ export default function SelectCustomValueAppearance() {
   return (
     <Select
       defaultValue="Eric"
-      componentsProps={{
+      slotProps={{
         listbox: {
           sx: {
             '--List-decorator-size': '48px',
diff --git a/docs/data/joy/components/select/SelectFieldDemo.js b/docs/data/joy/components/select/SelectFieldDemo.js
index f9b64948f8d6d6..301559b29534ec 100644
--- a/docs/data/joy/components/select/SelectFieldDemo.js
+++ b/docs/data/joy/components/select/SelectFieldDemo.js
@@ -13,7 +13,7 @@ export default function SelectFieldDemo() {
       </FormLabel>
       <Select
         defaultValue="dog"
-        componentsProps={{
+        slotProps={{
           button: {
             id: 'select-field-demo-button',
             // TODO: Material UI set aria-labelledby correctly & automatically
diff --git a/docs/data/joy/components/select/SelectFieldDemo.tsx b/docs/data/joy/components/select/SelectFieldDemo.tsx
index f9b64948f8d6d6..301559b29534ec 100644
--- a/docs/data/joy/components/select/SelectFieldDemo.tsx
+++ b/docs/data/joy/components/select/SelectFieldDemo.tsx
@@ -13,7 +13,7 @@ export default function SelectFieldDemo() {
       </FormLabel>
       <Select
         defaultValue="dog"
-        componentsProps={{
+        slotProps={{
           button: {
             id: 'select-field-demo-button',
             // TODO: Material UI set aria-labelledby correctly & automatically
diff --git a/docs/data/joy/components/select/SelectGroupedOptions.js b/docs/data/joy/components/select/SelectGroupedOptions.js
index f34ff09f5ba370..ab6f170aa46e58 100644
--- a/docs/data/joy/components/select/SelectGroupedOptions.js
+++ b/docs/data/joy/components/select/SelectGroupedOptions.js
@@ -25,7 +25,7 @@ export default function SelectGroupedOptions() {
   return (
     <Select
       placeholder="Choose your animal"
-      componentsProps={{
+      slotProps={{
         listbox: {
           component: 'div',
           sx: {
diff --git a/docs/data/joy/components/select/select-pt.md b/docs/data/joy/components/select/select-pt.md
index 1f58e3750ec28a..bed16c6dfa3c9e 100644
--- a/docs/data/joy/components/select/select-pt.md
+++ b/docs/data/joy/components/select/select-pt.md
@@ -122,7 +122,7 @@ To create a [listbox with grouped options](https://www.w3.org/WAI/ARIA/apg/examp
 
 ```jsx
 <Select
-  componentsProps={{
+  slotProps={{
     listbox: {
       sx: {
         maxHeight: 300,
diff --git a/docs/data/joy/components/select/select-zh.md b/docs/data/joy/components/select/select-zh.md
index 1f58e3750ec28a..bed16c6dfa3c9e 100644
--- a/docs/data/joy/components/select/select-zh.md
+++ b/docs/data/joy/components/select/select-zh.md
@@ -122,7 +122,7 @@ To create a [listbox with grouped options](https://www.w3.org/WAI/ARIA/apg/examp
 
 ```jsx
 <Select
-  componentsProps={{
+  slotProps={{
     listbox: {
       sx: {
         maxHeight: 300,
diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
index 56526c821e46eb..85c78bcc8ad995 100644
--- a/docs/data/joy/components/select/select.md
+++ b/docs/data/joy/components/select/select.md
@@ -127,7 +127,7 @@ That way, you'll have a consistent height and will be able to leverage nested CS
 
 ```jsx
 <Select
-  componentsProps={{
+  slotProps={{
     listbox: {
       sx: {
         maxHeight: 300,
@@ -153,7 +153,7 @@ Alternatively, you can do it manually by targeting the button slot:
 ```jsx
 <label htmlFor="select-button" id="select-label">Label</label>
 <Select
-  componentsProps={{
+  slotProps={{
     button: {
       id: 'select-button',
       'aria-labelledby': 'select-label select-button',
diff --git a/docs/data/joy/components/switch/ExampleThumbChild.js b/docs/data/joy/components/switch/ExampleThumbChild.js
index 4f7e2cb1895cc4..a341159b5e2540 100644
--- a/docs/data/joy/components/switch/ExampleThumbChild.js
+++ b/docs/data/joy/components/switch/ExampleThumbChild.js
@@ -5,7 +5,7 @@ import DarkMode from '@mui/icons-material/DarkMode';
 export default function ExampleThumbChild() {
   return (
     <Switch
-      componentsProps={{
+      slotProps={{
         input: { 'aria-label': 'Dark mode' },
         thumb: {
           children: <DarkMode />,
diff --git a/docs/data/joy/components/switch/ExampleTrackChild.js b/docs/data/joy/components/switch/ExampleTrackChild.js
index f28dd28dd82f54..214ac35d680e20 100644
--- a/docs/data/joy/components/switch/ExampleTrackChild.js
+++ b/docs/data/joy/components/switch/ExampleTrackChild.js
@@ -5,7 +5,7 @@ import Typography from '@mui/joy/Typography';
 export default function ExampleTrackChild() {
   return (
     <Switch
-      componentsProps={{
+      slotProps={{
         track: {
           children: (
             <React.Fragment>
diff --git a/docs/data/joy/components/switch/SwitchControl.js b/docs/data/joy/components/switch/SwitchControl.js
index a08353c752e4cf..9d20592ed774c2 100644
--- a/docs/data/joy/components/switch/SwitchControl.js
+++ b/docs/data/joy/components/switch/SwitchControl.js
@@ -22,7 +22,7 @@ export default function SwitchLabel() {
         color={checked ? 'success' : 'neutral'}
         variant="outlined"
         endDecorator={checked ? 'On' : 'Off'}
-        componentsProps={{
+        slotProps={{
           endDecorator: {
             sx: {
               minWidth: 24,
diff --git a/docs/data/joy/components/switch/SwitchDecorators.js b/docs/data/joy/components/switch/SwitchDecorators.js
index 39f89f27f64ff3..f78a69d46880cb 100644
--- a/docs/data/joy/components/switch/SwitchDecorators.js
+++ b/docs/data/joy/components/switch/SwitchDecorators.js
@@ -8,7 +8,7 @@ export default function SwitchDecorators() {
   return (
     <Switch
       color={dark ? 'primary' : 'danger'}
-      componentsProps={{ input: { 'aria-label': 'dark mode' } }}
+      slotProps={{ input: { 'aria-label': 'dark mode' } }}
       startDecorator={
         <LocalFireDepartmentRoundedIcon
           sx={{ color: dark ? 'text.tertiary' : 'danger.600' }}
diff --git a/docs/data/joy/components/switch/switch-pt.md b/docs/data/joy/components/switch/switch-pt.md
index 87dd87139ce1a9..570e6824c8446f 100644
--- a/docs/data/joy/components/switch/switch-pt.md
+++ b/docs/data/joy/components/switch/switch-pt.md
@@ -49,7 +49,7 @@ To insert icon decorators, use the `startDecorator` and/or `endDecorator` props.
 
 ### Track child
 
-Target the track's children using the `componentsProps` prop to display a text inside of it.
+Target the track's children using the `slotProps` prop to display a text inside of it.
 
 {{"demo": "ExampleTrackChild.js"}}
 
@@ -74,13 +74,13 @@ Here are a few tips to make sure you have an accessible switch component:
 - The `Switch` will render with the `checkbox` role as opposed to `switch`. This is mainly because the latter isn't widely supported yet. However, if you believe your audience will support it, make sure to test with assistive technology. Use the `componentProps` prop to change the role:
 
   ```jsx
-  <Switch componentsProps={{ input: { role: 'switch' } }}>
+  <Switch slotProps={{ input: { role: 'switch' } }}>
   ```
 
 - Every form control component should have proper labels. This includes radio buttons, checkboxes, and switches. In most cases, this is done using the `<label>` element.
   - If a label can't be applied, make sure to add an attribute (e.g. `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `componentProps` prop.
   ```jsx
-  <Switch value="checkedA" componentsProps={{ 'aria-label': 'Switch A' }} />
+  <Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} />
   ```
 
 ## Common examples
diff --git a/docs/data/joy/components/switch/switch-zh.md b/docs/data/joy/components/switch/switch-zh.md
index 87dd87139ce1a9..570e6824c8446f 100644
--- a/docs/data/joy/components/switch/switch-zh.md
+++ b/docs/data/joy/components/switch/switch-zh.md
@@ -49,7 +49,7 @@ To insert icon decorators, use the `startDecorator` and/or `endDecorator` props.
 
 ### Track child
 
-Target the track's children using the `componentsProps` prop to display a text inside of it.
+Target the track's children using the `slotProps` prop to display a text inside of it.
 
 {{"demo": "ExampleTrackChild.js"}}
 
@@ -74,13 +74,13 @@ Here are a few tips to make sure you have an accessible switch component:
 - The `Switch` will render with the `checkbox` role as opposed to `switch`. This is mainly because the latter isn't widely supported yet. However, if you believe your audience will support it, make sure to test with assistive technology. Use the `componentProps` prop to change the role:
 
   ```jsx
-  <Switch componentsProps={{ input: { role: 'switch' } }}>
+  <Switch slotProps={{ input: { role: 'switch' } }}>
   ```
 
 - Every form control component should have proper labels. This includes radio buttons, checkboxes, and switches. In most cases, this is done using the `<label>` element.
   - If a label can't be applied, make sure to add an attribute (e.g. `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `componentProps` prop.
   ```jsx
-  <Switch value="checkedA" componentsProps={{ 'aria-label': 'Switch A' }} />
+  <Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} />
   ```
 
 ## Common examples
diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md
index 169224fb8d0ea7..2bbe73f13261ce 100644
--- a/docs/data/joy/components/switch/switch.md
+++ b/docs/data/joy/components/switch/switch.md
@@ -63,7 +63,7 @@ To insert icon decorators, use the `startDecorator` and/or `endDecorator` props.
 
 ### Track child
 
-Target the track's children using the `componentsProps` prop to display a text inside of it.
+Target the track's children using the `slotProps` prop to display a text inside of it.
 
 {{"demo": "ExampleTrackChild.js"}}
 
@@ -92,18 +92,18 @@ Here are a few tips to make sure you have an accessible switch component:
 - The `Switch` will render with the `checkbox` role as opposed to `switch`.
   This is mainly because the latter isn't widely supported yet.
   However, if you believe your audience will support it, make sure to test with assistive technology.
-  Use the `componentsProps` prop to change the role:
+  Use the `slotProps` prop to change the role:
 
   ```jsx
-  <Switch componentsProps={{ input: { role: 'switch' } }}>
+  <Switch slotProps={{ input: { role: 'switch' } }}>
   ```
 
 - Every form control component should have proper labels.
   This includes radio buttons, checkboxes, and switches.
   In most cases, this is done using the `<label>` element.
-  - If a label can't be applied, make sure to add an attribute (e.g. `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `componentsProps` prop.
+  - If a label can't be applied, make sure to add an attribute (e.g. `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `slotProps` prop.
   ```jsx
-  <Switch value="checkedA" componentsProps={{ 'aria-label': 'Switch A' }} />
+  <Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} />
   ```
 
 ## Common examples
diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
index a426f218a88651..af70ce61035921 100644
--- a/docs/data/joy/components/textarea/textarea.md
+++ b/docs/data/joy/components/textarea/textarea.md
@@ -91,7 +91,7 @@ Alternatively, you can do it manually by targeting the textarea slot:
 ```jsx
 <label htmlFor="unique-id">Label</label>
 <Textarea
-  componentsProps={{
+  slotProps={{
     textarea: {
       id: 'unique-id',
     }
diff --git a/docs/data/joy/customization/approaches/ButtonThemes.js b/docs/data/joy/customization/approaches/ButtonThemes.js
index 08ae5d7f47bb71..e3785739d8de08 100644
--- a/docs/data/joy/customization/approaches/ButtonThemes.js
+++ b/docs/data/joy/customization/approaches/ButtonThemes.js
@@ -553,7 +553,7 @@ export default function ButtonThemes() {
           >
             <FormLabel htmlFor="button-theme">Change the theme:</FormLabel>
             <Select
-              componentsProps={{
+              slotProps={{
                 button: {
                   id: 'button-theme',
                 },
diff --git a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js
index 81c9ece912d7e0..b0db2b7161b222 100644
--- a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js
+++ b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js
@@ -109,7 +109,7 @@ export default function ButtonThemes() {
           <FormLabel htmlFor="list-theme">Change the preset:</FormLabel>
           <Select
             size="sm"
-            componentsProps={{
+            slotProps={{
               button: {
                 id: 'list-theme',
               },
diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
index cb52b452355de7..a113b23928a67b 100644
--- a/docs/src/modules/components/JoyUsageDemo.tsx
+++ b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -291,7 +291,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                       }))
                     }
                     endDecorator={resolvedValue ? 'True' : 'False'}
-                    componentsProps={{
+                    slotProps={{
                       endDecorator: {
                         sx: {
                           minWidth: 30,
@@ -504,7 +504,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                   <FormLabel sx={{ textTransform: 'capitalize' }}>{propName}</FormLabel>
                   <Select
                     placeholder="Select a variant..."
-                    componentsProps={{
+                    slotProps={{
                       listbox: {
                         sx: {
                           '--List-decorator-size': '24px',
@@ -675,7 +675,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                             value={placement}
                             overlay
                             disableIcon
-                            componentsProps={{
+                            slotProps={{
                               action: ({ checked }) => ({
                                 sx: (theme) => ({
                                   ...(checked && {
diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx
index 816cd17bbdf6f0..8ef657dc55ea3e 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -175,7 +175,7 @@ export default function JoyVariablesDemo(props: {
                     variant="outlined"
                     helperText={item.helperText}
                     value={Number(resolvedValue?.replace('px', '')) || ''}
-                    componentsProps={{
+                    slotProps={{
                       input: {
                         onKeyDown: (event) => {
                           if ((event.ctrlKey || event.metaKey) && event.code === 'KeyZ') {
diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.types.ts b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.types.ts
index dda1d467114cad..53286dadfe6f4d 100644
--- a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.types.ts
+++ b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.types.ts
@@ -23,7 +23,6 @@ export interface TabPanelUnstyledOwnProps {
   slots?: {
     root?: React.ElementType;
   };
-
   /**
    * The props used for each slot inside the TabPanel.
    * @default {}
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index 999b9c399cb6f5..47e8f6815d6d14 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -62,6 +62,27 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"
 
 ### v5.0.0
 
+#### `joy-rename-components-to-slots`
+
+Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
+
+This change only affects Joy UI components.
+
+```diff
+ <Autocomplete
+-  components={{ listbox: CustomListbox }}
++  slots={{ listbox: CustomListbox }}
+-  componentsProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
++  slotProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
+ />;
+```
+
+```sh
+npx @mui/codemod v5.0.0/joy-rename-components-to-slots <path>
+```
+
+The associated breaking change was done in [#34997](https://github.com/mui/material-ui/pull/34997).
+
 #### `date-pickers-moved-to-x`
 
 Rename the imports of date and time pickers from `@mui/lab` to `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`.
diff --git a/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.js b/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.js
new file mode 100644
index 00000000000000..dd24a72cd65b92
--- /dev/null
+++ b/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.js
@@ -0,0 +1,68 @@
+function transformComponentsProp(attributeNode) {
+  attributeNode.name.name = 'slots';
+
+  const valueExpression = attributeNode.value.expression;
+  if (valueExpression?.type !== 'ObjectExpression') {
+    return;
+  }
+
+  valueExpression.properties.forEach((property) => {
+    property.key.name = property.key.name[0].toLowerCase() + property.key.name.slice(1);
+
+    if (property.shorthand) {
+      property.shorthand = false;
+    }
+  });
+}
+
+function transformComponentsPropsProp(attributeNode) {
+  attributeNode.name.name = 'slotProps';
+}
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  root
+    .find(j.ImportDeclaration)
+    .filter(({ node }) => {
+      return node.source.value.startsWith('@mui/joy');
+    })
+    .forEach((path) => {
+      path.node.specifiers.forEach((node) => {
+        // Process only Joy UI components
+        root.findJSXElements(node.local.name).forEach((elementPath) => {
+          if (elementPath.node.type !== 'JSXElement') {
+            return;
+          }
+
+          elementPath.node.openingElement.attributes.forEach((elementNode) => {
+            if (elementNode.type !== 'JSXAttribute') {
+              return;
+            }
+
+            switch (elementNode.name.name) {
+              case 'components':
+                transformComponentsProp(elementNode);
+                break;
+
+              case 'componentsProps':
+                transformComponentsPropsProp(elementNode);
+                break;
+
+              default:
+            }
+          });
+        });
+      });
+    });
+
+  const transformed = root.findJSXElements();
+
+  return transformed.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test.js b/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test.js
new file mode 100644
index 00000000000000..7b8367263e80e4
--- /dev/null
+++ b/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test.js
@@ -0,0 +1,29 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from './joy-rename-components-to-slots';
+import readFile from '../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('v5.0.0', () => {
+    describe('joy-rename-components-to-slots', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          {
+            source: read('./joy-rename-components-to-slots.test/actual.js'),
+            path: require.resolve('./joy-rename-components-to-slots.test/actual.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./joy-rename-components-to-slots.test/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});
diff --git a/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test/actual.js b/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test/actual.js
new file mode 100644
index 00000000000000..4d8b21d36e02b4
--- /dev/null
+++ b/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test/actual.js
@@ -0,0 +1,19 @@
+// the codemod should transform only Joy UI components;
+import { Alert as JoyAlert } from '@mui/joy';
+import JoyAutocomplete from '@mui/joy/Autocomplete';
+import CustomComponent from 'components/Custom';
+
+<div>
+  <JoyAlert
+    components={{ Root, Input: CustomInput }}
+    componentsProps={{ root: { className: 'root' }, input: { 'data-testid': 'input' } }}
+  />
+  <JoyAutocomplete
+    components={{ Root, Input: CustomInput }}
+    componentsProps={{ root: { className: 'root' }, input: { 'data-testid': 'input' } }}
+  />
+  <CustomComponent
+    components={{ Root, Input: CustomInput }}
+    componentsProps={{ root: { className: 'root' }, input: { 'data-testid': 'input' } }}
+  />
+</div>;
diff --git a/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test/expected.js b/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test/expected.js
new file mode 100644
index 00000000000000..221768e2d5a726
--- /dev/null
+++ b/packages/mui-codemod/src/v5.0.0/joy-rename-components-to-slots.test/expected.js
@@ -0,0 +1,19 @@
+// the codemod should transform only Joy UI components;
+import { Alert as JoyAlert } from '@mui/joy';
+import JoyAutocomplete from '@mui/joy/Autocomplete';
+import CustomComponent from 'components/Custom';
+
+<div>
+  <JoyAlert
+    slots={{ root: Root, input: CustomInput }}
+    slotProps={{ root: { className: 'root' }, input: { 'data-testid': 'input' } }}
+  />
+  <JoyAutocomplete
+    slots={{ root: Root, input: CustomInput }}
+    slotProps={{ root: { className: 'root' }, input: { 'data-testid': 'input' } }}
+  />
+  <CustomComponent
+    components={{ Root, Input: CustomInput }}
+    componentsProps={{ root: { className: 'root' }, input: { 'data-testid': 'input' } }}
+  />
+</div>;
diff --git a/packages/mui-joy/src/Alert/Alert.spec.tsx b/packages/mui-joy/src/Alert/Alert.spec.tsx
index 5fb1638d8302c3..860a99f9c21601 100644
--- a/packages/mui-joy/src/Alert/Alert.spec.tsx
+++ b/packages/mui-joy/src/Alert/Alert.spec.tsx
@@ -1,5 +1,6 @@
-import Alert from '@mui/joy/Alert';
 import * as React from 'react';
+import { expectType } from '@mui/types';
+import Alert, { AlertOwnerState } from '@mui/joy/Alert';
 
 <Alert />;
 
@@ -32,3 +33,49 @@ import * as React from 'react';
 
 // @ts-expect-error there is no size `xl2`
 <Alert size="xl2" />;
+
+<Alert
+  slots={{
+    root: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+  }}
+/>;
+<Alert
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+<Alert
+  slotProps={{
+    root: (ownerState) => {
+      expectType<AlertOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<AlertOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<AlertOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Alert/Alert.test.js b/packages/mui-joy/src/Alert/Alert.test.js
index 0839212ccc39e0..da5e7bb67c5ecb 100644
--- a/packages/mui-joy/src/Alert/Alert.test.js
+++ b/packages/mui-joy/src/Alert/Alert.test.js
@@ -8,7 +8,7 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 describe('<Alert />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Alert />, () => ({
+  describeConformance(<Alert startDecorator="1" endDecorator="2" />, () => ({
     classes,
     inheritComponent: 'div',
     render,
@@ -18,6 +18,11 @@ describe('<Alert />', () => {
     testComponentPropWith: 'span',
     testVariantProps: { variant: 'solid' },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      startDecorator: { expectedClassName: classes.startDecorator },
+      endDecorator: { expectedClassName: classes.endDecorator },
+    },
     skip: ['classesRoot', 'componentsProp'],
   }));
 
diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx
index e1de8f3f7a7f6a..9ae59c8135f0e3 100644
--- a/packages/mui-joy/src/Alert/Alert.tsx
+++ b/packages/mui-joy/src/Alert/Alert.tsx
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import { getAlertUtilityClass } from './alertClasses';
 import { AlertProps, AlertTypeMap } from './AlertProps';
 
@@ -103,7 +104,6 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
   const {
     children,
     className,
-    component = 'div',
     color = 'primary',
     role = 'alert',
     variant = 'soft',
@@ -122,28 +122,40 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
+    elementType: AlertRoot,
+    externalForwardedProps: other,
+    ownerState,
+    additionalProps: {
+      role,
+    },
+  });
+
+  const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
+    className: classes.startDecorator,
+    elementType: AlertStartDecorator,
+    externalForwardedProps: other,
+    ownerState,
+  });
+
+  const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
+    className: classes.endDecorator,
+    elementType: AlertEndDecorator,
+    externalForwardedProps: other,
+    ownerState,
+  });
+
   return (
-    <AlertRoot
-      as={component}
-      role={role}
-      ownerState={ownerState}
-      className={clsx(classes.root, className)}
-      ref={ref}
-      {...other}
-    >
+    <SlotRoot {...rootProps}>
       {startDecorator && (
-        <AlertStartDecorator className={classes.startDecorator} ownerState={ownerState}>
-          {startDecorator}
-        </AlertStartDecorator>
+        <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
       )}
 
       {children}
-      {endDecorator && (
-        <AlertEndDecorator className={classes.endDecorator} ownerState={ownerState}>
-          {endDecorator}
-        </AlertEndDecorator>
-      )}
-    </AlertRoot>
+      {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
+    </SlotRoot>
   );
 }) as OverridableComponent<AlertTypeMap>;
 
@@ -168,11 +180,6 @@ Alert.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * Element placed after the children.
    */
diff --git a/packages/mui-joy/src/Alert/AlertProps.ts b/packages/mui-joy/src/Alert/AlertProps.ts
index 8d4b36ba3ebc26..34c00ca1da8bde 100644
--- a/packages/mui-joy/src/Alert/AlertProps.ts
+++ b/packages/mui-joy/src/Alert/AlertProps.ts
@@ -1,48 +1,59 @@
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import * as React from 'react';
 import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type AlertSlot = 'root' | 'startDecorator' | 'endDecorator';
 
+export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AlertSlot,
+  {
+    root: SlotProps<'div', {}, AlertOwnerState>;
+    startDecorator: SlotProps<'span', {}, AlertOwnerState>;
+    endDecorator: SlotProps<'span', {}, AlertOwnerState>;
+  }
+>;
+
 export interface AlertPropsVariantOverrides {}
 export interface AlertPropsColorOverrides {}
 export interface AlertPropsSizeOverrides {}
 
 export interface AlertTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<ColorPaletteProp, AlertPropsColorOverrides>;
-    /**
-     * Element placed after the children.
-     */
-    endDecorator?: React.ReactNode;
-    /**
-     * The ARIA role attribute of the element.
-     * @default 'alert'
-     */
-    role?: string;
-    /**
-     * The size of the component.
-     * @default 'md'
-     */
-    size?: OverridableStringUnion<'sm' | 'md' | 'lg', AlertPropsSizeOverrides>;
-    /**
-     * Element placed before the children.
-     */
-    startDecorator?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-    /**
-     * The variant to use.
-     * @default 'soft'
-     */
-    variant?: OverridableStringUnion<VariantProp, AlertPropsVariantOverrides>;
-  };
+  props: P &
+    AlertSlotsAndSlotProps & {
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'primary'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, AlertPropsColorOverrides>;
+      /**
+       * Element placed after the children.
+       */
+      endDecorator?: React.ReactNode;
+      /**
+       * The ARIA role attribute of the element.
+       * @default 'alert'
+       */
+      role?: string;
+      /**
+       * The size of the component.
+       * @default 'md'
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', AlertPropsSizeOverrides>;
+      /**
+       * Element placed before the children.
+       */
+      startDecorator?: React.ReactNode;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+      /**
+       * The variant to use.
+       * @default 'soft'
+       */
+      variant?: OverridableStringUnion<VariantProp, AlertPropsVariantOverrides>;
+    };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/Alert/alertClasses.ts b/packages/mui-joy/src/Alert/alertClasses.ts
index 70b3c441abf313..64bdb5ba4c559d 100644
--- a/packages/mui-joy/src/Alert/alertClasses.ts
+++ b/packages/mui-joy/src/Alert/alertClasses.ts
@@ -3,12 +3,6 @@ import { generateUtilityClass, generateUtilityClasses } from '../className';
 export interface AlertClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the icon wrapper element. */
-  icon: string;
-  /** Styles applied to the action wrapper element if `action` is provided. */
-  action: string;
-  /** Styles applied to the message wrapper element. */
-  message: string;
   /** Styles applied to the root element if `color="primary"`. */
   colorPrimary: string;
   /** Styles applied to the root element if `color="danger"`. */
@@ -21,12 +15,16 @@ export interface AlertClasses {
   colorSuccess: string;
   /** Styles applied to the root element if `color="warning"`. */
   colorWarning: string;
+  /** Styles applied to the endDecorator element if supplied. */
+  endDecorator: string;
   /** Styles applied to the root element if `size="sm"`. */
   sizeSm: string;
   /** Styles applied to the root element if `size="md"`. */
   sizeMd: string;
   /** Styles applied to the root element if `size="lg"`. */
   sizeLg: string;
+  /** Styles applied to the startDecorator element if supplied. */
+  startDecorator: string;
   /** Styles applied to the root element if `variant="plain"`. */
   variantPlain: string;
   /** Styles applied to the root element if `variant="outlined"`. */
@@ -45,9 +43,8 @@ export function getAlertUtilityClass(slot: string): string {
 
 const alertClasses: AlertClasses = generateUtilityClasses('JoyAlert', [
   'root',
-  'action',
-  'icon',
-  'message',
+  'startDecorator',
+  'endDecorator',
   'colorPrimary',
   'colorDanger',
   'colorInfo',
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.spec.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.spec.tsx
new file mode 100644
index 00000000000000..57ee00ea6fb45a
--- /dev/null
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.spec.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { expectType } from '@mui/types';
+import AspectRatio, { AspectRatioOwnerState } from '@mui/joy/AspectRatio';
+
+<AspectRatio
+  slots={{
+    root: 'div',
+    content: 'div',
+  }}
+/>;
+
+<AspectRatio
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    content: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<AspectRatio
+  slotProps={{
+    root: (ownerState) => {
+      expectType<AspectRatioOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    content: (ownerState) => {
+      expectType<AspectRatioOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.test.js b/packages/mui-joy/src/AspectRatio/AspectRatio.test.js
index 57e0cc1f978943..8e4704581efd0d 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.test.js
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.test.js
@@ -8,7 +8,7 @@ import AspectRatio, { aspectRatioClasses as classes } from '@mui/joy/AspectRatio
 describe('<AspectRatio />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<AspectRatio />, () => ({
+  describeConformance(<AspectRatio>16/9</AspectRatio>, () => ({
     classes,
     inheritComponent: 'div',
     render,
@@ -18,6 +18,10 @@ describe('<AspectRatio />', () => {
     testComponentPropWith: 'span',
     testVariantProps: { variant: 'solid' },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      content: { expectedClassName: classes.content },
+    },
     skip: ['classesRoot', 'componentsProp'],
   }));
 
@@ -76,7 +80,7 @@ describe('<AspectRatio />', () => {
 
   it('able to pass the props to content slot', () => {
     const { getByTestId } = render(
-      <AspectRatio componentsProps={{ content: { 'data-testid': 'content' } }} />,
+      <AspectRatio slotProps={{ content: { 'data-testid': 'content' } }} />,
     );
     expect(getByTestId('content')).toBeVisible();
   });
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
index f5bf1c50977e31..edaf4b39f82787 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
+++ b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
-import { useThemeProps } from '../styles';
+import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import styled from '../styles/styled';
 import { getAspectRatioUtilityClass } from './aspectRatioClasses';
 import { AspectRatioProps, AspectRatioOwnerState, AspectRatioTypeMap } from './AspectRatioProps';
@@ -89,9 +89,7 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
   });
 
   const {
-    component = 'div',
     children,
-    componentsProps = {},
     ratio = '16 / 9',
     minHeight,
     maxHeight,
@@ -103,7 +101,6 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
 
   const ownerState = {
     ...props,
-    component,
     minHeight,
     maxHeight,
     objectFit,
@@ -114,35 +111,31 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
     elementType: AspectRatioRoot,
-    ownerState,
-    externalSlotProps: componentsProps.root,
     externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component,
-    },
-    className: classes.root,
+    ownerState,
   });
 
-  const contentProps = useSlotProps({
+  const [SlotContent, contentProps] = useSlot('content', {
+    className: classes.content,
     elementType: AspectRatioContent,
+    externalForwardedProps: other,
     ownerState,
-    externalSlotProps: componentsProps.content,
-    className: classes.content,
   });
 
   return (
-    <AspectRatioRoot {...rootProps}>
-      <AspectRatioContent {...contentProps}>
+    <SlotRoot {...rootProps}>
+      <SlotContent {...contentProps}>
         {React.Children.map(children, (child, index) =>
           index === 0 && React.isValidElement(child)
             ? React.cloneElement(child, { 'data-first-child': '' } as Record<string, string>)
             : child,
         )}
-      </AspectRatioContent>
-    </AspectRatioRoot>
+      </SlotContent>
+    </SlotRoot>
   );
 }) as OverridableComponent<AspectRatioTypeMap>;
 
@@ -161,19 +154,6 @@ AspectRatio.propTypes /* remove-proptypes */ = {
    * @default 'neutral'
    */
   color: PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * The maximum calculated height of the element (not the CSS height).
    */
diff --git a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts
index a028cf35ea459c..fbd9c4418c3ac0 100644
--- a/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts
+++ b/packages/mui-joy/src/AspectRatio/AspectRatioProps.ts
@@ -1,63 +1,62 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type AspectRatioSlot = 'root' | 'content';
 
 export interface AspectRatioPropsColorOverrides {}
 export interface AspectRatioPropsVariantOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'div', { sx?: SxProps }, AspectRatioOwnerState>;
-  content?: SlotComponentProps<'div', { sx?: SxProps }, AspectRatioOwnerState>;
-}
+export type AspectRatioSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AspectRatioSlot,
+  {
+    root: SlotProps<'div', {}, AspectRatioOwnerState>;
+    content: SlotProps<'div', {}, AspectRatioOwnerState>;
+  }
+>;
 
 export interface AspectRatioTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'neutral'
-     */
-    color?: OverridableStringUnion<ColorPaletteProp, AspectRatioPropsColorOverrides>;
-    /**
-     * Used to render icon or text elements inside the AspectRatio if `src` is not set.
-     * This can be an element, or just a string.
-     */
-    children?: React.ReactNode;
-    /**
-     * The props used for each slot inside the component.
-     * @default {}
-     */
-    componentsProps?: ComponentsProps;
-    /**
-     * The minimum calculated height of the element (not the CSS height).
-     */
-    minHeight?: number | string;
-    /**
-     * The maximum calculated height of the element (not the CSS height).
-     */
-    maxHeight?: number | string;
-    /**
-     * The CSS object-fit value of the first-child.
-     */
-    objectFit?: React.CSSProperties['objectFit'];
-    /**
-     * The aspect-ratio of the element. The current implementation uses padding instead of the CSS aspect-ratio due to browser support.
-     * https://caniuse.com/?search=aspect-ratio
-     * @default '16 / 9'
-     */
-    ratio?: number | string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-    /**
-     * The variant to use.
-     * @default 'soft'
-     */
-    variant?: OverridableStringUnion<VariantProp, AspectRatioPropsVariantOverrides>;
-  };
+  props: P &
+    AspectRatioSlotsAndSlotProps & {
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'neutral'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, AspectRatioPropsColorOverrides>;
+      /**
+       * Used to render icon or text elements inside the AspectRatio if `src` is not set.
+       * This can be an element, or just a string.
+       */
+      children?: React.ReactNode;
+      /**
+       * The minimum calculated height of the element (not the CSS height).
+       */
+      minHeight?: number | string;
+      /**
+       * The maximum calculated height of the element (not the CSS height).
+       */
+      maxHeight?: number | string;
+      /**
+       * The CSS object-fit value of the first-child.
+       */
+      objectFit?: React.CSSProperties['objectFit'];
+      /**
+       * The aspect-ratio of the element. The current implementation uses padding instead of the CSS aspect-ratio due to browser support.
+       * https://caniuse.com/?search=aspect-ratio
+       * @default '16 / 9'
+       */
+      ratio?: number | string;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+      /**
+       * The variant to use.
+       * @default 'soft'
+       */
+      variant?: OverridableStringUnion<VariantProp, AspectRatioPropsVariantOverrides>;
+    };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.spec.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.spec.tsx
index fea3def331f419..71b0ce3398bc20 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.spec.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.spec.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import Autocomplete from '@mui/joy/Autocomplete';
+import Autocomplete, { AutocompleteOwnerState } from '@mui/joy/Autocomplete';
+import { expectType } from '@mui/types';
 
 const top100Films = [{ title: 'The Shawshank Redemption', year: 1994 }];
 
-<Autocomplete options={[]} componentsProps={{ listbox: { disablePortal: true } }} />;
+<Autocomplete options={[]} slotProps={{ listbox: { disablePortal: true } }} />;
 
 <Autocomplete multiple placeholder="Favorites" options={[]} defaultValue={['a', 'b']} />;
 
@@ -19,7 +20,7 @@ const top100Films = [{ title: 'The Shawshank Redemption', year: 1994 }];
 
 <Autocomplete
   options={top100Films}
-  componentsProps={{
+  slotProps={{
     clearIndicator: {
       color: 'danger',
       variant: 'outlined',
@@ -41,3 +42,153 @@ const top100Films = [{ title: 'The Shawshank Redemption', year: 1994 }];
     },
   }}
 />;
+
+<Autocomplete
+  options={top100Films}
+  slots={{
+    root: 'div',
+    wrapper: 'div',
+    input: 'div',
+    clearIndicator: 'div',
+    popupIndicator: 'div',
+    listbox: 'div',
+    option: 'div',
+    loading: 'div',
+    noOptions: 'div',
+    limitTag: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+  }}
+/>;
+
+<Autocomplete
+  options={top100Films}
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    wrapper: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    input: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    clearIndicator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    popupIndicator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    listbox: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    option: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    loading: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    noOptions: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    limitTag: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Autocomplete
+  options={top100Films}
+  slotProps={{
+    root: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    wrapper: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    input: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    clearIndicator: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    popupIndicator: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    listbox: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    option: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    loading: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    noOptions: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    limitTag: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<AutocompleteOwnerState<any, any, any, any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
index 80be88419afb23..ad05a2d2f88889 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx
@@ -2064,14 +2064,14 @@ describe('Joy <Autocomplete />', () => {
     expect(handleSubmit.callCount).to.equal(1);
   });
 
-  describe('prop: componentsProps', () => {
+  describe('prop: slotProps', () => {
     it('should apply the props on the AutocompleteClearIndicator component', () => {
       render(
         <Autocomplete
           open
           options={['one', 'two']}
           value="one"
-          componentsProps={{
+          slotProps={{
             clearIndicator: {
               // @ts-ignore
               'data-testid': 'clearIndicator',
@@ -2090,7 +2090,7 @@ describe('Joy <Autocomplete />', () => {
         <Autocomplete
           open
           options={['one', 'two']}
-          componentsProps={{
+          slotProps={{
             popupIndicator: {
               // @ts-ignore
               'data-testid': 'popupIndicator',
@@ -2109,7 +2109,7 @@ describe('Joy <Autocomplete />', () => {
       render(
         <Autocomplete
           options={['one', 'two']}
-          componentsProps={{
+          slotProps={{
             listbox: {
               // @ts-ignore
               'data-testid': 'popperRoot',
diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
index 7a65b8468771cd..82f3898b1fa6de 100644
--- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
+++ b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx
@@ -744,41 +744,6 @@ Autocomplete.propTypes /* remove-proptypes */ = {
    * @default 'neutral'
    */
   color: PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
-  /**
-   * Replace the default slots.
-   */
-  components: PropTypes.shape({
-    clearIndicator: PropTypes.elementType,
-    endDecorator: PropTypes.elementType,
-    input: PropTypes.elementType,
-    limitTag: PropTypes.elementType,
-    listbox: PropTypes.elementType,
-    loading: PropTypes.elementType,
-    noOptions: PropTypes.elementType,
-    option: PropTypes.elementType,
-    popupIndicator: PropTypes.elementType,
-    root: PropTypes.elementType,
-    startDecorator: PropTypes.elementType,
-    wrapper: PropTypes.elementType,
-  }),
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    limitTag: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    loading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    noOptions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    option: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    wrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
@@ -988,7 +953,7 @@ Autocomplete.propTypes /* remove-proptypes */ = {
    */
   popupIcon: PropTypes.node,
   /**
-   * If `true`, the component becomes read-only. It is also supported in multiple tags where the tag cannot be deleted.
+   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
    * @default false
    */
   readOnly: PropTypes.bool,
diff --git a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts
index ae414f4ecaad07..0115f9daba5425 100644
--- a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts
+++ b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts
@@ -1,18 +1,30 @@
 import * as React from 'react';
-import { OverridableStringUnion } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
 import {
-  AutocompleteValue,
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
   AutocompleteCloseReason,
   AutocompleteInputChangeReason,
+  AutocompleteValue,
   UseAutocompleteProps,
 } from '@mui/base/AutocompleteUnstyled';
 import { PopperUnstyledOwnProps } from '@mui/base/PopperUnstyled';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { OverridableStringUnion } from '@mui/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export type AutocompleteSlot = keyof ComponentsProps;
+export type AutocompleteSlot =
+  | 'root'
+  | 'wrapper'
+  | 'input'
+  | 'startDecorator'
+  | 'endDecorator'
+  | 'clearIndicator'
+  | 'popupIndicator'
+  | 'listbox'
+  | 'option'
+  | 'loading'
+  | 'noOptions'
+  | 'limitTag';
 
 export interface AutocompletePropsVariantOverrides {}
 
@@ -47,288 +59,230 @@ export interface AutocompleteRenderGroupParams {
   children?: React.ReactNode;
 }
 
-interface ComponentsProps {
-  root?: SlotComponentProps<
-    'div',
-    { component?: React.ElementType; sx?: SxProps },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  wrapper?: SlotComponentProps<
-    'div',
-    { component?: React.ElementType; sx?: SxProps },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  input?: SlotComponentProps<
-    'input',
-    { component?: React.ElementType; sx?: SxProps },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  startDecorator?: SlotComponentProps<
-    'span',
-    { component?: React.ElementType; sx?: SxProps },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  endDecorator?: SlotComponentProps<
-    'span',
-    { component?: React.ElementType; sx?: SxProps },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  clearIndicator?: SlotComponentProps<
-    'button',
-    {
-      component?: React.ElementType;
-      sx?: SxProps;
-      color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
-      variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
-      size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
-    },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  popupIndicator?: SlotComponentProps<
-    'button',
-    {
-      component?: React.ElementType;
-      sx?: SxProps;
-      color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
-      variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
-      size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
-    },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  listbox?: SlotComponentProps<
-    'ul',
-    {
-      component?: React.ElementType;
-      sx?: SxProps;
-      color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
-      variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
-      size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
-    } & Omit<PopperUnstyledOwnProps, 'components' | 'componentsProps' | 'open'>,
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  option?: SlotComponentProps<
-    'li',
-    {
-      component?: React.ElementType;
-      sx?: SxProps;
-      color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
-      variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
-    },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  loading?: SlotComponentProps<
-    'div',
-    { component?: React.ElementType; sx?: SxProps },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  noOptions?: SlotComponentProps<
-    'li',
-    { component?: React.ElementType; sx?: SxProps },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-  limitTag?: SlotComponentProps<
-    'span',
-    { component?: React.ElementType; sx?: SxProps },
-    AutocompleteOwnerState<any, any, any, any>
-  >;
-}
+export type AutocompleteSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AutocompleteSlot,
+  {
+    root: SlotProps<'div', {}, AutocompleteOwnerState<any, any, any, any>>;
+    wrapper: SlotProps<'div', {}, AutocompleteOwnerState<any, any, any, any>>;
+    input: SlotProps<'input', {}, AutocompleteOwnerState<any, any, any, any>>;
+    startDecorator: SlotProps<'span', {}, AutocompleteOwnerState<any, any, any, any>>;
+    endDecorator: SlotProps<'span', {}, AutocompleteOwnerState<any, any, any, any>>;
+    clearIndicator: SlotProps<
+      'button',
+      {
+        color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
+        variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
+        size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
+      },
+      AutocompleteOwnerState<any, any, any, any>
+    >;
+    popupIndicator: SlotProps<
+      'button',
+      {
+        color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
+        variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
+        size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
+      },
+      AutocompleteOwnerState<any, any, any, any>
+    >;
+    listbox: SlotProps<
+      'ul',
+      {
+        color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
+        variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
+        size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
+      } & Omit<PopperUnstyledOwnProps, 'components' | 'componentsProps' | 'open'>,
+      AutocompleteOwnerState<any, any, any, any>
+    >;
+    option: SlotProps<
+      'li',
+      {
+        color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
+        variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
+      },
+      AutocompleteOwnerState<any, any, any, any>
+    >;
+    loading: SlotProps<'div', {}, AutocompleteOwnerState<any, any, any, any>>;
+    noOptions: SlotProps<'li', {}, AutocompleteOwnerState<any, any, any, any>>;
+    limitTag: SlotProps<'span', {}, AutocompleteOwnerState<any, any, any, any>>;
+  }
+>;
 
-interface AutocompleteOwnProps<
+type AutocompleteOwnProps<
   T,
   Multiple extends boolean | undefined,
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
-> extends UseAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> {
-  /**
-   * If `true`, the `input` element is focused during the first mount.
-   */
-  autoFocus?: boolean;
-  /**
-   * The icon to display in place of the default clear icon.
-   * @default <ClearIcon fontSize="small" />
-   */
-  clearIcon?: React.ReactNode;
-  /**
-   * Override the default text for the *clear* icon button.
-   *
-   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-   * @default 'Clear'
-   */
-  clearText?: string;
-  /**
-   * Override the default text for the *close popup* icon button.
-   *
-   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-   * @default 'Close'
-   */
-  closeText?: string;
-  /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   * @default 'neutral'
-   */
-  color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
-  /**
-   * Replace the default slots.
-   */
-  components?: {
-    root?: React.ElementType;
-    wrapper?: React.ElementType;
-    input?: React.ElementType;
-    startDecorator?: React.ElementType;
-    endDecorator?: React.ElementType;
-    clearIndicator?: React.ElementType;
-    popupIndicator?: React.ElementType;
-    listbox?: React.ElementType;
-    option?: React.ElementType;
-    loading?: React.ElementType;
-    noOptions?: React.ElementType;
-    limitTag?: React.ElementType;
+> = UseAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> &
+  AutocompleteSlotsAndSlotProps & {
+    /**
+     * If `true`, the `input` element is focused during the first mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * The icon to display in place of the default clear icon.
+     * @default <ClearIcon fontSize="small" />
+     */
+    clearIcon?: React.ReactNode;
+    /**
+     * Override the default text for the *clear* icon button.
+     *
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+     * @default 'Clear'
+     */
+    clearText?: string;
+    /**
+     * Override the default text for the *close popup* icon button.
+     *
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+     * @default 'Close'
+     */
+    closeText?: string;
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'neutral'
+     */
+    color?: OverridableStringUnion<ColorPaletteProp, AutocompletePropsColorOverrides>;
+    /**
+     * The default value. Use when the component is not controlled.
+     * @default props.multiple ? [] : null
+     */
+    defaultValue?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the `input` will indicate an error.
+     * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+     */
+    error?: boolean;
+    /**
+     * Trailing adornment for this input.
+     */
+    endDecorator?: React.ReactNode;
+    /**
+     * Force the visibility display of the popup icon.
+     * @default 'auto'
+     */
+    forcePopupIcon?: true | false | 'auto';
+    /**
+     * The label to display when the tags are truncated (`limitTags`).
+     *
+     * @param {number} more The number of truncated tags.
+     * @returns {ReactNode}
+     * @default (more) => `+${more}`
+     */
+    getLimitTagsText?: (more: number) => React.ReactNode;
+    /**
+     * If `true`, the component is in a loading state.
+     * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Text to display when in a loading state.
+     *
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+     * @default 'Loading…'
+     */
+    loadingText?: React.ReactNode;
+    /**
+     * The maximum number of tags that will be visible when not focused.
+     * Set `-1` to disable the limit.
+     * @default -1
+     */
+    limitTags?: number;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Text to display when there are no options.
+     *
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+     * @default 'No options'
+     */
+    noOptionsText?: React.ReactNode;
+    /**
+     * Override the default text for the *open popup* icon button.
+     *
+     * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
+     * @default 'Open'
+     */
+    openText?: string;
+    /**
+     * The input placeholder
+     */
+    placeholder?: string;
+    /**
+     * The icon to display in place of the default popup icon.
+     * @default <ArrowDropDownIcon />
+     */
+    popupIcon?: React.ReactNode;
+    /**
+     * If `true`, the component becomes read-only. It is also supported in multiple tags where the tag cannot be deleted.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Render the group.
+     *
+     * @param {AutocompleteRenderGroupParams} params The group to render.
+     * @returns {ReactNode}
+     */
+    renderGroup?: (params: AutocompleteRenderGroupParams) => React.ReactNode;
+    /**
+     * Render the option, use `getOptionLabel` by default.
+     *
+     * @param {object} props The props to apply on the li element.
+     * @param {T} option The option to render.
+     * @param {object} state The state of the component.
+     * @returns {ReactNode}
+     */
+    renderOption?: (
+      props: Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>,
+      option: T,
+      state: AutocompleteRenderOptionState,
+    ) => React.ReactNode;
+    /**
+     * Render the selected value.
+     *
+     * @param {T[]} value The `value` provided to the component.
+     * @param {function} getTagProps A tag props getter.
+     * @param {object} ownerState The state of the Autocomplete component.
+     * @returns {ReactNode}
+     */
+    renderTags?: (
+      value: T[],
+      getTagProps: AutocompleteRenderGetTagProps,
+      ownerState: AutocompleteOwnerState<T, Multiple, DisableClearable, FreeSolo>,
+    ) => React.ReactNode;
+    /**
+     * If `true`, the `input` element is required.
+     * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+     */
+    required?: boolean;
+    /**
+     * The size of the component.
+     * @default 'md'
+     */
+    size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
+    /**
+     * Leading adornment for this input.
+     */
+    startDecorator?: React.ReactNode;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps;
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
   };
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  componentsProps?: ComponentsProps;
-  /**
-   * The default value. Use when the component is not controlled.
-   * @default props.multiple ? [] : null
-   */
-  defaultValue?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If `true`, the `input` will indicate an error.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  error?: boolean;
-  /**
-   * Trailing adornment for this input.
-   */
-  endDecorator?: React.ReactNode;
-  /**
-   * Force the visibility display of the popup icon.
-   * @default 'auto'
-   */
-  forcePopupIcon?: true | false | 'auto';
-  /**
-   * The label to display when the tags are truncated (`limitTags`).
-   *
-   * @param {number} more The number of truncated tags.
-   * @returns {ReactNode}
-   * @default (more) => `+${more}`
-   */
-  getLimitTagsText?: (more: number) => React.ReactNode;
-  /**
-   * If `true`, the component is in a loading state.
-   * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * Text to display when in a loading state.
-   *
-   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-   * @default 'Loading…'
-   */
-  loadingText?: React.ReactNode;
-  /**
-   * The maximum number of tags that will be visible when not focused.
-   * Set `-1` to disable the limit.
-   * @default -1
-   */
-  limitTags?: number;
-  /**
-   * Name attribute of the `input` element.
-   */
-  name?: string;
-  /**
-   * Text to display when there are no options.
-   *
-   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-   * @default 'No options'
-   */
-  noOptionsText?: React.ReactNode;
-  /**
-   * Override the default text for the *open popup* icon button.
-   *
-   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-   * @default 'Open'
-   */
-  openText?: string;
-  /**
-   * The input placeholder
-   */
-  placeholder?: string;
-  /**
-   * The icon to display in place of the default popup icon.
-   * @default <ArrowDropDownIcon />
-   */
-  popupIcon?: React.ReactNode;
-  /**
-   * If `true`, the component becomes read-only. It is also supported in multiple tags where the tag cannot be deleted.
-   * @default false
-   */
-  readOnly?: boolean;
-  /**
-   * Render the group.
-   *
-   * @param {AutocompleteRenderGroupParams} params The group to render.
-   * @returns {ReactNode}
-   */
-  renderGroup?: (params: AutocompleteRenderGroupParams) => React.ReactNode;
-  /**
-   * Render the option, use `getOptionLabel` by default.
-   *
-   * @param {object} props The props to apply on the li element.
-   * @param {T} option The option to render.
-   * @param {object} state The state of the component.
-   * @returns {ReactNode}
-   */
-  renderOption?: (
-    props: Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>,
-    option: T,
-    state: AutocompleteRenderOptionState,
-  ) => React.ReactNode;
-  /**
-   * Render the selected value.
-   *
-   * @param {T[]} value The `value` provided to the component.
-   * @param {function} getTagProps A tag props getter.
-   * @param {object} ownerState The state of the Autocomplete component.
-   * @returns {ReactNode}
-   */
-  renderTags?: (
-    value: T[],
-    getTagProps: AutocompleteRenderGetTagProps,
-    ownerState: AutocompleteOwnerState<T, Multiple, DisableClearable, FreeSolo>,
-  ) => React.ReactNode;
-  /**
-   * If `true`, the `input` element is required.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  required?: boolean;
-  /**
-   * The size of the component.
-   * @default 'md'
-   */
-  size?: OverridableStringUnion<'sm' | 'md' | 'lg', AutocompletePropsSizeOverrides>;
-  /**
-   * Leading adornment for this input.
-   */
-  startDecorator?: React.ReactNode;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps;
-  /**
-   * The variant to use.
-   * @default 'outlined'
-   */
-  variant?: OverridableStringUnion<VariantProp, AutocompletePropsVariantOverrides>;
-}
 
 export interface AutocompleteProps<
   T,
@@ -352,10 +306,10 @@ export interface AutocompleteOwnerState<
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
 > extends AutocompleteOwnProps<T, Multiple, DisableClearable, FreeSolo> {
-  focused: boolean;
-  hasClearIcon: boolean;
-  hasPopupIcon: boolean;
-  hasOptions: boolean;
-  inputFocused: boolean;
-  popupOpen: boolean;
+  focused?: boolean;
+  hasClearIcon?: boolean;
+  hasPopupIcon?: boolean;
+  hasOptions?: boolean;
+  inputFocused?: boolean;
+  popupOpen?: boolean;
 }
diff --git a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
index 810c38f70c6d59..738688f6934981 100644
--- a/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
+++ b/packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
-import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/base/composeClasses';
 import { StyledList } from '../List/List';
 import { styled, useThemeProps } from '../styles';
@@ -91,6 +91,7 @@ const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProp
 
   const {
     children,
+    className,
     component,
     color = 'neutral',
     variant = 'outlined',
@@ -101,7 +102,6 @@ const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProp
   const ownerState = {
     ...props,
     size,
-    component,
     color,
     variant,
     nesting: false,
@@ -113,20 +113,18 @@ const AutocompleteListbox = React.forwardRef(function AutocompleteListbox(inProp
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
-    elementType: AutocompleteListbox,
-    externalSlotProps: {},
-    externalForwardedProps: other,
-    ownerState,
-    additionalProps: {
-      ref,
-      as: component,
-      role: 'listbox',
-    },
-    className: classes.root,
-  });
-
-  return <AutocompleteListboxRoot {...rootProps}>{children}</AutocompleteListboxRoot>;
+  return (
+    <AutocompleteListboxRoot
+      ref={ref}
+      as={component}
+      ownerState={ownerState}
+      className={clsx(classes.root, className)}
+      role="listbox"
+      {...other}
+    >
+      {children}
+    </AutocompleteListboxRoot>
+  );
 }) as OverridableComponent<AutocompleteListboxTypeMap>;
 
 AutocompleteListbox.propTypes /* remove-proptypes */ = {
@@ -138,6 +136,10 @@ AutocompleteListbox.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'neutral'
diff --git a/packages/mui-joy/src/Avatar/Avatar.spec.tsx b/packages/mui-joy/src/Avatar/Avatar.spec.tsx
index 1e85b053c7e6d9..513b1c181f901e 100644
--- a/packages/mui-joy/src/Avatar/Avatar.spec.tsx
+++ b/packages/mui-joy/src/Avatar/Avatar.spec.tsx
@@ -1,5 +1,6 @@
-import Avatar from '@mui/joy/Avatar';
 import * as React from 'react';
+import Avatar, { AvatarOwnerState } from '@mui/joy/Avatar';
+import { expectType } from '@mui/types';
 
 <Avatar />;
 
@@ -32,3 +33,51 @@ import * as React from 'react';
 
 // @ts-expect-error there is no size `xl2`
 <Avatar size="xl2" />;
+
+<Avatar
+  slots={{
+    root: 'div',
+    img: 'div',
+    fallback: 'div',
+  }}
+/>;
+
+<Avatar
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    img: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    fallback: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Avatar
+  slotProps={{
+    root: (ownerState) => {
+      expectType<AvatarOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    img: (ownerState) => {
+      expectType<AvatarOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    fallback: (ownerState) => {
+      expectType<AvatarOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Avatar/Avatar.test.js b/packages/mui-joy/src/Avatar/Avatar.test.js
index 5a0ecfc2558968..1c3539c39bd6b6 100644
--- a/packages/mui-joy/src/Avatar/Avatar.test.js
+++ b/packages/mui-joy/src/Avatar/Avatar.test.js
@@ -21,6 +21,10 @@ describe('<Avatar />', () => {
     testDeepOverrides: { slotName: 'fallback', slotClassName: classes.fallback },
     testVariantProps: { variant: 'solid' },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      fallback: { expectedClassName: classes.fallback },
+    },
     skip: ['classesRoot', 'componentsProp'],
   }));
 
@@ -96,9 +100,7 @@ describe('<Avatar />', () => {
 
     it('should be able to add more props to the image', () => {
       const onError = spy();
-      const { container } = render(
-        <Avatar src="/fake.png" componentsProps={{ img: { onError } }} />,
-      );
+      const { container } = render(<Avatar src="/fake.png" slotProps={{ img: { onError } }} />);
       const img = container.querySelector('img');
       fireEvent.error(img);
       expect(onError.callCount).to.equal(1);
@@ -116,9 +118,7 @@ describe('<Avatar />', () => {
 
     it('should be able to add more props to the image', () => {
       const onError = spy();
-      const { container } = render(
-        <Avatar src="/fake.png" componentsProps={{ img: { onError } }} />,
-      );
+      const { container } = render(<Avatar src="/fake.png" slotProps={{ img: { onError } }} />);
       const img = container.querySelector('img');
       fireEvent.error(img);
       expect(onError.callCount).to.equal(1);
diff --git a/packages/mui-joy/src/Avatar/Avatar.tsx b/packages/mui-joy/src/Avatar/Avatar.tsx
index 1102657613f33e..657aec9ee96d59 100644
--- a/packages/mui-joy/src/Avatar/Avatar.tsx
+++ b/packages/mui-joy/src/Avatar/Avatar.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import styled from '../styles/styled';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
@@ -147,8 +147,6 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
   const {
     alt,
     color: colorProp = 'neutral',
-    component = 'div',
-    componentsProps = {},
     size: sizeProp = 'md',
     variant: variantProp = 'soft',
     imgProps,
@@ -166,31 +164,22 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
   const ownerState = {
     ...props,
     color,
-    component,
     size,
     variant,
     grouped: !!groupContext,
   };
 
-  // Use a hook instead of onError on the img element to support server-side rendering.
-  const loaded = useLoaded({
-    ...imgProps,
-    ...(typeof componentsProps.img === 'function'
-      ? componentsProps.img(ownerState)
-      : componentsProps.img),
-    src,
-    srcSet,
-  });
-
-  const hasImg = src || srcSet;
-  const hasImgNotFailing = hasImg && loaded !== 'error';
-
   const classes = useUtilityClasses(ownerState);
 
-  const imageProps = useSlotProps({
-    elementType: AvatarImg,
-    externalSlotProps: componentsProps.img,
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
+    elementType: AvatarRoot,
+    externalForwardedProps: other,
     ownerState,
+  });
+
+  const [SlotImg, imageProps] = useSlot('img', {
     additionalProps: {
       alt,
       src,
@@ -198,38 +187,40 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
       ...imgProps,
     },
     className: classes.img,
+    elementType: AvatarImg,
+    externalForwardedProps: other,
+    ownerState,
   });
 
-  const fallbackProps = useSlotProps({
+  const [SlotFallback, fallbackProps] = useSlot('fallback', {
+    className: classes.fallback,
     elementType: AvatarFallback,
-    externalSlotProps: componentsProps.fallback,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.fallback,
   });
 
+  // Use a hook instead of onError on the img element to support server-side rendering.
+  const loaded = useLoaded({
+    ...imgProps,
+    ...imageProps,
+    src,
+    srcSet,
+  });
+
+  const hasImg = src || srcSet;
+  const hasImgNotFailing = hasImg && loaded !== 'error';
+
   if (hasImgNotFailing) {
-    children = <AvatarImg {...imageProps} />;
+    children = <SlotImg {...imageProps} />;
   } else if (childrenProp != null) {
     children = childrenProp;
   } else if (hasImg && alt) {
     children = alt[0];
   } else {
-    children = <AvatarFallback {...fallbackProps} />;
+    children = <SlotFallback {...fallbackProps} />;
   }
 
-  const rootProps = useSlotProps({
-    elementType: AvatarRoot,
-    externalSlotProps: componentsProps.root,
-    ownerState,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component,
-    },
-    className: classes.root,
-  });
-
-  return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;
+  return <SlotRoot {...rootProps}>{children}</SlotRoot>;
 }) as OverridableComponent<AvatarTypeMap>;
 
 Avatar.propTypes /* remove-proptypes */ = {
@@ -255,20 +246,6 @@ Avatar.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    fallback: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
diff --git a/packages/mui-joy/src/Avatar/AvatarProps.ts b/packages/mui-joy/src/Avatar/AvatarProps.ts
index cd8eef9623054b..a1b43d176c93dd 100644
--- a/packages/mui-joy/src/Avatar/AvatarProps.ts
+++ b/packages/mui-joy/src/Avatar/AvatarProps.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type AvatarSlot = 'root' | 'img' | 'fallback';
 
@@ -9,66 +9,65 @@ export interface AvatarPropsColorOverrides {}
 export interface AvatarPropsVariantOverrides {}
 export interface AvatarPropsSizeOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'div', { sx?: SxProps }, AvatarOwnerState>;
-  img?: SlotComponentProps<'img', { sx?: SxProps }, AvatarOwnerState>;
-  fallback?: SlotComponentProps<'svg', { sx?: SxProps }, AvatarOwnerState>;
-}
+export type AvatarSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AvatarSlot,
+  {
+    root: SlotProps<'div', {}, AvatarOwnerState>;
+    img: SlotProps<'img', {}, AvatarOwnerState>;
+    fallback: SlotProps<'svg', {}, AvatarOwnerState>;
+  }
+>;
 
 export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    /**
-     * Used in combination with `src` or `srcSet` to
-     * provide an alt attribute for the rendered `img` element.
-     */
-    alt?: string;
-    /**
-     * Used to render icon or text elements inside the Avatar if `src` is not set.
-     * This can be an element, or just a string.
-     */
-    children?: React.ReactNode;
-    /**
-     * The props used for each slot inside the component.
-     * @default {}
-     */
-    componentsProps?: ComponentsProps;
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'neutral'
-     */
-    color?: OverridableStringUnion<ColorPaletteProp, AvatarPropsColorOverrides>;
-    /**
-     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
-     * It can be used to listen for the loading error event.
-     */
-    imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
+  props: P &
+    AvatarSlotsAndSlotProps & {
+      /**
+       * Used in combination with `src` or `srcSet` to
+       * provide an alt attribute for the rendered `img` element.
+       */
+      alt?: string;
+      /**
+       * Used to render icon or text elements inside the Avatar if `src` is not set.
+       * This can be an element, or just a string.
+       */
+      children?: React.ReactNode;
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'neutral'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, AvatarPropsColorOverrides>;
+      /**
+       * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
+       * It can be used to listen for the loading error event.
+       */
+      imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
+        sx?: SxProps;
+      };
+      /**
+       * The size of the component.
+       * It accepts theme values between 'sm' and 'lg'.
+       * @default 'md'
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', AvatarPropsSizeOverrides>;
+      /**
+       * The `src` attribute for the `img` element.
+       */
+      src?: string;
+      /**
+       * The `srcSet` attribute for the `img` element.
+       * Use this attribute for responsive image display.
+       */
+      srcSet?: string;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
       sx?: SxProps;
+      /**
+       * The variant to use.
+       * @default 'soft'
+       */
+      variant?: OverridableStringUnion<VariantProp, AvatarPropsVariantOverrides>;
     };
-    /**
-     * The size of the component.
-     * It accepts theme values between 'sm' and 'lg'.
-     * @default 'md'
-     */
-    size?: OverridableStringUnion<'sm' | 'md' | 'lg', AvatarPropsSizeOverrides>;
-    /**
-     * The `src` attribute for the `img` element.
-     */
-    src?: string;
-    /**
-     * The `srcSet` attribute for the `img` element.
-     * Use this attribute for responsive image display.
-     */
-    srcSet?: string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-    /**
-     * The variant to use.
-     * @default 'soft'
-     */
-    variant?: OverridableStringUnion<VariantProp, AvatarPropsVariantOverrides>;
-  };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/Badge/Badge.spec.tsx b/packages/mui-joy/src/Badge/Badge.spec.tsx
index b6ba239b5b59fb..bed59927bac9dc 100644
--- a/packages/mui-joy/src/Badge/Badge.spec.tsx
+++ b/packages/mui-joy/src/Badge/Badge.spec.tsx
@@ -1,5 +1,6 @@
-import Badge from '@mui/joy/Badge';
 import * as React from 'react';
+import Badge, { BadgeOwnerState } from '@mui/joy/Badge';
+import { expectType } from '@mui/types';
 
 <Badge />;
 
@@ -26,3 +27,40 @@ import * as React from 'react';
 
 // @ts-expect-error there is no elevation `xl2`
 <Badge elevation="xl2" />;
+
+<Badge
+  slots={{
+    root: 'div',
+    badge: 'div',
+  }}
+/>;
+
+<Badge
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    badge: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Badge
+  slotProps={{
+    root: (ownerState) => {
+      expectType<BadgeOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    badge: (ownerState) => {
+      expectType<BadgeOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Badge/Badge.test.js b/packages/mui-joy/src/Badge/Badge.test.js
index 9400d0f0d6e5f2..0841b89083f6c7 100644
--- a/packages/mui-joy/src/Badge/Badge.test.js
+++ b/packages/mui-joy/src/Badge/Badge.test.js
@@ -22,7 +22,7 @@ describe('<Badge />', () => {
   };
 
   describeConformance(
-    <Badge>
+    <Badge badgeContent="1">
       <button />
     </Badge>,
     () => ({
@@ -34,6 +34,10 @@ describe('<Badge />', () => {
       muiName: 'JoyBadge',
       testVariantProps: { color: 'neutral', variant: 'soft' },
       testCustomVariant: true,
+      slots: {
+        root: { expectedClassName: classes.root },
+        badge: { expectedClassName: classes.badge },
+      },
       skip: ['classesRoot', 'componentsProp'],
     }),
   );
diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx
index 76312db102b56b..39c25b6e2dbf15 100644
--- a/packages/mui-joy/src/Badge/Badge.tsx
+++ b/packages/mui-joy/src/Badge/Badge.tsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize, usePreviousProps } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { BadgeProps, BadgeOwnerState, BadgeTypeMap } from './BadgeProps';
 
@@ -146,8 +146,6 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
     },
     badgeInset: badgeInsetProp = 0,
     children,
-    component = 'span',
-    componentsProps = {},
     size: sizeProp = 'md',
     color: colorProp = 'primary',
     invisible: invisibleProp = false,
@@ -192,30 +190,26 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
     displayValue = '';
   }
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
     elementType: BadgeRoot,
-    ownerState,
-    externalSlotProps: componentsProps.root,
     externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component,
-    },
-    className: classes.root,
+    ownerState,
   });
 
-  const badgeProps = useSlotProps({
+  const [SlotBadge, badgeProps] = useSlot('badge', {
+    className: classes.badge,
     elementType: BadgeBadge,
+    externalForwardedProps: other,
     ownerState,
-    externalSlotProps: componentsProps.badge,
-    className: classes.badge,
   });
 
   return (
-    <BadgeRoot {...rootProps}>
+    <SlotRoot {...rootProps}>
       {children}
-      <BadgeBadge {...badgeProps}>{displayValue}</BadgeBadge>
-    </BadgeRoot>
+      <SlotBadge {...badgeProps}>{displayValue}</SlotBadge>
+    </SlotRoot>
   );
 }) as OverridableComponent<BadgeTypeMap>;
 
@@ -256,19 +250,6 @@ Badge.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * If `true`, the badge is invisible.
    * @default false
diff --git a/packages/mui-joy/src/Badge/BadgeProps.ts b/packages/mui-joy/src/Badge/BadgeProps.ts
index 177e64f8b25825..a4619198d86587 100644
--- a/packages/mui-joy/src/Badge/BadgeProps.ts
+++ b/packages/mui-joy/src/Badge/BadgeProps.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types';
 
 export type BadgeSlot = 'root' | 'badge';
 
@@ -16,74 +16,73 @@ export interface BadgeOrigin {
   horizontal: 'left' | 'right';
 }
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'div', { sx?: SxProps }, BadgeOwnerState>;
-  badge?: SlotComponentProps<'div', { sx?: SxProps }, BadgeOwnerState>;
-}
+export type BadgeSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  BadgeSlot,
+  {
+    root: SlotProps<'div', {}, BadgeOwnerState>;
+    badge: SlotProps<'div', {}, BadgeOwnerState>;
+  }
+>;
 
 export interface BadgeTypeMap<D extends React.ElementType = 'span', P = {}> {
-  props: P & {
-    /**
-     * The anchor of the badge.
-     * @default {
-     *   vertical: 'top',
-     *   horizontal: 'right',
-     * }
-     */
-    anchorOrigin?: BadgeOrigin;
-    /**
-     * The content rendered within the badge.
-     */
-    badgeContent?: React.ReactNode;
-    /**
-     * The inset of the badge. Support shorthand syntax as described in https://developer.mozilla.org/en-US/docs/Web/CSS/inset.
-     * @default 0
-     */
-    badgeInset?: number | string;
-    /**
-     * The badge will be added relative to this node.
-     */
-    children?: React.ReactNode;
-    /**
-     * The props used for each slot inside the component.
-     * @default {}
-     */
-    componentsProps?: ComponentsProps;
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<ColorPaletteProp, BadgePropsColorOverrides>;
-    /**
-     * If `true`, the badge is invisible.
-     * @default false
-     */
-    invisible?: boolean;
-    /**
-     * Max count to show.
-     * @default 99
-     */
-    max?: number;
-    /**
-     * The size of the component.
-     * @default 'md'
-     */
-    size?: OverridableStringUnion<'sm' | 'md' | 'lg', BadgePropsSizeOverrides>;
-    /**
-     * Controls whether the badge is hidden when `badgeContent` is zero.
-     * @default false
-     */
-    showZero?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-    /**
-     * The variant to use.
-     * @default 'solid'
-     */
-    variant?: OverridableStringUnion<VariantProp, BadgePropsVariantOverrides>;
-  };
+  props: P &
+    BadgeSlotsAndSlotProps & {
+      /**
+       * The anchor of the badge.
+       * @default {
+       *   vertical: 'top',
+       *   horizontal: 'right',
+       * }
+       */
+      anchorOrigin?: BadgeOrigin;
+      /**
+       * The content rendered within the badge.
+       */
+      badgeContent?: React.ReactNode;
+      /**
+       * The inset of the badge. Support shorthand syntax as described in https://developer.mozilla.org/en-US/docs/Web/CSS/inset.
+       * @default 0
+       */
+      badgeInset?: number | string;
+      /**
+       * The badge will be added relative to this node.
+       */
+      children?: React.ReactNode;
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'primary'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, BadgePropsColorOverrides>;
+      /**
+       * If `true`, the badge is invisible.
+       * @default false
+       */
+      invisible?: boolean;
+      /**
+       * Max count to show.
+       * @default 99
+       */
+      max?: number;
+      /**
+       * The size of the component.
+       * @default 'md'
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', BadgePropsSizeOverrides>;
+      /**
+       * Controls whether the badge is hidden when `badgeContent` is zero.
+       * @default false
+       */
+      showZero?: boolean;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+      /**
+       * The variant to use.
+       * @default 'solid'
+       */
+      variant?: OverridableStringUnion<VariantProp, BadgePropsVariantOverrides>;
+    };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.spec.tsx b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.spec.tsx
index fe2d767f75e6c3..038aeaf63e8fa9 100644
--- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.spec.tsx
+++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.spec.tsx
@@ -1,4 +1,5 @@
-import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Breadcrumbs, { BreadcrumbsOwnerState } from '@mui/joy/Breadcrumbs';
+import { expectType } from '@mui/types';
 import * as React from 'react';
 
 <Breadcrumbs />;
@@ -14,3 +15,60 @@ import * as React from 'react';
 <Breadcrumbs size="xs" />;
 // @ts-expect-error there is no size `xl`
 <Breadcrumbs size="xl" />;
+
+<Breadcrumbs
+  slots={{
+    root: 'div',
+    ol: 'div',
+    li: 'div',
+    separator: 'div',
+  }}
+/>;
+
+<Breadcrumbs
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    ol: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    li: {
+      component: 'div',
+    },
+    separator: {
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Breadcrumbs
+  slotProps={{
+    root: (ownerState) => {
+      expectType<BreadcrumbsOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    ol: (ownerState) => {
+      expectType<BreadcrumbsOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    li: (ownerState) => {
+      expectType<BreadcrumbsOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    separator: (ownerState) => {
+      expectType<BreadcrumbsOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.js b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.js
index 58df2d4295f01f..3459726353b741 100644
--- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.js
+++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.test.js
@@ -17,6 +17,10 @@ describe('<Breadcrumbs />', () => {
     refInstanceof: window.HTMLElement,
     testVariantProps: { variant: 'solid' },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      ol: { expectedClassName: classes.ol },
+    },
     skip: ['classesRoot', 'componentsProp'],
   }));
 
diff --git a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
index 886001804675f8..b5e5c52459b087 100644
--- a/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/mui-joy/src/Breadcrumbs/Breadcrumbs.tsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import clsx from 'clsx';
 import { useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import styled from '../styles/styled';
 import { getBreadcrumbsUtilityClass } from './breadcrumbsClasses';
 import { BreadcrumbsProps, BreadcrumbsOwnerState, BreadcrumbsTypeMap } from './BreadcrumbsProps';
@@ -82,59 +82,46 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) {
     name: 'JoyBreadcrumbs',
   });
 
-  const {
-    children,
-    className,
-    component = 'nav',
-    componentsProps = {},
-    size = 'md',
-    separator = '/',
-    ...other
-  } = props;
+  const { children, className, size = 'md', separator = '/', ...other } = props;
 
   const ownerState = {
     ...props,
-    component,
     separator,
     size,
   };
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
     elementType: BreadcrumbsRoot,
-    externalSlotProps: componentsProps.root,
     externalForwardedProps: other,
     ownerState,
-    additionalProps: {
-      ref,
-      as: component,
-    },
-    className: clsx(classes.root, className),
   });
 
-  const olProps = useSlotProps({
+  const [SlotOl, olProps] = useSlot('ol', {
+    className: classes.ol,
     elementType: BreadcrumbsOl,
-    externalSlotProps: componentsProps.ol,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.ol,
   });
 
-  const liProps = useSlotProps({
+  const [SlotLi, liProps] = useSlot('li', {
+    className: classes.li,
     elementType: BreadcrumbsLi,
-    externalSlotProps: componentsProps.li,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.li,
   });
 
-  const separatorProps = useSlotProps({
-    elementType: BreadcrumbsSeparator,
-    externalSlotProps: componentsProps.separator,
-    ownerState,
+  const [SlotSeparator, separatorProps] = useSlot('separator', {
     additionalProps: {
       'aria-hidden': true,
     },
     className: classes.separator,
+    elementType: BreadcrumbsSeparator,
+    externalForwardedProps: other,
+    ownerState,
   });
 
   const allItems = React.Children.toArray(children)
@@ -142,29 +129,29 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(inProps, ref) {
       return React.isValidElement(child);
     })
     .map((child, index) => (
-      <BreadcrumbsLi key={`child-${index}`} {...liProps}>
+      <SlotLi key={`child-${index}`} {...liProps}>
         {child}
-      </BreadcrumbsLi>
+      </SlotLi>
     ));
 
   return (
-    <BreadcrumbsRoot {...rootProps}>
-      <BreadcrumbsOl {...olProps}>
+    <SlotRoot {...rootProps}>
+      <SlotOl {...olProps}>
         {allItems.reduce((acc: React.ReactNode[], current: React.ReactNode, index: number) => {
           if (index < allItems.length - 1) {
             acc = acc.concat(
               current,
-              <BreadcrumbsSeparator key={`separator-${index}`} {...separatorProps}>
+              <SlotSeparator key={`separator-${index}`} {...separatorProps}>
                 {separator}
-              </BreadcrumbsSeparator>,
+              </SlotSeparator>,
             );
           } else {
             acc.push(current);
           }
           return acc;
         }, [])}
-      </BreadcrumbsOl>
-    </BreadcrumbsRoot>
+      </SlotOl>
+    </SlotRoot>
   );
 }) as OverridableComponent<BreadcrumbsTypeMap>;
 
@@ -181,21 +168,6 @@ Breadcrumbs.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    li: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    ol: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    separator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * Custom separator node.
    * @default '/'
diff --git a/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts b/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts
index a1ac7e05081521..36de94a0fb378f 100644
--- a/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts
+++ b/packages/mui-joy/src/Breadcrumbs/BreadcrumbsProps.ts
@@ -1,46 +1,45 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
 import { SxProps } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type BreadcrumbsSlot = 'root' | 'ol' | 'li' | 'separator';
 
 export interface BreadcrumbsPropsSizeOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'nav', { sx?: SxProps }, BreadcrumbsOwnerState>;
-  ol?: SlotComponentProps<'ol', { sx?: SxProps }, BreadcrumbsOwnerState>;
-  li?: SlotComponentProps<'li', { sx?: SxProps }, BreadcrumbsOwnerState>;
-  separator?: SlotComponentProps<'li', { sx?: SxProps }, BreadcrumbsOwnerState>;
-}
+export type BreadcrumbsSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  BreadcrumbsSlot,
+  {
+    root: SlotProps<'nav', {}, BreadcrumbsOwnerState>;
+    ol: SlotProps<'ol', {}, BreadcrumbsOwnerState>;
+    li: SlotProps<'li', {}, BreadcrumbsOwnerState>;
+    separator: SlotProps<'li', {}, BreadcrumbsOwnerState>;
+  }
+>;
 
 export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'> {
-  props: P & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * The props used for each slot inside the component.
-     * @default {}
-     */
-    componentsProps?: ComponentsProps;
-    /**
-     * Custom separator node.
-     * @default '/'
-     */
-    separator?: React.ReactNode;
-    /**
-     * The size of the component.
-     * It accepts theme values between 'sm' and 'lg'.
-     * @default 'md'
-     */
-    size?: OverridableStringUnion<'sm' | 'md' | 'lg', BreadcrumbsPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-  };
+  props: P &
+    BreadcrumbsSlotsAndSlotProps & {
+      /**
+       * The content of the component.
+       */
+      children?: React.ReactNode;
+      /**
+       * Custom separator node.
+       * @default '/'
+       */
+      separator?: React.ReactNode;
+      /**
+       * The size of the component.
+       * It accepts theme values between 'sm' and 'lg'.
+       * @default 'md'
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', BreadcrumbsPropsSizeOverrides>;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+    };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/Button/Button.spec.tsx b/packages/mui-joy/src/Button/Button.spec.tsx
index 91477466e8f66f..f53fd0d4ed013d 100644
--- a/packages/mui-joy/src/Button/Button.spec.tsx
+++ b/packages/mui-joy/src/Button/Button.spec.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import NextLink from 'next/link';
 import JoyLink from '@mui/material/Link';
-import Button from '@mui/joy/Button';
+import Button, { ButtonOwnerState } from '@mui/joy/Button';
+import { expectType } from '@mui/types';
 
 <Button>Button</Button>;
 
@@ -97,3 +98,62 @@ function Icon() {
 <Button loading loadingPosition="start" startDecorator={<Icon />}>
   Save
 </Button>;
+
+<Button
+  slots={{
+    root: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+    loadingIndicatorCenter: 'div',
+  }}
+/>;
+
+<Button
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    loadingIndicatorCenter: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Button
+  slotProps={{
+    root: (ownerState) => {
+      expectType<ButtonOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<ButtonOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<ButtonOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    loadingIndicatorCenter: (ownerState) => {
+      expectType<ButtonOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Button/Button.test.js b/packages/mui-joy/src/Button/Button.test.js
index ceda31f74e3a43..0c1dbc2cbfb22e 100644
--- a/packages/mui-joy/src/Button/Button.test.js
+++ b/packages/mui-joy/src/Button/Button.test.js
@@ -7,17 +7,27 @@ import { ThemeProvider } from '@mui/joy/styles';
 describe('Joy <Button />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Button startDecorator="icon">Conformance?</Button>, () => ({
-    render,
-    classes,
-    ThemeProvider,
-    refInstanceof: window.HTMLButtonElement,
-    muiName: 'JoyButton',
-    testDeepOverrides: { slotName: 'startDecorator', slotClassName: classes.startDecorator },
-    testVariantProps: { variant: 'solid', fullWidth: true },
-    testCustomVariant: true,
-    skip: ['propsSpread', 'componentsProp', 'classesRoot'],
-  }));
+  describeConformance(
+    <Button startDecorator="icon" endDecorator="icon">
+      Conformance?
+    </Button>,
+    () => ({
+      render,
+      classes,
+      ThemeProvider,
+      refInstanceof: window.HTMLButtonElement,
+      muiName: 'JoyButton',
+      testDeepOverrides: { slotName: 'startDecorator', slotClassName: classes.startDecorator },
+      testVariantProps: { variant: 'solid', fullWidth: true },
+      testCustomVariant: true,
+      slots: {
+        root: { expectedClassName: classes.root },
+        startDecorator: { expectedClassName: classes.startDecorator },
+        endDecorator: { expectedClassName: classes.endDecorator },
+      },
+      skip: ['propsSpread', 'componentsProp', 'classesRoot'],
+    }),
+  );
 
   it('by default, should render with the root, variantSolid, sizeMd and colorPrimary classes', () => {
     const { getByRole } = render(<Button>Hello World</Button>);
diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
index bf36326e4844d6..e7c59022f78e64 100644
--- a/packages/mui-joy/src/Button/Button.tsx
+++ b/packages/mui-joy/src/Button/Button.tsx
@@ -2,10 +2,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useButton } from '@mui/base/ButtonUnstyled';
 import composeClasses from '@mui/base/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
 import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { styled, useThemeProps } from '../styles';
 import { useColorInversion } from '../styles/ColorInversion';
+import useSlot from '../utils/useSlot';
 import CircularProgress from '../CircularProgress';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import { ButtonOwnerState, ButtonTypeMap, ExtendButton } from './ButtonProps';
@@ -165,8 +165,6 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   const {
     children,
     action,
-    component = 'button',
-    componentsProps = {},
     color: colorProp = 'primary',
     variant = 'solid',
     size = 'md',
@@ -208,7 +206,6 @@ const Button = React.forwardRef(function Button(inProps, ref) {
 
   const ownerState = {
     ...props,
-    component,
     color,
     fullWidth,
     variant,
@@ -221,60 +218,60 @@ const Button = React.forwardRef(function Button(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
     elementType: ButtonRoot,
-    externalSlotProps: componentsProps.root,
-    ownerState,
-    getSlotProps: getRootProps,
     externalForwardedProps: other,
-    additionalProps: {
-      as: component,
-    },
-    className: classes.root,
+    getSlotProps: getRootProps,
+    ownerState,
   });
 
-  const startDecoratorProps = useSlotProps({
+  const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
+    className: classes.startDecorator,
     elementType: ButtonStartDecorator,
-    externalSlotProps: componentsProps.startDecorator,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.startDecorator,
   });
 
-  const endDecoratorProps = useSlotProps({
+  const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
+    className: classes.endDecorator,
     elementType: ButtonEndDecorator,
-    externalSlotProps: componentsProps.endDecorator,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.endDecorator,
   });
 
-  const loadingIndicatorCenterProps = useSlotProps({
-    elementType: ButtonLoadingCenter,
-    externalSlotProps: componentsProps.loadingIndicatorCenter,
-    ownerState,
-    className: classes.loadingIndicatorCenter,
-  });
+  const [SlotLoadingIndicatorCenter, loadingIndicatorCenterProps] = useSlot(
+    'loadingIndicatorCenter',
+    {
+      className: classes.loadingIndicatorCenter,
+      elementType: ButtonLoadingCenter,
+      externalForwardedProps: other,
+      ownerState,
+    },
+  );
 
   return (
-    <ButtonRoot {...rootProps}>
+    <SlotRoot {...rootProps}>
       {(startDecorator || (loading && loadingPosition === 'start')) && (
-        <ButtonStartDecorator {...startDecoratorProps}>
+        <SlotStartDecorator {...startDecoratorProps}>
           {loading && loadingPosition === 'start' ? loadingIndicator : startDecorator}
-        </ButtonStartDecorator>
+        </SlotStartDecorator>
       )}
 
       {children}
       {loading && loadingPosition === 'center' && (
-        <ButtonLoadingCenter {...loadingIndicatorCenterProps}>
+        <SlotLoadingIndicatorCenter {...loadingIndicatorCenterProps}>
           {loadingIndicator}
-        </ButtonLoadingCenter>
+        </SlotLoadingIndicatorCenter>
       )}
 
       {(endDecorator || (loading && loadingPosition === 'end')) && (
-        <ButtonEndDecorator {...endDecoratorProps}>
+        <SlotEndDecorator {...endDecoratorProps}>
           {loading && loadingPosition === 'end' ? loadingIndicator : endDecorator}
-        </ButtonEndDecorator>
+        </SlotEndDecorator>
       )}
-    </ButtonRoot>
+    </SlotRoot>
   );
 }) as ExtendButton<ButtonTypeMap>;
 
@@ -306,21 +303,6 @@ Button.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    loadingIndicatorCenter: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * If `true`, the component is disabled.
    * @default false
diff --git a/packages/mui-joy/src/Button/ButtonProps.ts b/packages/mui-joy/src/Button/ButtonProps.ts
index c3f34429820c10..898ce397d3552f 100644
--- a/packages/mui-joy/src/Button/ButtonProps.ts
+++ b/packages/mui-joy/src/Button/ButtonProps.ts
@@ -5,103 +5,100 @@ import {
   OverridableTypeMap,
   OverrideProps,
 } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types';
 
-export type ButtonSlot = 'root' | 'startDecorator' | 'endDecorator';
+export type ButtonSlot = 'root' | 'startDecorator' | 'endDecorator' | 'loadingIndicatorCenter';
 
 export interface ButtonPropsVariantOverrides {}
-
 export interface ButtonPropsColorOverrides {}
-
 export interface ButtonPropsSizeOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'button', { sx?: SxProps }, ButtonOwnerState>;
-  startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>;
-  endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>;
-  loadingIndicatorCenter?: SlotComponentProps<'span', { sx?: SxProps }, ButtonOwnerState>;
-}
+export type ButtonSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  ButtonSlot,
+  {
+    root: SlotProps<'button', {}, ButtonOwnerState>;
+    startDecorator: SlotProps<'span', {}, ButtonOwnerState>;
+    endDecorator: SlotProps<'span', {}, ButtonOwnerState>;
+    loadingIndicatorCenter: SlotProps<'span', {}, ButtonOwnerState>;
+  }
+>;
 
 export interface ButtonTypeMap<P = {}, D extends React.ElementType = 'button'> {
-  props: P & {
-    /**
-     * A ref for imperative actions. It currently only supports `focusVisible()` action.
-     */
-    action?: React.Ref<{
-      focusVisible(): void;
-    }>;
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<ColorPaletteProp, ButtonPropsColorOverrides>;
-    /**
-     * The props used for each slot inside the component.
-     * @default {}
-     */
-    componentsProps?: ComponentsProps;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Element placed after the children.
-     */
-    endDecorator?: React.ReactNode;
-    /**
-     * This prop can help identify which element has keyboard focus.
-     * The class name will be applied when the element gains the focus through keyboard interaction.
-     * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-     * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-     * if needed.
-     */
-    focusVisibleClassName?: string;
-    /**
-     * If `true`, the button will take up the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * The size of the component.
-     */
-    size?: OverridableStringUnion<'sm' | 'md' | 'lg', ButtonPropsSizeOverrides>;
-    /**
-     * Element placed before the children.
-     */
-    startDecorator?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-    /**
-     * @default 0
-     */
-    tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
-    /**
-     * The variant to use.
-     * @default 'solid'
-     */
-    variant?: OverridableStringUnion<VariantProp, ButtonPropsVariantOverrides>;
-    /**
-     * If `true`, the loading indicator is shown.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * The node should contain an element with `role="progressbar"` with an accessible name.
-     * By default we render a `CircularProgress` that is labelled by the button itself.
-     * @default <CircularProgress />
-     */
-    loadingIndicator?: React.ReactNode;
-    /**
-     * The loading indicator can be positioned on the start, end, or the center of the button.
-     * @default 'center'
-     */
-    loadingPosition?: 'start' | 'end' | 'center';
-  };
+  props: P &
+    ButtonSlotsAndSlotProps & {
+      /**
+       * A ref for imperative actions. It currently only supports `focusVisible()` action.
+       */
+      action?: React.Ref<{
+        focusVisible(): void;
+      }>;
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'primary'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, ButtonPropsColorOverrides>;
+      /**
+       * If `true`, the component is disabled.
+       * @default false
+       */
+      disabled?: boolean;
+      /**
+       * Element placed after the children.
+       */
+      endDecorator?: React.ReactNode;
+      /**
+       * This prop can help identify which element has keyboard focus.
+       * The class name will be applied when the element gains the focus through keyboard interaction.
+       * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+       * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+       * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+       * if needed.
+       */
+      focusVisibleClassName?: string;
+      /**
+       * If `true`, the button will take up the full width of its container.
+       * @default false
+       */
+      fullWidth?: boolean;
+      /**
+       * The size of the component.
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', ButtonPropsSizeOverrides>;
+      /**
+       * Element placed before the children.
+       */
+      startDecorator?: React.ReactNode;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+      /**
+       * @default 0
+       */
+      tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
+      /**
+       * The variant to use.
+       * @default 'solid'
+       */
+      variant?: OverridableStringUnion<VariantProp, ButtonPropsVariantOverrides>;
+      /**
+       * If `true`, the loading indicator is shown.
+       * @default false
+       */
+      loading?: boolean;
+      /**
+       * The node should contain an element with `role="progressbar"` with an accessible name.
+       * By default we render a `CircularProgress` that is labelled by the button itself.
+       * @default <CircularProgress />
+       */
+      loadingIndicator?: React.ReactNode;
+      /**
+       * The loading indicator can be positioned on the start, end, or the center of the button.
+       * @default 'center'
+       */
+      loadingPosition?: 'start' | 'end' | 'center';
+    };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.spec.tsx b/packages/mui-joy/src/Checkbox/Checkbox.spec.tsx
index d2b5a242f3bb1f..5189c6e812341f 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.spec.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Checkbox from '@mui/joy/Checkbox';
+import Checkbox, { CheckboxOwnerState } from '@mui/joy/Checkbox';
+import { expectType } from '@mui/types';
 
 <Checkbox id="test" name="test" />;
 
@@ -33,3 +34,73 @@ import Checkbox from '@mui/joy/Checkbox';
 <Checkbox size="sm" />;
 <Checkbox size="md" />;
 <Checkbox size="lg" />;
+
+<Checkbox
+  slots={{
+    root: 'div',
+    checkbox: 'div',
+    action: 'div',
+    input: 'div',
+    label: 'div',
+  }}
+/>;
+
+<Checkbox
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    checkbox: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    action: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    input: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    label: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Checkbox
+  slotProps={{
+    root: (ownerState) => {
+      expectType<CheckboxOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    checkbox: (ownerState) => {
+      expectType<CheckboxOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    action: (ownerState) => {
+      expectType<CheckboxOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    input: (ownerState) => {
+      expectType<CheckboxOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    label: (ownerState) => {
+      expectType<CheckboxOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.test.js b/packages/mui-joy/src/Checkbox/Checkbox.test.js
index 7390cc0c654a64..31433c05d9ddaf 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.test.js
+++ b/packages/mui-joy/src/Checkbox/Checkbox.test.js
@@ -7,14 +7,22 @@ import { ThemeProvider } from '@mui/joy/styles';
 describe('<Checkbox />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Checkbox />, () => ({
+  describeConformance(<Checkbox label="demo" />, () => ({
     classes,
+    inheritComponent: 'span',
     render,
     ThemeProvider,
     muiName: 'JoyCheckbox',
     testDeepOverrides: [{ slotName: 'input', slotClassName: classes.input }],
     refInstanceof: window.HTMLSpanElement,
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      checkbox: { expectedClassName: classes.checkbox },
+      input: { expectedClassName: classes.input },
+      action: { expectedClassName: classes.action },
+      label: { expectedClassName: classes.label },
+    },
     skip: ['componentProp', 'componentsProp', 'classesRoot', 'propsSpread', 'themeVariants'],
   }));
 
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
index 21f41484ab1e11..6852f48fd3e29b 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import { useSwitch } from '@mui/base/SwitchUnstyled';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
 import { CheckboxOwnerState, CheckboxTypeMap } from './CheckboxProps';
 import CheckIcon from '../internal/svg-icons/Check';
@@ -188,8 +188,6 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
     uncheckedIcon,
     checkedIcon = defaultCheckedIcon,
     label,
-    component,
-    componentsProps = {},
     defaultChecked,
     disabled: disabledExternalProp,
     disableIcon = false,
@@ -262,37 +260,29 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
     elementType: CheckboxRoot,
-    externalSlotProps: componentsProps.root,
     externalForwardedProps: other,
     ownerState,
-    additionalProps: {
-      ref,
-      as: component,
-    },
-    className: classes.root,
   });
 
-  const checkboxProps = useSlotProps({
+  const [SlotCheckbox, checkboxProps] = useSlot('checkbox', {
+    className: classes.checkbox,
     elementType: CheckboxCheckbox,
-    externalSlotProps: componentsProps.checkbox,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.checkbox,
   });
 
-  const actionProps = useSlotProps({
+  const [SlotAction, actionProps] = useSlot('action', {
+    className: classes.action,
     elementType: CheckboxAction,
-    externalSlotProps: componentsProps.action,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.action,
   });
 
-  const inputProps = useSlotProps({
-    elementType: CheckboxInput,
-    getSlotProps: getInputProps,
-    externalSlotProps: componentsProps.input,
-    ownerState,
+  const [SlotInput, inputProps] = useSlot('input', {
     additionalProps: {
       id,
       name,
@@ -306,34 +296,38 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
       }),
     },
     className: classes.input,
+    elementType: CheckboxInput,
+    externalForwardedProps: other,
+    getSlotProps: getInputProps,
+    ownerState,
   });
 
-  const labelProps = useSlotProps({
-    elementType: CheckboxLabel,
-    externalSlotProps: componentsProps.label,
-    ownerState,
+  const [SlotLabel, labelProps] = useSlot('label', {
     additionalProps: {
       htmlFor: id,
     },
     className: classes.label,
+    elementType: CheckboxLabel,
+    externalForwardedProps: other,
+    ownerState,
   });
 
   return (
-    <CheckboxRoot {...rootProps}>
-      <CheckboxCheckbox {...checkboxProps}>
-        <CheckboxAction {...actionProps}>
-          <CheckboxInput {...inputProps} />
-        </CheckboxAction>
+    <SlotRoot {...rootProps}>
+      <SlotCheckbox {...checkboxProps}>
+        <SlotAction {...actionProps}>
+          <SlotInput {...inputProps} />
+        </SlotAction>
         {indeterminate && !checked && !disableIcon && indeterminateIcon}
         {checked && !disableIcon && checkedIcon}
         {!checked && !disableIcon && !indeterminate && uncheckedIcon}
-      </CheckboxCheckbox>
+      </SlotCheckbox>
       {label && (
         <TypographyContext.Provider value>
-          <CheckboxLabel {...labelProps}>{label}</CheckboxLabel>
+          <SlotLabel {...labelProps}>{label}</SlotLabel>
         </TypographyContext.Provider>
       )}
-    </CheckboxRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<CheckboxTypeMap>;
 
@@ -367,22 +361,6 @@ Checkbox.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    checkbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * The default checked state. Use when the component is not controlled.
    */
diff --git a/packages/mui-joy/src/Checkbox/CheckboxProps.ts b/packages/mui-joy/src/Checkbox/CheckboxProps.ts
index b43a79a6fbccdd..70e493bbc92da4 100644
--- a/packages/mui-joy/src/Checkbox/CheckboxProps.ts
+++ b/packages/mui-joy/src/Checkbox/CheckboxProps.ts
@@ -1,28 +1,30 @@
 import * as React from 'react';
-import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
 import { UseSwitchParameters } from '@mui/base/SwitchUnstyled';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { OverridableStringUnion, OverrideProps } from '@mui/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types';
 
 export type CheckboxSlot = 'root' | 'checkbox' | 'action' | 'input' | 'label';
 
 export interface CheckboxPropsVariantOverrides {}
-
 export interface CheckboxPropsColorOverrides {}
-
 export interface CheckboxPropsSizeOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'span', { sx?: SxProps }, CheckboxOwnerState>;
-  checkbox?: SlotComponentProps<'span', { sx?: SxProps }, CheckboxOwnerState>;
-  action?: SlotComponentProps<'span', { sx?: SxProps }, CheckboxOwnerState>;
-  input?: SlotComponentProps<'input', { sx?: SxProps }, CheckboxOwnerState>;
-  label?: SlotComponentProps<'label', { sx?: SxProps }, CheckboxOwnerState>;
-}
+export type CheckboxSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  CheckboxSlot,
+  {
+    root: SlotProps<'span', {}, CheckboxOwnerState>;
+    checkbox: SlotProps<'span', {}, CheckboxOwnerState>;
+    action: SlotProps<'span', {}, CheckboxOwnerState>;
+    input: SlotProps<'input', {}, CheckboxOwnerState>;
+    label: SlotProps<'label', {}, CheckboxOwnerState>;
+  }
+>;
 
 export interface CheckboxTypeMap<P = {}, D extends React.ElementType = 'span'> {
   props: P &
-    UseSwitchParameters & {
+    UseSwitchParameters &
+    CheckboxSlotsAndSlotProps & {
       /**
        * The icon to display when the component is checked.
        * @default <CheckIcon />
@@ -32,11 +34,6 @@ export interface CheckboxTypeMap<P = {}, D extends React.ElementType = 'span'> {
        * Class name applied to the root element.
        */
       className?: string;
-      /**
-       * The props used for each slot inside the component.
-       * @default {}
-       */
-      componentsProps?: ComponentsProps;
       /**
        * The color of the component. It supports those theme colors that make sense for this component.
        * @default 'neutral'
diff --git a/packages/mui-joy/src/Chip/Chip.spec.tsx b/packages/mui-joy/src/Chip/Chip.spec.tsx
index ad68d1a26b2ff4..ddb8e0f4e7f571 100644
--- a/packages/mui-joy/src/Chip/Chip.spec.tsx
+++ b/packages/mui-joy/src/Chip/Chip.spec.tsx
@@ -1,5 +1,6 @@
-import Chip from '@mui/joy/Chip';
 import * as React from 'react';
+import Chip, { ChipOwnerState } from '@mui/joy/Chip';
+import { expectType } from '@mui/types';
 
 <Chip />;
 
@@ -32,3 +33,73 @@ import * as React from 'react';
 
 // @ts-expect-error there is no size `xl2`
 <Chip size="xl2" />;
+
+<Chip
+  slots={{
+    root: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+    action: 'div',
+    label: 'div',
+  }}
+/>;
+
+<Chip
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    action: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    label: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Chip
+  slotProps={{
+    root: (ownerState) => {
+      expectType<ChipOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<ChipOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<ChipOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    action: (ownerState) => {
+      expectType<ChipOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    label: (ownerState) => {
+      expectType<ChipOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Chip/Chip.test.js b/packages/mui-joy/src/Chip/Chip.test.js
index 990f37c0377f11..ba26272452aeb7 100644
--- a/packages/mui-joy/src/Chip/Chip.test.js
+++ b/packages/mui-joy/src/Chip/Chip.test.js
@@ -9,19 +9,30 @@ import { unstable_capitalize as capitalize } from '@mui/utils';
 describe('<Chip />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Chip />, () => ({
-    classes,
-    inheritComponent: 'div',
-    render,
-    ThemeProvider,
-    muiName: 'JoyChip',
-    refInstanceof: window.HTMLDivElement,
-    testDeepOverrides: { slotName: 'label', slotClassName: classes.label },
-    testComponentPropWith: 'span',
-    testVariantProps: { variant: 'soft' },
-    testCustomVariant: true,
-    skip: ['classesRoot', 'componentsProp'],
-  }));
+  describeConformance(
+    <Chip startDecorator="1" endDecorator="2">
+      Chip
+    </Chip>,
+    () => ({
+      classes,
+      inheritComponent: 'div',
+      render,
+      ThemeProvider,
+      muiName: 'JoyChip',
+      refInstanceof: window.HTMLDivElement,
+      testDeepOverrides: { slotName: 'label', slotClassName: classes.label },
+      testComponentPropWith: 'span',
+      testVariantProps: { variant: 'soft' },
+      testCustomVariant: true,
+      slots: {
+        root: { expectedClassName: classes.root },
+        label: { expectedClassName: classes.label },
+        startDecorator: { expectedClassName: classes.startDecorator },
+        endDecorator: { expectedClassName: classes.endDecorator },
+      },
+      skip: ['classesRoot', 'componentsProp'],
+    }),
+  );
 
   it('renders children', () => {
     const { getByText } = render(
@@ -110,16 +121,14 @@ describe('<Chip />', () => {
       expect(handleClick.callCount).to.equal(1);
     });
 
-    it('renders action element when `componentsProps.action` is provided', () => {
-      const { getByRole } = render(<Chip componentsProps={{ action: {} }} />);
+    it('renders action element when `slotProps.action` is provided', () => {
+      const { getByRole } = render(<Chip slotProps={{ action: {} }} />);
 
       expect(getByRole('button')).toBeVisible();
     });
 
     it('renders custom action element', () => {
-      const { getByRole } = render(
-        <Chip componentsProps={{ action: { component: 'a', href: '#' } }} />,
-      );
+      const { getByRole } = render(<Chip slotProps={{ action: { component: 'a', href: '#' } }} />);
 
       expect(getByRole('link')).to.have.attr('href', '#');
     });
diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
index 93ca70b547a065..5851c1552c62b6 100644
--- a/packages/mui-joy/src/Chip/Chip.tsx
+++ b/packages/mui-joy/src/Chip/Chip.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, useButton } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
 import { useThemeProps } from '../styles';
@@ -10,6 +9,7 @@ import styled from '../styles/styled';
 import chipClasses, { getChipUtilityClass } from './chipClasses';
 import { ChipProps, ChipOwnerState, ChipTypeMap } from './ChipProps';
 import ChipContext from './ChipContext';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState: ChipOwnerState) => {
   const { disabled, size, color, clickable, variant, focusVisible } = ownerState;
@@ -201,9 +201,8 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const {
     children,
     className,
-    componentsProps = {},
     color = 'primary',
-    component,
+    slotProps = {},
     onClick,
     disabled = false,
     size = 'md',
@@ -213,10 +212,9 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     ...other
   } = props;
 
-  const clickable = !!onClick || !!componentsProps.action;
+  const clickable = !!onClick || !!slotProps.action;
   const ownerState: ChipOwnerState = {
     ...props,
-    component,
     disabled,
     size,
     color,
@@ -226,9 +224,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   };
 
   const resolvedActionProps =
-    typeof componentsProps.action === 'function'
-      ? componentsProps.action(ownerState)
-      : componentsProps.action;
+    typeof slotProps.action === 'function' ? slotProps.action(ownerState) : slotProps.action;
   const actionRef = React.useRef<HTMLElement | null>(null);
   const { focusVisible, getRootProps } = useButton({
     ...resolvedActionProps,
@@ -239,42 +235,51 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   ownerState.focusVisible = focusVisible;
 
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = { ...other, slotProps };
 
-  const labelProps = useSlotProps({
-    elementType: ChipLabel,
-    externalSlotProps: componentsProps.label,
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
+    elementType: ChipRoot,
+    externalForwardedProps,
     ownerState,
+  });
+
+  const [SlotLabel, labelProps] = useSlot('label', {
     className: classes.label,
+    elementType: ChipLabel,
+    externalForwardedProps,
+    ownerState,
   });
 
   // @ts-ignore internal logic.
   const id = useId(labelProps.id);
 
-  const actionProps = useSlotProps({
+  const [SlotAction, actionProps] = useSlot('action', {
+    className: classes.action,
     elementType: ChipAction,
+    externalForwardedProps,
+    ownerState,
     getSlotProps: getRootProps,
-    externalSlotProps: componentsProps.action,
     additionalProps: {
       'aria-labelledby': id,
       as: resolvedActionProps?.component,
       onClick,
     },
-    ownerState,
-    className: classes.action,
   });
 
-  const startDecoratorProps = useSlotProps({
+  const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
+    className: classes.startDecorator,
     elementType: ChipStartDecorator,
-    externalSlotProps: componentsProps.startDecorator,
+    externalForwardedProps,
     ownerState,
-    className: classes.startDecorator,
   });
 
-  const endDecoratorProps = useSlotProps({
+  const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
+    className: classes.endDecorator,
     elementType: ChipEndDecorator,
-    externalSlotProps: componentsProps.endDecorator,
+    externalForwardedProps,
     ownerState,
-    className: classes.endDecorator,
   });
 
   const chipContextValue = React.useMemo(
@@ -284,25 +289,19 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
 
   return (
     <ChipContext.Provider value={chipContextValue}>
-      <ChipRoot
-        as={component}
-        className={clsx(classes.root, className)}
-        ref={ref}
-        ownerState={ownerState}
-        {...other}
-      >
-        {clickable && <ChipAction {...actionProps} />}
+      <SlotRoot {...rootProps}>
+        {clickable && <SlotAction {...actionProps} />}
 
         {/* label is always the first element for integrating with other controls, eg. Checkbox, Radio. Use CSS order to rearrange position */}
-        <ChipLabel {...labelProps} id={id}>
+        <SlotLabel {...labelProps} id={id}>
           {children}
-        </ChipLabel>
+        </SlotLabel>
         {startDecorator && (
-          <ChipStartDecorator {...startDecoratorProps}>{startDecorator}</ChipStartDecorator>
+          <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
         )}
 
-        {endDecorator && <ChipEndDecorator {...endDecoratorProps}>{endDecorator}</ChipEndDecorator>}
-      </ChipRoot>
+        {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
+      </SlotRoot>
     </ChipContext.Provider>
   );
 }) as OverridableComponent<ChipTypeMap>;
@@ -328,22 +327,6 @@ Chip.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -366,6 +349,16 @@ Chip.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['lg', 'md', 'sm']),
     PropTypes.string,
   ]),
+  /**
+   * @ignore
+   */
+  slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
   /**
    * Element placed before the children.
    */
diff --git a/packages/mui-joy/src/Chip/ChipProps.ts b/packages/mui-joy/src/Chip/ChipProps.ts
index 9ef5020cf985e1..848c6aff25ca8e 100644
--- a/packages/mui-joy/src/Chip/ChipProps.ts
+++ b/packages/mui-joy/src/Chip/ChipProps.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type ChipSlot = 'root' | 'label' | 'action' | 'startDecorator' | 'endDecorator';
 
@@ -9,67 +9,69 @@ export interface ChipPropsColorOverrides {}
 export interface ChipPropsSizeOverrides {}
 export interface ChipPropsVariantOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'div', { sx?: SxProps }, ChipOwnerState>;
-  label?: SlotComponentProps<'span', { sx?: SxProps }, ChipOwnerState>;
-  action?: SlotComponentProps<
-    'button',
-    { sx?: SxProps; component?: React.ElementType; href?: string; to?: string },
-    ChipOwnerState
-  >;
-  startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, ChipOwnerState>;
-  endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, ChipOwnerState>;
-}
+export type ChipSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  ChipSlot,
+  {
+    root: SlotProps<'div', {}, ChipOwnerState>;
+    label: SlotProps<'span', {}, ChipOwnerState>;
+    action: SlotProps<
+      'button',
+      {
+        href?: string;
+        to?: string;
+      },
+      ChipOwnerState
+    >;
+    startDecorator: SlotProps<'span', {}, ChipOwnerState>;
+    endDecorator: SlotProps<'span', {}, ChipOwnerState>;
+  }
+>;
 
 export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * The props used for each slot inside the component.
-     * @default {}
-     */
-    componentsProps?: ComponentsProps;
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<ColorPaletteProp, ChipPropsColorOverrides>;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Element placed after the children.
-     */
-    endDecorator?: React.ReactNode;
-    /**
-     * Element action click handler.
-     */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * The size of the component.
-     * It accepts theme values between 'sm' and 'lg'.
-     * @default 'md'
-     */
-    size?: OverridableStringUnion<'sm' | 'md' | 'lg', ChipPropsSizeOverrides>;
-    /**
-     * Element placed before the children.
-     */
-    startDecorator?: React.ReactNode;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-    /**
-     * The variant to use.
-     * @default 'solid'
-     */
-    variant?: OverridableStringUnion<VariantProp, ChipPropsVariantOverrides>;
-  };
+  props: P &
+    ChipSlotsAndSlotProps & {
+      /**
+       * The content of the component.
+       */
+      children?: React.ReactNode;
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'primary'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, ChipPropsColorOverrides>;
+      /**
+       * If `true`, the component is disabled.
+       * @default false
+       */
+      disabled?: boolean;
+      /**
+       * Element placed after the children.
+       */
+      endDecorator?: React.ReactNode;
+      /**
+       * Element action click handler.
+       */
+      onClick?: React.MouseEventHandler<HTMLButtonElement>;
+      /**
+       * The size of the component.
+       * It accepts theme values between 'sm' and 'lg'.
+       * @default 'md'
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', ChipPropsSizeOverrides>;
+      /**
+       * Element placed before the children.
+       */
+      startDecorator?: React.ReactNode;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+      /**
+       * The variant to use.
+       * @default 'solid'
+       */
+      variant?: OverridableStringUnion<VariantProp, ChipPropsVariantOverrides>;
+    };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.spec.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.spec.tsx
index 52a281f7c6539d..8bec44bd26fd7d 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.spec.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.spec.tsx
@@ -1,5 +1,6 @@
-import CircularProgress from '@mui/joy/CircularProgress';
 import * as React from 'react';
+import CircularProgress, { CircularProgressOwnerState } from '@mui/joy/CircularProgress';
+import { expectType } from '@mui/types';
 
 <CircularProgress />;
 
@@ -32,3 +33,62 @@ import * as React from 'react';
 
 // @ts-expect-error there is no size `xl2`
 <CircularProgress size="xl2" />;
+
+<CircularProgress
+  slots={{
+    root: 'div',
+    svg: 'div',
+    track: 'div',
+    progress: 'div',
+  }}
+/>;
+
+<CircularProgress
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    svg: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    track: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    progress: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<CircularProgress
+  slotProps={{
+    root: (ownerState) => {
+      expectType<CircularProgressOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    svg: (ownerState) => {
+      expectType<CircularProgressOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    track: (ownerState) => {
+      expectType<CircularProgressOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    progress: (ownerState) => {
+      expectType<CircularProgressOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx
index f730beb9676084..99422dcd1fb5e1 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.test.tsx
@@ -17,6 +17,14 @@ describe('<CircularProgress />', () => {
     refInstanceof: window.HTMLSpanElement,
     testVariantProps: { determinate: true },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      svg: { expectedClassName: classes.svg, testWithElement: 'svg' },
+      track: {
+        expectedClassName: classes.track,
+      },
+      progress: { expectedClassName: classes.progress },
+    },
     skip: ['classesRoot', 'componentsProp'],
   }));
 
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
index ec6cb7d6d76de9..568d44ed94cf02 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -1,13 +1,13 @@
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
-import { css, keyframes } from '@mui/system';
-import { OverridableComponent } from '@mui/types';
-import { unstable_capitalize as capitalize } from '@mui/utils';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
+import clsx from 'clsx';
+import { OverridableComponent } from '@mui/types';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { css, keyframes } from '@mui/system';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import { getCircularProgressUtilityClass } from './circularProgressClasses';
 import {
   CircularProgressOwnerState,
@@ -204,8 +204,6 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
   });
 
   const {
-    componentsProps = {},
-    component = 'span',
     children,
     className,
     color = 'primary',
@@ -230,14 +228,13 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
     elementType: CircularProgressRoot,
-    externalSlotProps: componentsProps.root,
     externalForwardedProps: other,
     ownerState,
     additionalProps: {
-      ref,
-      as: component,
       role: 'progressbar',
       style: {
         // Setting this CSS varaible via inline-style
@@ -245,44 +242,43 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
         // `value` prop updates
         '--CircularProgress-percent': value,
       },
+      ...(value &&
+        determinate && {
+          'aria-valuenow':
+            typeof value === 'number' ? Math.round(value) : Math.round(Number(value || 0)),
+        }),
     },
-    className: clsx(classes.root, className),
-    ...(value &&
-      determinate && {
-        'aria-valuenow':
-          typeof value === 'number' ? Math.round(value) : Math.round(Number(value || 0)),
-      }),
   });
 
-  const svgProps = useSlotProps({
+  const [SlotSvg, svgProps] = useSlot('svg', {
+    className: classes.svg,
     elementType: CircularProgressSvg,
-    externalSlotProps: componentsProps.svg,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.svg,
   });
 
-  const trackProps = useSlotProps({
+  const [SlotTrack, trackProps] = useSlot('track', {
+    className: classes.track,
     elementType: CircularProgressTrack,
-    externalSlotProps: componentsProps.track,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.track,
   });
 
-  const progressProps = useSlotProps({
+  const [SlotProgress, progressProps] = useSlot('progress', {
+    className: classes.progress,
     elementType: CircularProgressProgress,
-    externalSlotProps: componentsProps.progress,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.progress,
   });
 
   return (
-    <CircularProgressRoot {...rootProps}>
-      <CircularProgressSvg {...svgProps}>
-        <CircularProgressTrack {...trackProps} />
-        <CircularProgressProgress {...progressProps} />
-      </CircularProgressSvg>
+    <SlotRoot {...rootProps}>
+      <SlotSvg {...svgProps}>
+        <SlotTrack {...trackProps} />
+        <SlotProgress {...progressProps} />
+      </SlotSvg>
       {children}
-    </CircularProgressRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<CircularProgressTypeMap>;
 
@@ -307,21 +303,6 @@ CircularProgress.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the CircularProgress.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    progress: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    svg: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * The boolean to select a variant.
    * Use indeterminate when there is no progress value.
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts b/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts
index 968e87ac2113c5..f1e053c23dc860 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts
+++ b/packages/mui-joy/src/CircularProgress/CircularProgressProps.ts
@@ -1,7 +1,7 @@
-import { SlotComponentProps } from '@mui/base/utils';
-import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import * as React from 'react';
+import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type CircularProgressSlot = 'root' | 'svg' | 'track' | 'progress';
 
@@ -9,58 +9,57 @@ export interface CircularProgressPropsColorOverrides {}
 export interface CircularProgressPropsSizeOverrides {}
 export interface CircularProgressPropsVariantOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'span', { sx?: SxProps }, CircularProgressOwnerState>;
-  svg?: SlotComponentProps<'svg', { sx?: SxProps }, CircularProgressOwnerState>;
-  track?: SlotComponentProps<'circle', { sx?: SxProps }, CircularProgressOwnerState>;
-  progress?: SlotComponentProps<'circle', { sx?: SxProps }, CircularProgressOwnerState>;
-}
+export type CircularProgressSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  CircularProgressSlot,
+  {
+    root: SlotProps<'span', {}, CircularProgressOwnerState>;
+    svg: SlotProps<'svg', {}, CircularProgressOwnerState>;
+    track: SlotProps<'circle', {}, CircularProgressOwnerState>;
+    progress: SlotProps<'circle', {}, CircularProgressOwnerState>;
+  }
+>;
 
 export interface CircularProgressTypeMap<P = {}, D extends React.ElementType = 'span'> {
-  props: P & {
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<ColorPaletteProp, CircularProgressPropsColorOverrides>;
-    /**
-     * The props used for each slot inside the CircularProgress.
-     * @default {}
-     */
-    componentsProps?: ComponentsProps;
-    /**
-     * The boolean to select a variant.
-     * Use indeterminate when there is no progress value.
-     * @default false
-     */
-    determinate?: true | false;
-    /**
-     * The size of the component.
-     * It accepts theme values between 'sm' and 'lg'.
-     * @default 'md'
-     */
-    size?: OverridableStringUnion<'sm' | 'md' | 'lg', CircularProgressPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-    /**
-     * The thickness of the circle.
-     */
-    thickness?: number;
-    /**
-     * The value of the progress indicator for the determinate variant.
-     * Value between 0 and 100.
-     *
-     * For indeterminate, @default 25
-     */
-    value?: number;
-    /**
-     * The variant to use.
-     * @default 'soft'
-     */
-    variant?: OverridableStringUnion<VariantProp, CircularProgressPropsVariantOverrides>;
-  };
+  props: P &
+    CircularProgressSlotsAndSlotProps & {
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'primary'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, CircularProgressPropsColorOverrides>;
+      /**
+       * The boolean to select a variant.
+       * Use indeterminate when there is no progress value.
+       * @default false
+       */
+      determinate?: true | false;
+      /**
+       * The size of the component.
+       * It accepts theme values between 'sm' and 'lg'.
+       * @default 'md'
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', CircularProgressPropsSizeOverrides>;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+      /**
+       * The thickness of the circle.
+       */
+      thickness?: number;
+      /**
+       * The value of the progress indicator for the determinate variant.
+       * Value between 0 and 100.
+       *
+       * For indeterminate, @default 25
+       */
+      value?: number;
+      /**
+       * The variant to use.
+       * @default 'soft'
+       */
+      variant?: OverridableStringUnion<VariantProp, CircularProgressPropsVariantOverrides>;
+    };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/FormLabel/FormLabel.spec.tsx b/packages/mui-joy/src/FormLabel/FormLabel.spec.tsx
new file mode 100644
index 00000000000000..eae1baea611429
--- /dev/null
+++ b/packages/mui-joy/src/FormLabel/FormLabel.spec.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import FormLabel, { FormLabelOwnerState } from '@mui/joy/FormLabel';
+import { expectType } from '@mui/types';
+
+<FormLabel component="div" />;
+
+<FormLabel data-testid="any" />;
+
+<FormLabel
+  slots={{
+    root: 'div',
+    asterisk: 'div',
+  }}
+/>;
+
+<FormLabel
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    asterisk: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<FormLabel
+  slotProps={{
+    root: (ownerState) => {
+      expectType<FormLabelOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    asterisk: (ownerState) => {
+      expectType<FormLabelOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/FormLabel/FormLabel.test.js b/packages/mui-joy/src/FormLabel/FormLabel.test.js
index 92ff1f916c9ab4..a98c55e967c2c9 100644
--- a/packages/mui-joy/src/FormLabel/FormLabel.test.js
+++ b/packages/mui-joy/src/FormLabel/FormLabel.test.js
@@ -7,13 +7,17 @@ import FormLabel, { formLabelClasses as classes } from '@mui/joy/FormLabel';
 describe('Joy <FormLabel />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<FormLabel />, () => ({
+  describeConformance(<FormLabel required />, () => ({
     classes,
     inheritComponent: 'label',
     render,
     ThemeProvider,
     muiName: 'JoyFormLabel',
     refInstanceof: window.HTMLLabelElement,
+    slots: {
+      root: { expectedClassName: classes.root },
+      asterisk: { expectedClassName: classes.asterisk },
+    },
     skip: ['componentsProp', 'classesRoot', 'themeVariants'],
   }));
 
diff --git a/packages/mui-joy/src/FormLabel/FormLabel.tsx b/packages/mui-joy/src/FormLabel/FormLabel.tsx
index 1d0fb2b86f08f1..48277650ebc9b7 100644
--- a/packages/mui-joy/src/FormLabel/FormLabel.tsx
+++ b/packages/mui-joy/src/FormLabel/FormLabel.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '@mui/base/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import { FormLabelProps, FormLabelTypeMap } from './FormLabelProps';
 import { getFormLabelUtilityClass } from './formLabelClasses';
 import FormControlContext from '../FormControl/FormControlContext';
@@ -50,7 +50,7 @@ const FormLabel = React.forwardRef(function FormLabel(inProps, ref) {
     name: 'JoyFormLabel',
   });
 
-  const { children, component = 'label', componentsProps = {}, ...other } = props;
+  const { children, component = 'label', ...other } = props;
   const formControl = React.useContext(FormControlContext);
   const required = inProps.required ?? formControl?.required ?? false;
 
@@ -60,36 +60,33 @@ const FormLabel = React.forwardRef(function FormLabel(inProps, ref) {
   };
 
   const classes = useUtilityClasses();
+  const externalForwardedProps = { ...other, component };
 
-  const rootProps = useSlotProps({
-    elementType: FormLabelRoot,
-    externalSlotProps: componentsProps.root,
-    externalForwardedProps: other,
-    ownerState,
+  const [SlotRoot, rootProps] = useSlot('root', {
     additionalProps: {
-      ref,
-      as: component,
       htmlFor: formControl?.htmlFor,
       id: formControl?.labelId,
     },
+    ref,
     className: classes.root,
+    elementType: FormLabelRoot,
+    externalForwardedProps,
+    ownerState,
   });
 
-  const asteriskProps = useSlotProps({
+  const [SlotAsterisk, asteriskProps] = useSlot('asterisk', {
+    additionalProps: { 'aria-hidden': true },
+    className: classes.asterisk,
     elementType: AsteriskComponent,
-    externalSlotProps: componentsProps.asterisk,
+    externalForwardedProps,
     ownerState,
-    additionalProps: {
-      'aria-hidden': true,
-    },
-    className: classes.asterisk,
   });
 
   return (
-    <FormLabelRoot {...rootProps}>
+    <SlotRoot {...rootProps}>
       {children}
-      {required && <AsteriskComponent {...asteriskProps}>&thinsp;{'*'}</AsteriskComponent>}
-    </FormLabelRoot>
+      {required && <SlotAsterisk {...asteriskProps}>&thinsp;{'*'}</SlotAsterisk>}
+    </SlotRoot>
   );
 }) as OverridableComponent<FormLabelTypeMap>;
 
@@ -107,14 +104,6 @@ FormLabel.propTypes /* remove-proptypes */ = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    asterisk: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * The asterisk is added if required=`true`
    */
diff --git a/packages/mui-joy/src/FormLabel/FormLabelProps.ts b/packages/mui-joy/src/FormLabel/FormLabelProps.ts
index 78a3581336d91f..b72fbdb0797ac3 100644
--- a/packages/mui-joy/src/FormLabel/FormLabelProps.ts
+++ b/packages/mui-joy/src/FormLabel/FormLabelProps.ts
@@ -1,35 +1,34 @@
 import * as React from 'react';
 import { OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
 import { SxProps } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type FormLabelSlot = 'root' | 'asterisk';
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'label', { sx?: SxProps }, FormLabelOwnerState>;
-  asterisk?: SlotComponentProps<'span', { sx?: SxProps }, FormLabelOwnerState>;
-}
+export type FormLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  FormLabelSlot,
+  {
+    root: SlotProps<'div', {}, FormLabelOwnerState>;
+    asterisk: SlotProps<'div', {}, FormLabelOwnerState>;
+  }
+>;
 
 export interface FormLabelTypeMap<P = {}, D extends React.ElementType = 'label'> {
-  props: P & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * The props used for each slot inside the component.
-     * @default {}
-     */
-    componentsProps?: ComponentsProps;
-    /**
-     * The asterisk is added if required=`true`
-     */
-    required?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-  };
+  props: P &
+    FormLabelSlotsAndSlotProps & {
+      /**
+       * The content of the component.
+       */
+      children?: React.ReactNode;
+      /**
+       * The asterisk is added if required=`true`
+       */
+      required?: boolean;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+    };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/Grid/Grid.test.js b/packages/mui-joy/src/Grid/Grid.test.js
index 7b7f68e6449043..1f14967e816b98 100644
--- a/packages/mui-joy/src/Grid/Grid.test.js
+++ b/packages/mui-joy/src/Grid/Grid.test.js
@@ -15,7 +15,7 @@ describe('Joy UI <Grid />', () => {
     inheritComponent: 'div',
     render,
     ThemeProvider,
-    refInstanceof: window.HTMLElement,
+    refInstanceof: window.HTMLDivElement,
     muiName: 'JoyGrid',
     testVariantProps: { container: true, spacing: 5 },
     skip: ['componentsProp', 'classesRoot'],
diff --git a/packages/mui-joy/src/IconButton/IconButton.test.js b/packages/mui-joy/src/IconButton/IconButton.test.js
index 60278f03e11625..164e66081a72ec 100644
--- a/packages/mui-joy/src/IconButton/IconButton.test.js
+++ b/packages/mui-joy/src/IconButton/IconButton.test.js
@@ -15,6 +15,9 @@ describe('Joy <IconButton />', () => {
     muiName: 'JoyIconButton',
     testVariantProps: { variant: 'solid', color: 'success' },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+    },
     skip: ['propsSpread', 'componentsProp', 'classesRoot'],
   }));
 
diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
index f008725acebb9a..695253022424ce 100644
--- a/packages/mui-joy/src/IconButton/IconButton.tsx
+++ b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize, unstable_useForkRef as useForkRef } from '@mui/utils';
 import { useButton } from '@mui/base/ButtonUnstyled';
-import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/base/composeClasses';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';
 import { IconButtonOwnerState, IconButtonTypeMap, ExtendIconButton } from './IconButtonProps';
 
@@ -137,19 +137,16 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
     elementType: IconButtonRoot,
     getSlotProps: getRootProps,
-    externalSlotProps: {},
-    externalForwardedProps: other,
+    externalForwardedProps: { ...other, component },
     ownerState,
-    additionalProps: {
-      as: component,
-    },
-    className: classes.root,
   });
 
-  return <IconButtonRoot {...rootProps}>{children}</IconButtonRoot>;
+  return <SlotRoot {...rootProps}>{children}</SlotRoot>;
 }) as ExtendIconButton<IconButtonTypeMap>;
 
 IconButton.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-joy/src/IconButton/IconButtonProps.ts b/packages/mui-joy/src/IconButton/IconButtonProps.ts
index 29cb334cc0340f..3aab381f8f04f8 100644
--- a/packages/mui-joy/src/IconButton/IconButtonProps.ts
+++ b/packages/mui-joy/src/IconButton/IconButtonProps.ts
@@ -10,9 +10,7 @@ import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
 export type IconButtonSlot = 'root';
 
 export interface IconButtonPropsVariantOverrides {}
-
 export interface IconButtonPropsColorOverrides {}
-
 export interface IconButtonPropsSizeOverrides {}
 
 export interface IconButtonTypeMap<P = {}, D extends React.ElementType = 'button'> {
diff --git a/packages/mui-joy/src/Input/Input.spec.tsx b/packages/mui-joy/src/Input/Input.spec.tsx
new file mode 100644
index 00000000000000..698a6a34124d24
--- /dev/null
+++ b/packages/mui-joy/src/Input/Input.spec.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Input, { InputOwnerState } from '@mui/joy/Input';
+import { expectType } from '@mui/types';
+
+<Input component="div" />;
+
+<Input data-testid="any" />;
+
+<Input
+  slots={{
+    root: 'div',
+    input: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+  }}
+/>;
+
+<Input
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    input: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Input
+  slotProps={{
+    root: (ownerState) => {
+      expectType<InputOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    input: (ownerState) => {
+      expectType<InputOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<InputOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<InputOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Input/Input.test.js b/packages/mui-joy/src/Input/Input.test.js
index c6712a41de1d7d..5f876f581a5302 100644
--- a/packages/mui-joy/src/Input/Input.test.js
+++ b/packages/mui-joy/src/Input/Input.test.js
@@ -8,7 +8,7 @@ import { ThemeProvider } from '@mui/joy/styles';
 describe('Joy <Input />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Input />, () => ({
+  describeConformance(<Input startDecorator="1" endDecorator="2" />, () => ({
     render,
     classes,
     ThemeProvider,
@@ -17,6 +17,12 @@ describe('Joy <Input />', () => {
     testDeepOverrides: { slotName: 'input', slotClassName: classes.input },
     testVariantProps: { variant: 'solid', fullWidth: true },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      input: { expectedClassName: classes.input },
+      startDecorator: { expectedClassName: classes.startDecorator },
+      endDecorator: { expectedClassName: classes.endDecorator },
+    },
     skip: ['propsSpread', 'componentsProp', 'classesRoot'],
   }));
 
diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
index 4896090d31b2e5..687fe951c1074b 100644
--- a/packages/mui-joy/src/Input/Input.tsx
+++ b/packages/mui-joy/src/Input/Input.tsx
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '@mui/base/composeClasses';
-import { useSlotProps, EventHandlers } from '@mui/base/utils';
+import { EventHandlers } from '@mui/base/utils';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import { InputTypeMap, InputProps, InputOwnerState } from './InputProps';
 import inputClasses, { getInputUtilityClass } from './inputClasses';
 import useForwardedInput from './useForwardedInput';
@@ -248,8 +249,7 @@ const Input = React.forwardRef(function Input(inProps, ref) {
     inputStateClasses,
     getRootProps,
     getInputProps,
-    component,
-    componentsProps = {},
+    component = 'div',
     formControl,
     focused,
     error: errorProp = false,
@@ -291,58 +291,55 @@ const Input = React.forwardRef(function Input(inProps, ref) {
   };
 
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = { ...other, component };
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: [classes.root, rootStateClasses],
     elementType: InputRoot,
     getSlotProps: getRootProps,
-    externalSlotProps: componentsProps.root,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component,
-    },
+    externalForwardedProps,
     ownerState,
-    className: [classes.root, rootStateClasses],
   });
 
-  const inputProps = useSlotProps({
+  const [SlotInput, inputProps] = useSlot('input', {
+    ...(formControl && {
+      additionalProps: {
+        id: formControl.htmlFor,
+        'aria-describedby': formControl['aria-describedby'],
+      },
+    }),
+    className: [classes.input, inputStateClasses],
     elementType: InputInput,
     getSlotProps: (otherHandlers: EventHandlers) =>
       getInputProps({ ...otherHandlers, ...propsToForward }),
-    externalSlotProps: componentsProps.input,
+    externalForwardedProps,
     ownerState,
-    additionalProps: formControl
-      ? {
-          id: formControl.htmlFor,
-          'aria-describedby': formControl['aria-describedby'],
-        }
-      : {},
-    className: [classes.input, inputStateClasses],
   });
 
-  const startDecoratorProps = useSlotProps({
+  const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
+    className: classes.startDecorator,
     elementType: InputStartDecorator,
-    externalSlotProps: componentsProps.startDecorator,
+    externalForwardedProps,
     ownerState,
-    className: classes.startDecorator,
   });
 
-  const endDecoratorProps = useSlotProps({
+  const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
+    className: classes.endDecorator,
     elementType: InputEndDecorator,
-    externalSlotProps: componentsProps.endDecorator,
+    externalForwardedProps,
     ownerState,
-    className: classes.endDecorator,
   });
 
   return (
-    <InputRoot {...rootProps}>
+    <SlotRoot {...rootProps}>
       {startDecorator && (
-        <InputStartDecorator {...startDecoratorProps}>{startDecorator}</InputStartDecorator>
+        <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
       )}
 
-      <InputInput {...inputProps} />
-      {endDecorator && <InputEndDecorator {...endDecoratorProps}>{endDecorator}</InputEndDecorator>}
-    </InputRoot>
+      <SlotInput {...inputProps} />
+      {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
+    </SlotRoot>
   );
 }) as OverridableComponent<InputTypeMap>;
 
@@ -375,16 +372,6 @@ Input.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * @ignore
    */
diff --git a/packages/mui-joy/src/Input/InputProps.ts b/packages/mui-joy/src/Input/InputProps.ts
index b3b9f01dbce28c..9706ec10c34930 100644
--- a/packages/mui-joy/src/Input/InputProps.ts
+++ b/packages/mui-joy/src/Input/InputProps.ts
@@ -1,25 +1,27 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ColorPaletteProp, VariantProp, SxProps, ApplyColorInversion } from '../styles/types';
+import { ApplyColorInversion, ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type InputSlot = 'root' | 'input' | 'startDecorator' | 'endDecorator';
 
 export interface InputPropsVariantOverrides {}
-
 export interface InputPropsColorOverrides {}
-
 export interface InputPropsSizeOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'div', { sx?: SxProps }, InputOwnerState>;
-  input?: SlotComponentProps<'input', { sx?: SxProps }, InputOwnerState>;
-  startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, InputOwnerState>;
-  endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, InputOwnerState>;
-}
+export type InputSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  InputSlot,
+  {
+    root: SlotProps<'div', {}, InputOwnerState>;
+    input: SlotProps<'input', {}, InputOwnerState>;
+    startDecorator: SlotProps<'span', {}, InputOwnerState>;
+    endDecorator: SlotProps<'span', {}, InputOwnerState>;
+  }
+>;
 
 export interface InputTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
+    InputSlotsAndSlotProps &
     Pick<
       React.InputHTMLAttributes<HTMLInputElement>,
       | 'autoComplete'
@@ -49,11 +51,6 @@ export interface InputTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * @default 'neutral'
        */
       color?: OverridableStringUnion<ColorPaletteProp, InputPropsColorOverrides>;
-      /**
-       * The props used for each slot inside the component.
-       * @default {}
-       */
-      componentsProps?: ComponentsProps;
       /**
        * Trailing adornment for this input.
        */
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
index f5c135e0ecb978..54fa44eb07763d 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.test.tsx
@@ -9,13 +9,16 @@ describe('<LinearProgress />', () => {
   const { render } = createRenderer();
   describeConformance(<LinearProgress />, () => ({
     classes,
-    inheritComponent: 'div',
+    inheritComponent: 'span',
     render,
     ThemeProvider,
     muiName: 'JoyLinearProgress',
-    refInstanceof: window.HTMLDivElement,
+    refInstanceof: window.HTMLSpanElement,
     testVariantProps: { determinate: true },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+    },
     skip: ['classesRoot', 'componentsProp'],
   }));
 
diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
index 96487bb358f763..20c32222bfc36e 100644
--- a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
+++ b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -1,5 +1,4 @@
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import { css, keyframes } from '@mui/system';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
@@ -8,6 +7,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
 import {
   LinearProgressOwnerState,
@@ -53,7 +53,6 @@ const useUtilityClasses = (ownerState: LinearProgressOwnerState) => {
       variant && `variant${capitalize(variant)}`,
       size && `size${capitalize(size)}`,
     ],
-    progress: ['progress'],
   };
 
   return composeClasses(slots, getLinearProgressUtilityClass, {});
@@ -145,10 +144,10 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
   });
 
   const {
-    component = 'div',
     children,
     className,
     color = 'primary',
+    component = 'span',
     size = 'md',
     variant = 'soft',
     thickness,
@@ -160,6 +159,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
   const ownerState = {
     ...props,
     color,
+    component,
     size,
     variant,
     thickness,
@@ -170,14 +170,13 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
     elementType: LinearProgressRoot,
-    externalSlotProps: {},
-    externalForwardedProps: other,
+    externalForwardedProps: { ...other, component },
     ownerState,
     additionalProps: {
-      ref,
-      as: component,
       role: 'progressbar',
       style: {
         // Setting this CSS varaible via inline-style
@@ -185,15 +184,14 @@ const LinearProgress = React.forwardRef(function LinearProgress(inProps, ref) {
         // `value` prop updates
         '--LinearProgress-percent': value,
       },
+      ...(typeof value === 'number' &&
+        determinate && {
+          'aria-valuenow': Math.round(value),
+        }),
     },
-    className: clsx(classes.root, className),
-    ...(typeof value === 'number' &&
-      determinate && {
-        'aria-valuenow': Math.round(value),
-      }),
   });
 
-  return <LinearProgressRoot {...rootProps}>{children}</LinearProgressRoot>;
+  return <SlotRoot {...rootProps}>{children}</SlotRoot>;
 }) as OverridableComponent<LinearProgressTypeMap>;
 
 LinearProgress.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-joy/src/LinearProgress/linearProgressClasses.ts b/packages/mui-joy/src/LinearProgress/linearProgressClasses.ts
index 6de23a336cd3ba..9df29535022d2e 100644
--- a/packages/mui-joy/src/LinearProgress/linearProgressClasses.ts
+++ b/packages/mui-joy/src/LinearProgress/linearProgressClasses.ts
@@ -5,8 +5,6 @@ export interface LinearProgressClasses {
   root: string;
   /** Styles applied to the root element if `determinate` is true. */
   determinate: string;
-  /** Styles applied to the `progress` element. */
-  progress: string;
   /** Styles applied to the root element if `color="primary"`. */
   colorPrimary: string;
   /** Styles applied to the root element if `color="neutral"`. */
@@ -44,7 +42,6 @@ export function getLinearProgressUtilityClass(slot: string): string {
 const linearProgressClasses: LinearProgressClasses = generateUtilityClasses('JoyLinearProgress', [
   'root',
   'determinate',
-  'progress',
   'colorPrimary',
   'colorNeutral',
   'colorDanger',
diff --git a/packages/mui-joy/src/Link/Link.spec.tsx b/packages/mui-joy/src/Link/Link.spec.tsx
index 74855bc7560da9..bb08b658747462 100644
--- a/packages/mui-joy/src/Link/Link.spec.tsx
+++ b/packages/mui-joy/src/Link/Link.spec.tsx
@@ -1,5 +1,6 @@
-import Link from '@mui/joy/Link';
 import * as React from 'react';
+import Link, { LinkOwnerState } from '@mui/joy/Link';
+import { expectType } from '@mui/types';
 
 <Link />;
 <Link component="div" />;
@@ -50,3 +51,51 @@ import * as React from 'react';
 
 // @ts-expect-error there is no underline `never`
 <Link underline="never" />;
+
+<Link
+  slots={{
+    root: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+  }}
+/>;
+
+<Link
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Link
+  slotProps={{
+    root: (ownerState) => {
+      expectType<LinkOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<LinkOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<LinkOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Link/Link.test.js b/packages/mui-joy/src/Link/Link.test.js
index 203394ccb16496..858c8875e34b89 100644
--- a/packages/mui-joy/src/Link/Link.test.js
+++ b/packages/mui-joy/src/Link/Link.test.js
@@ -18,24 +18,27 @@ function focusVisible(element) {
 describe('<Link />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Link href="/">Home</Link>, () => ({
-    classes,
-    inheritComponent: 'a',
-    render,
-    ThemeProvider,
-    muiName: 'JoyLink',
-    refInstanceof: window.HTMLAnchorElement,
-    testVariantProps: { color: 'primary', variant: 'plain' },
-    testStateOverrides: { prop: 'underline', value: 'always', styleKey: 'underlineAlways' },
-    testCustomVariant: true,
-    skip: [
-      'classesRoot',
-      'componentsProp',
-      'themeDefaultProps',
-      'propsSpread',
-      'themeStyleOverrides',
-    ],
-  }));
+  describeConformance(
+    <Link href="/" startDecorator="1" endDecorator="1">
+      Home
+    </Link>,
+    () => ({
+      classes,
+      inheritComponent: 'a',
+      render,
+      ThemeProvider,
+      muiName: 'JoyLink',
+      refInstanceof: window.HTMLAnchorElement,
+      testVariantProps: { color: 'primary', variant: 'plain' },
+      testCustomVariant: true,
+      slots: {
+        root: { expectedClassName: classes.root },
+        startDecorator: { expectedClassName: classes.startDecorator },
+        endDecorator: { expectedClassName: classes.endDecorator },
+      },
+      skip: ['classesRoot', 'componentsProp'],
+    }),
+  );
 
   it('should render children', () => {
     const { queryByText } = render(<Link href="/">Home</Link>);
diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
index 7aa90b8bbe83d1..35c3cdae18dfca 100644
--- a/packages/mui-joy/src/Link/Link.tsx
+++ b/packages/mui-joy/src/Link/Link.tsx
@@ -7,10 +7,10 @@ import {
   unstable_useForkRef as useForkRef,
   unstable_useIsFocusVisible as useIsFocusVisible,
 } from '@mui/utils';
-import { useSlotProps } from '@mui/base/utils';
 import { unstable_extendSxProp as extendSxProp } from '@mui/system';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
 import { LinkProps, LinkOwnerState, LinkTypeMap } from './LinkProps';
 import { TypographyContext } from '../Typography/Typography';
@@ -166,8 +166,6 @@ const Link = React.forwardRef(function Link(inProps, ref) {
   const props = extendSxProp({ ...themeProps, color: textColor }) as LinkProps;
 
   const {
-    component = 'a',
-    componentsProps = {},
     children,
     disabled = false,
     onBlur,
@@ -213,7 +211,6 @@ const Link = React.forwardRef(function Link(inProps, ref) {
   const ownerState = {
     ...props,
     color,
-    component,
     disabled,
     focusVisible,
     underline,
@@ -225,44 +222,42 @@ const Link = React.forwardRef(function Link(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
-    elementType: LinkRoot,
-    externalSlotProps: componentsProps.root,
-    externalForwardedProps: other,
+  const [SlotRoot, rootProps] = useSlot('root', {
     additionalProps: {
-      ref: handleRef,
-      as: component,
       onBlur: handleBlur,
       onFocus: handleFocus,
     },
-    ownerState,
+    ref: handleRef,
     className: classes.root,
+    elementType: LinkRoot,
+    externalForwardedProps: other,
+    ownerState,
   });
 
-  const startDecoratorProps = useSlotProps({
+  const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
+    className: classes.startDecorator,
     elementType: StartDecorator,
-    externalSlotProps: componentsProps.startDecorator,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.startDecorator,
   });
 
-  const endDecoratorProps = useSlotProps({
+  const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
+    className: classes.endDecorator,
     elementType: EndDecorator,
-    externalSlotProps: componentsProps.endDecorator,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.endDecorator,
   });
 
   return (
     <TypographyContext.Provider value>
-      <LinkRoot {...rootProps}>
+      <SlotRoot {...rootProps}>
         {startDecorator && (
-          <StartDecorator {...startDecoratorProps}>{startDecorator}</StartDecorator>
+          <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
         )}
 
         {children}
-        {endDecorator && <EndDecorator {...endDecoratorProps}>{endDecorator}</EndDecorator>}
-      </LinkRoot>
+        {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
+      </SlotRoot>
     </TypographyContext.Provider>
   );
 }) as OverridableComponent<LinkTypeMap>;
@@ -284,20 +279,6 @@ Link.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * If `true`, the component is disabled.
    * @default false
diff --git a/packages/mui-joy/src/Link/LinkProps.ts b/packages/mui-joy/src/Link/LinkProps.ts
index 6f28525a71638d..9362780a4e396b 100644
--- a/packages/mui-joy/src/Link/LinkProps.ts
+++ b/packages/mui-joy/src/Link/LinkProps.ts
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
 import {
   ColorPaletteProp,
-  TypographySystem,
-  VariantProp,
   SxProps,
   SystemProps,
+  TypographySystem,
+  VariantProp,
 } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type LinkSlot = 'root' | 'startDecorator' | 'endDecorator';
 
@@ -15,14 +15,18 @@ export interface LinkPropsVariantOverrides {}
 
 export interface LinkPropsColorOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'a', { sx?: SxProps }, LinkOwnerState>;
-  startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, LinkOwnerState>;
-  endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, LinkOwnerState>;
-}
+export type LinkSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  LinkSlot,
+  {
+    root: SlotProps<'a', {}, LinkOwnerState>;
+    startDecorator: SlotProps<'span', {}, LinkOwnerState>;
+    endDecorator: SlotProps<'span', {}, LinkOwnerState>;
+  }
+>;
 
 export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
   props: P &
+    LinkSlotsAndSlotProps &
     Omit<SystemProps, 'color'> & {
       /**
        * The content of the component.
@@ -33,11 +37,6 @@ export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
        * @default 'primary'
        */
       color?: OverridableStringUnion<ColorPaletteProp, LinkPropsColorOverrides>;
-      /**
-       * The props used for each slot inside the component.
-       * @default {}
-       */
-      componentsProps?: ComponentsProps;
       /**
        * If `true`, the component is disabled.
        * @default false
diff --git a/packages/mui-joy/src/List/ListProps.ts b/packages/mui-joy/src/List/ListProps.ts
index 6de57cf9b48b5b..4eb6123163ee63 100644
--- a/packages/mui-joy/src/List/ListProps.ts
+++ b/packages/mui-joy/src/List/ListProps.ts
@@ -5,9 +5,7 @@ import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
 export type ListSlot = 'root';
 
 export interface ListPropsSizeOverrides {}
-
 export interface ListPropsVariantOverrides {}
-
 export interface ListPropsColorOverrides {}
 
 export interface ListTypeMap<P = {}, D extends React.ElementType = 'ul'> {
diff --git a/packages/mui-joy/src/ListItem/ListItem.spec.tsx b/packages/mui-joy/src/ListItem/ListItem.spec.tsx
new file mode 100644
index 00000000000000..3856ea9402ab1a
--- /dev/null
+++ b/packages/mui-joy/src/ListItem/ListItem.spec.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import ListItem, { ListItemOwnerState } from '@mui/joy/ListItem';
+import { expectType } from '@mui/types';
+
+<ListItem component="div" />;
+
+<ListItem data-testid="any" />;
+
+<ListItem
+  slots={{
+    root: 'div',
+    startAction: 'div',
+    endAction: 'div',
+  }}
+/>;
+
+<ListItem
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startAction: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endAction: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<ListItem
+  slotProps={{
+    root: (ownerState) => {
+      expectType<ListItemOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startAction: (ownerState) => {
+      expectType<ListItemOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endAction: (ownerState) => {
+      expectType<ListItemOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/ListItem/ListItem.test.js b/packages/mui-joy/src/ListItem/ListItem.test.js
index ecf99db6885294..ec32e3140f1660 100644
--- a/packages/mui-joy/src/ListItem/ListItem.test.js
+++ b/packages/mui-joy/src/ListItem/ListItem.test.js
@@ -10,7 +10,7 @@ import ListSubheader from '@mui/joy/ListSubheader';
 describe('Joy <ListItem />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<ListItem />, () => ({
+  describeConformance(<ListItem startAction="1" endAction="2" />, () => ({
     classes,
     inheritComponent: 'li',
     render,
@@ -19,6 +19,11 @@ describe('Joy <ListItem />', () => {
     refInstanceof: window.HTMLLIElement,
     testVariantProps: { variant: 'solid' },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      startAction: { expectedClassName: classes.startAction },
+      endAction: { expectedClassName: classes.endAction },
+    },
     skip: ['componentsProp', 'classesRoot'],
   }));
 
diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx
index 5ede1556990d6d..b3f7dd57e38124 100644
--- a/packages/mui-joy/src/ListItem/ListItem.tsx
+++ b/packages/mui-joy/src/ListItem/ListItem.tsx
@@ -9,6 +9,7 @@ import { OverridableComponent } from '@mui/types';
 import composeClasses from '@mui/base/composeClasses';
 import { MenuUnstyledContext } from '@mui/base/MenuUnstyled';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import { ListItemProps, ListItemOwnerState, ListItemTypeMap } from './ListItemProps';
 import { getListItemUtilityClass } from './listItemClasses';
 import NestedListContext from '../List/NestedListContext';
@@ -192,22 +193,38 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
   };
 
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = { ...other, component };
+
+  const [SlotRoot, rootProps] = useSlot('root', {
+    additionalProps: {
+      role,
+    },
+    ref,
+    className: clsx(classes.root, className),
+    elementType: ListItemRoot,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [SlotStartAction, startActionProps] = useSlot('startAction', {
+    className: classes.startAction,
+    elementType: ListItemStartAction,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [SlotEndAction, endActionProps] = useSlot('endAction', {
+    className: classes.endAction,
+    elementType: ListItemEndAction,
+    externalForwardedProps,
+    ownerState,
+  });
+
   return (
     <ListSubheaderDispatch.Provider value={setSubheaderId}>
       <NestedListContext.Provider value={nested ? subheaderId || true : false}>
-        <ListItemRoot
-          ref={ref}
-          as={component}
-          className={clsx(classes.root, className)}
-          ownerState={ownerState}
-          role={role}
-          {...other}
-        >
-          {startAction && (
-            <ListItemStartAction className={classes.startAction} ownerState={ownerState}>
-              {startAction}
-            </ListItemStartAction>
-          )}
+        <SlotRoot {...rootProps}>
+          {startAction && <SlotStartAction {...startActionProps}>{startAction}</SlotStartAction>}
 
           {React.Children.map(children, (child, index) =>
             React.isValidElement(child)
@@ -222,12 +239,8 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
               : child,
           )}
 
-          {endAction && (
-            <ListItemEndAction className={classes.endAction} ownerState={ownerState}>
-              {endAction}
-            </ListItemEndAction>
-          )}
-        </ListItemRoot>
+          {endAction && <SlotEndAction {...endActionProps}>{endAction}</SlotEndAction>}
+        </SlotRoot>
       </NestedListContext.Provider>
     </ListSubheaderDispatch.Provider>
   );
diff --git a/packages/mui-joy/src/ListItem/ListItemProps.ts b/packages/mui-joy/src/ListItem/ListItemProps.ts
index 277ab842827ea8..35c8ee73656643 100644
--- a/packages/mui-joy/src/ListItem/ListItemProps.ts
+++ b/packages/mui-joy/src/ListItem/ListItemProps.ts
@@ -1,52 +1,62 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type ListItemSlot = 'root' | 'startAction' | 'endAction';
 
 export interface ListItemPropsVariantOverrides {}
-
 export interface ListItemPropsColorOverrides {}
 
+export type ListItemSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  ListItemSlot,
+  {
+    root: SlotProps<'div', {}, ListItemOwnerState>;
+    startAction: SlotProps<'span', {}, ListItemOwnerState>;
+    endAction: SlotProps<'span', {}, ListItemOwnerState>;
+  }
+>;
+
 export interface ListItemTypeMap<P = {}, D extends React.ElementType = 'li'> {
-  props: P & {
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'neutral'
-     */
-    color?: OverridableStringUnion<ColorPaletteProp, ListItemPropsColorOverrides>;
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * The element to display at the start of ListItem.
-     */
-    startAction?: React.ReactNode;
-    /**
-     * The element to display at the end of ListItem.
-     */
-    endAction?: React.ReactNode;
-    /**
-     * If `true`, the component can contain NestedList.
-     * @default false
-     */
-    nested?: boolean;
-    /**
-     * If `true`, the component has sticky position (with top = 0).
-     * @default false
-     */
-    sticky?: boolean;
-    /**
-     * The variant to use.
-     * @default 'plain'
-     */
-    variant?: OverridableStringUnion<VariantProp, ListItemPropsVariantOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-  };
+  props: P &
+    ListItemSlotsAndSlotProps & {
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'neutral'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, ListItemPropsColorOverrides>;
+      /**
+       * The content of the component.
+       */
+      children?: React.ReactNode;
+      /**
+       * The element to display at the start of ListItem.
+       */
+      startAction?: React.ReactNode;
+      /**
+       * The element to display at the end of ListItem.
+       */
+      endAction?: React.ReactNode;
+      /**
+       * If `true`, the component can contain NestedList.
+       * @default false
+       */
+      nested?: boolean;
+      /**
+       * If `true`, the component has sticky position (with top = 0).
+       * @default false
+       */
+      sticky?: boolean;
+      /**
+       * The variant to use.
+       * @default 'plain'
+       */
+      variant?: OverridableStringUnion<VariantProp, ListItemPropsVariantOverrides>;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+    };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/MenuList/MenuList.test.js b/packages/mui-joy/src/MenuList/MenuList.test.js
index 539ab9ee6900f5..a438cbedcaac3a 100644
--- a/packages/mui-joy/src/MenuList/MenuList.test.js
+++ b/packages/mui-joy/src/MenuList/MenuList.test.js
@@ -12,7 +12,7 @@ describe('Joy <MenuList />', () => {
     inheritComponent: 'ul',
     render,
     ThemeProvider,
-    muiName: 'MuiMenuList',
+    muiName: 'JoyMenuList',
     refInstanceof: window.HTMLUListElement,
     testVariantProps: { variant: 'solid' },
     testCustomVariant: true,
diff --git a/packages/mui-joy/src/MenuList/MenuList.tsx b/packages/mui-joy/src/MenuList/MenuList.tsx
index d36f7f48b22846..2187714c21ec02 100644
--- a/packages/mui-joy/src/MenuList/MenuList.tsx
+++ b/packages/mui-joy/src/MenuList/MenuList.tsx
@@ -26,7 +26,7 @@ const useUtilityClasses = (ownerState: MenuListProps) => {
 };
 
 const MenuListRoot = styled(StyledList, {
-  name: 'MuiMenuList',
+  name: 'JoyMenuList',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: MenuListOwnerState }>(({ theme, ownerState }) => {
@@ -50,7 +50,7 @@ const MenuListRoot = styled(StyledList, {
 const MenuList = React.forwardRef(function MenuList(inProps, ref) {
   const props = useThemeProps<typeof inProps & { component?: React.ElementType }>({
     props: inProps,
-    name: 'MuiMenuList',
+    name: 'JoyMenuList',
   });
 
   const {
diff --git a/packages/mui-joy/src/Modal/Modal.spec.tsx b/packages/mui-joy/src/Modal/Modal.spec.tsx
new file mode 100644
index 00000000000000..e14851ec9e2d63
--- /dev/null
+++ b/packages/mui-joy/src/Modal/Modal.spec.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import Modal, { ModalOwnerState } from '@mui/joy/Modal';
+import { expectType } from '@mui/types';
+
+<Modal open component="div">
+  <div />
+</Modal>;
+
+<Modal open data-testid="any">
+  <div />
+</Modal>;
+
+<Modal
+  open
+  slots={{
+    root: 'div',
+    backdrop: 'div',
+  }}
+>
+  <div />
+</Modal>;
+
+<Modal
+  open
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    backdrop: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+>
+  <div />
+</Modal>;
+
+<Modal
+  open
+  slotProps={{
+    root: (ownerState) => {
+      expectType<ModalOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    backdrop: (ownerState) => {
+      expectType<ModalOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+>
+  <div />
+</Modal>;
diff --git a/packages/mui-joy/src/Modal/Modal.test.tsx b/packages/mui-joy/src/Modal/Modal.test.tsx
index 0a5a9b4d889655..15415281cb7593 100644
--- a/packages/mui-joy/src/Modal/Modal.test.tsx
+++ b/packages/mui-joy/src/Modal/Modal.test.tsx
@@ -22,6 +22,10 @@ describe('<Modal />', () => {
       refInstanceof: window.HTMLDivElement,
       testComponentPropWith: 'header',
       testVariantProps: { hideBackdrop: true },
+      slots: {
+        root: { expectedClassName: classes.root },
+        backdrop: { expectedClassName: classes.backdrop },
+      },
       skip: [
         'classesRoot',
         'rootClass', // portal, can't determine the root
@@ -113,7 +117,7 @@ describe('<Modal />', () => {
         <Modal
           onClose={onClose}
           open
-          componentsProps={{
+          slotProps={{
             backdrop: { 'data-testid': 'backdrop' } as any,
           }}
         >
@@ -146,7 +150,7 @@ describe('<Modal />', () => {
         <ModalWithDisabledBackdropClick
           onClose={onClose}
           open
-          componentsProps={{ backdrop: { 'data-testid': 'backdrop' } as any }}
+          slotProps={{ backdrop: { 'data-testid': 'backdrop' } as any }}
         >
           <div />
         </ModalWithDisabledBackdropClick>,
diff --git a/packages/mui-joy/src/Modal/Modal.tsx b/packages/mui-joy/src/Modal/Modal.tsx
index 51f89208bd7336..3a34bd4c4a8a6f 100644
--- a/packages/mui-joy/src/Modal/Modal.tsx
+++ b/packages/mui-joy/src/Modal/Modal.tsx
@@ -8,12 +8,12 @@ import {
   unstable_useForkRef as useForkRef,
   unstable_useEventCallback as useEventCallback,
 } from '@mui/utils';
-import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/base/composeClasses';
 import Portal from '@mui/base/Portal';
 import FocusTrap from '@mui/base/FocusTrap';
 import { ModalManager } from '@mui/base/ModalUnstyled';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import { getModalUtilityClass } from './modalClasses';
 import { ModalOwnerState, ModalTypeMap } from './ModalProps';
 import CloseModalContext from './CloseModalContext';
@@ -31,6 +31,7 @@ const useUtilityClasses = (ownerState: ModalOwnerState) => {
 
   const slots = {
     root: ['root', !open && 'hidden'],
+    backdrop: ['backdrop'],
   };
 
   return composeClasses(slots, getModalUtilityClass, {});
@@ -78,7 +79,7 @@ const ModalBackdrop = styled('div', {
   }),
 }));
 
-const ModalUnstyled = React.forwardRef(function ModalUnstyled(inProps, ref) {
+const Modal = React.forwardRef(function ModalUnstyled(inProps, ref) {
   const props = useThemeProps<typeof inProps & { component?: React.ElementType }>({
     props: inProps,
     name: 'JoyModal',
@@ -86,8 +87,6 @@ const ModalUnstyled = React.forwardRef(function ModalUnstyled(inProps, ref) {
 
   const {
     children,
-    component = 'div',
-    componentsProps = {},
     container,
     disableAutoFocus = false,
     disableEnforceFocus = false,
@@ -227,28 +226,24 @@ const ModalUnstyled = React.forwardRef(function ModalUnstyled(inProps, ref) {
     }
   };
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    additionalProps: { role: 'presentation', onKeyDown: handleKeyDown },
+    ref: handleRef,
+    className: classes.root,
     elementType: ModalRoot,
-    externalSlotProps: componentsProps.root,
     externalForwardedProps: other,
-    additionalProps: {
-      as: component,
-      ref: handleRef,
-      role: 'presentation',
-      onKeyDown: handleKeyDown,
-    },
-    className: classes.root,
     ownerState,
   });
 
-  const backdropProps = useSlotProps({
-    elementType: ModalBackdrop,
-    externalSlotProps: componentsProps.backdrop,
+  const [SlotBackdrop, backdropProps] = useSlot('backdrop', {
     additionalProps: {
       'aria-hidden': true,
       onClick: handleBackdropClick,
       open,
     },
+    className: classes.backdrop,
+    elementType: ModalBackdrop,
+    externalForwardedProps: other,
     ownerState,
   });
 
@@ -266,8 +261,8 @@ const ModalUnstyled = React.forwardRef(function ModalUnstyled(inProps, ref) {
          * is not meant for humans to interact with directly.
          * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
          */}
-        <ModalRoot {...rootProps}>
-          {!hideBackdrop ? <ModalBackdrop {...backdropProps} /> : null}
+        <SlotRoot {...rootProps}>
+          {!hideBackdrop ? <SlotBackdrop {...backdropProps} /> : null}
           <FocusTrap
             disableEnforceFocus={disableEnforceFocus}
             disableAutoFocus={disableAutoFocus}
@@ -282,52 +277,21 @@ const ModalUnstyled = React.forwardRef(function ModalUnstyled(inProps, ref) {
                 }),
               })}
           </FocusTrap>
-        </ModalRoot>
+        </SlotRoot>
       </Portal>
     </CloseModalContext.Provider>
   );
 }) as OverridableComponent<ModalTypeMap>;
 
-ModalUnstyled.propTypes /* remove-proptypes */ = {
+Modal.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * A single child content element.
    */
   children: elementAcceptingRef.isRequired,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * When set to true the Modal waits until a nested Transition is completed before closing.
-   * @default false
-   */
-  closeAfterTransition: PropTypes.bool,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The components used for each slot inside the Modal.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Backdrop: PropTypes.elementType,
-    Root: PropTypes.elementType,
-  }),
-  /**
-   * The props used for each slot inside the Modal.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
@@ -390,17 +354,12 @@ ModalUnstyled.propTypes /* remove-proptypes */ = {
    * @default false
    */
   keepMounted: PropTypes.bool,
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick: PropTypes.func,
   /**
    * Callback fired when the component requests to be closed.
    * The `reason` parameter can optionally be used to control the response to `onClose`.
    *
    * @param {object} event The event source of the callback.
-   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"closeClick"`.
    */
   onClose: PropTypes.func,
   /**
@@ -411,6 +370,14 @@ ModalUnstyled.propTypes /* remove-proptypes */ = {
    * If `true`, the component is shown.
    */
   open: PropTypes.bool.isRequired,
-};
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+} as any;
 
-export default ModalUnstyled;
+export default Modal;
diff --git a/packages/mui-joy/src/Modal/ModalProps.ts b/packages/mui-joy/src/Modal/ModalProps.ts
index 99b0e5639cd4e3..ef47d1cf539277 100644
--- a/packages/mui-joy/src/Modal/ModalProps.ts
+++ b/packages/mui-joy/src/Modal/ModalProps.ts
@@ -1,18 +1,22 @@
 import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
 import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
+import { OverrideProps } from '@mui/types';
 import { SxProps } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type ModalSlot = 'root' | 'backdrop';
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'div', { sx?: SxProps }, ModalOwnerState>;
-  backdrop?: SlotComponentProps<'div', { sx?: SxProps }, ModalOwnerState>;
-}
+export type ModalSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  ModalSlot,
+  {
+    root: SlotProps<'div', {}, ModalOwnerState>;
+    backdrop: SlotProps<'div', {}, ModalOwnerState>;
+  }
+>;
 
 export interface ModalTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
+    ModalSlotsAndSlotProps &
     Pick<
       ModalUnstyledOwnProps,
       | 'children'
@@ -27,11 +31,6 @@ export interface ModalTypeMap<P = {}, D extends React.ElementType = 'div'> {
       | 'keepMounted'
       | 'open'
     > & {
-      /**
-       * The props used for each slot inside the Modal.
-       * @default {}
-       */
-      componentsProps?: ComponentsProps;
       /**
        * Callback fired when the component requests to be closed.
        * The `reason` parameter can optionally be used to control the response to `onClose`.
diff --git a/packages/mui-joy/src/Modal/modalClasses.ts b/packages/mui-joy/src/Modal/modalClasses.ts
index 46e3b3e30f47eb..9eec63c1a2ca20 100644
--- a/packages/mui-joy/src/Modal/modalClasses.ts
+++ b/packages/mui-joy/src/Modal/modalClasses.ts
@@ -3,6 +3,8 @@ import { generateUtilityClass, generateUtilityClasses } from '../className';
 export interface ModalClasses {
   /** Styles applied to the root element. */
   root: string;
+  /** Styles applied to the backdrop element. */
+  backdrop: string;
   /** Styles applied to the root element if `color="primary"`. */
   colorPrimary: string;
   /** Styles applied to the root element if `color="neutral"`. */
@@ -33,6 +35,7 @@ export function getModalUtilityClass(slot: string): string {
 
 const modalClasses: ModalClasses = generateUtilityClasses('JoyModal', [
   'root',
+  'backdrop',
   'colorPrimary',
   'colorNeutral',
   'colorDanger',
diff --git a/packages/mui-joy/src/Radio/Radio.spec.tsx b/packages/mui-joy/src/Radio/Radio.spec.tsx
index 644c7f94a47f3e..07ea1d010f3e93 100644
--- a/packages/mui-joy/src/Radio/Radio.spec.tsx
+++ b/packages/mui-joy/src/Radio/Radio.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Radio from '@mui/joy/Radio';
+import Radio, { RadioOwnerState } from '@mui/joy/Radio';
+import { expectType } from '@mui/types';
 
 <Radio id="test" name="test" />;
 
@@ -31,3 +32,84 @@ import Radio from '@mui/joy/Radio';
 <Radio size="sm" />;
 <Radio size="md" />;
 <Radio size="lg" />;
+
+<Radio
+  slots={{
+    root: 'div',
+    radio: 'div',
+    icon: 'div',
+    action: 'div',
+    input: 'div',
+    label: 'div',
+  }}
+/>;
+
+<Radio
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    radio: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    icon: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    action: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    input: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    label: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Radio
+  slotProps={{
+    root: (ownerState) => {
+      expectType<RadioOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    radio: (ownerState) => {
+      expectType<RadioOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    icon: (ownerState) => {
+      expectType<RadioOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    action: (ownerState) => {
+      expectType<RadioOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    input: (ownerState) => {
+      expectType<RadioOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    label: (ownerState) => {
+      expectType<RadioOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Radio/Radio.test.js b/packages/mui-joy/src/Radio/Radio.test.js
index 4678f619c0fa0a..05dc10742a9edc 100644
--- a/packages/mui-joy/src/Radio/Radio.test.js
+++ b/packages/mui-joy/src/Radio/Radio.test.js
@@ -7,7 +7,7 @@ import { ThemeProvider } from '@mui/joy/styles';
 describe('<Radio />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Radio />, () => ({
+  describeConformance(<Radio label="demo" />, () => ({
     classes,
     render,
     ThemeProvider,
@@ -16,6 +16,14 @@ describe('<Radio />', () => {
     testVariantProps: { variant: 'soft' },
     testCustomVariant: true,
     refInstanceof: window.HTMLSpanElement,
+    slots: {
+      root: { expectedClassName: classes.root },
+      radio: { expectedClassName: classes.radio },
+      icon: { expectedClassName: classes.icon },
+      action: { expectedClassName: classes.action },
+      input: { expectedClassName: classes.input },
+      label: { expectedClassName: classes.label },
+    },
     skip: ['componentProp', 'componentsProp', 'classesRoot', 'propsSpread'],
   }));
 
diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
index 25318d95bc2416..2cf0c965c9d0ec 100644
--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
 import { useSwitch } from '@mui/base/SwitchUnstyled';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import radioClasses, { getRadioUtilityClass } from './radioClasses';
 import { RadioOwnerState, RadioTypeMap } from './RadioProps';
 import RadioGroupContext from '../RadioGroup/RadioGroupContext';
@@ -223,8 +223,6 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
   const {
     checked: checkedProp,
     checkedIcon,
-    component,
-    componentsProps = {},
     defaultChecked,
     disabled: disabledProp,
     disableIcon: disableIconProp = false,
@@ -304,44 +302,36 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
     elementType: RadioRoot,
     externalForwardedProps: other,
-    externalSlotProps: componentsProps.root,
-    additionalProps: {
-      as: component,
-      ref,
-    },
-    className: classes.root,
     ownerState,
   });
 
-  const radioProps = useSlotProps({
-    elementType: RadioRadio,
-    externalSlotProps: componentsProps.radio,
+  const [SlotRadio, radioProps] = useSlot('radio', {
     className: classes.radio,
+    elementType: RadioRadio,
+    externalForwardedProps: other,
     ownerState,
   });
 
-  const radioIconProps = useSlotProps({
-    elementType: RadioIcon,
-    externalSlotProps: componentsProps.icon,
+  const [SlotIcon, iconProps] = useSlot('icon', {
     className: classes.icon,
+    elementType: RadioIcon,
+    externalForwardedProps: other,
     ownerState,
   });
 
-  const radioActionProps = useSlotProps({
-    elementType: RadioAction,
-    externalSlotProps: componentsProps.action,
+  const [SlotAction, actionProps] = useSlot('action', {
     className: classes.action,
+    elementType: RadioAction,
+    externalForwardedProps: other,
     ownerState,
   });
 
-  const radioInputProps = useSlotProps({
-    elementType: RadioInput,
-    getSlotProps: () => getInputProps({ onChange: radioGroup?.onChange }),
-    externalSlotProps: componentsProps.input,
-    className: classes.input,
+  const [SlotInput, inputProps] = useSlot('input', {
     additionalProps: {
       type: 'radio',
       id,
@@ -351,36 +341,40 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
       value: String(value),
       'aria-describedby': formControl?.['aria-describedby'],
     },
+    className: classes.input,
+    elementType: RadioInput,
+    externalForwardedProps: other,
+    getSlotProps: () => getInputProps({ onChange: radioGroup?.onChange }),
     ownerState,
   });
 
-  const radioLabelProps = useSlotProps({
-    elementType: RadioLabel,
-    externalSlotProps: componentsProps.label,
-    className: classes.label,
-    ownerState,
+  const [SlotLabel, labelProps] = useSlot('label', {
     additionalProps: {
       htmlFor: id,
     },
+    className: classes.label,
+    elementType: RadioLabel,
+    externalForwardedProps: other,
+    ownerState,
   });
 
   return (
-    <RadioRoot {...rootProps}>
-      <RadioRadio {...radioProps}>
+    <SlotRoot {...rootProps}>
+      <SlotRadio {...radioProps}>
         {checked && !disableIcon && checkedIcon}
         {!checked && !disableIcon && uncheckedIcon}
-        {!checkedIcon && !uncheckedIcon && !disableIcon && <RadioIcon {...radioIconProps} />}
-        <RadioAction {...radioActionProps}>
-          <RadioInput {...radioInputProps} />
-        </RadioAction>
-      </RadioRadio>
+        {!checkedIcon && !uncheckedIcon && !disableIcon && <SlotIcon {...iconProps} />}
+        <SlotAction {...actionProps}>
+          <SlotInput {...inputProps} />
+        </SlotAction>
+      </SlotRadio>
       {label && (
-        <RadioLabel {...radioLabelProps}>
+        <SlotLabel {...labelProps}>
           {/* Automatically adjust the Typography to render `span` */}
           <TypographyContext.Provider value>{label}</TypographyContext.Provider>
-        </RadioLabel>
+        </SlotLabel>
       )}
-    </RadioRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<RadioTypeMap>;
 
@@ -413,23 +407,6 @@ Radio.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    radio: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * The default checked state. Use when the component is not controlled.
    */
diff --git a/packages/mui-joy/src/Radio/RadioProps.ts b/packages/mui-joy/src/Radio/RadioProps.ts
index 23a6ff1cb870fa..79071df41384dc 100644
--- a/packages/mui-joy/src/Radio/RadioProps.ts
+++ b/packages/mui-joy/src/Radio/RadioProps.ts
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import { UseSwitchParameters } from '@mui/base/SwitchUnstyled';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { OverridableStringUnion, OverrideProps } from '@mui/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type RadioSlot = 'root' | 'radio' | 'icon' | 'action' | 'input' | 'label';
 
@@ -12,17 +12,21 @@ export interface RadioPropsColorOverrides {}
 
 export interface RadioPropsSizeOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'span', { sx?: SxProps }, RadioOwnerState>;
-  radio?: SlotComponentProps<'span', { sx?: SxProps }, RadioOwnerState>;
-  icon?: SlotComponentProps<'span', { sx?: SxProps }, RadioOwnerState>;
-  action?: SlotComponentProps<'span', { sx?: SxProps }, RadioOwnerState>;
-  input?: SlotComponentProps<'input', { sx?: SxProps }, RadioOwnerState>;
-  label?: SlotComponentProps<'label', { sx?: SxProps }, RadioOwnerState>;
-}
+export type RadioSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  RadioSlot,
+  {
+    root: SlotProps<'span', {}, RadioOwnerState>;
+    radio: SlotProps<'span', {}, RadioOwnerState>;
+    icon: SlotProps<'span', {}, RadioOwnerState>;
+    action: SlotProps<'span', {}, RadioOwnerState>;
+    input: SlotProps<'input', {}, RadioOwnerState>;
+    label: SlotProps<'label', {}, RadioOwnerState>;
+  }
+>;
 
 export interface RadioTypeMap<P = {}, D extends React.ElementType = 'span'> {
   props: P &
+    RadioSlotsAndSlotProps &
     UseSwitchParameters & {
       /**
        * The icon to display when the component is checked.
@@ -32,16 +36,6 @@ export interface RadioTypeMap<P = {}, D extends React.ElementType = 'span'> {
        * Class name applied to the root element.
        */
       className?: string;
-      /**
-       * The component used for the Root slot.
-       * Either a string to use a HTML element or a component.
-       */
-      component?: React.ElementType;
-      /**
-       * The props used for each slot inside the component.
-       * @default {}
-       */
-      componentsProps?: ComponentsProps;
       /**
        * The color of the component. It supports those theme colors that make sense for this component.
        * @default 'neutral'
diff --git a/packages/mui-joy/src/Select/Select.spec.tsx b/packages/mui-joy/src/Select/Select.spec.tsx
index c027524b988fb2..a5f4084c690a5e 100644
--- a/packages/mui-joy/src/Select/Select.spec.tsx
+++ b/packages/mui-joy/src/Select/Select.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expectType } from '@mui/types';
-import Select from '@mui/joy/Select';
+import Select, { SelectOwnerState } from '@mui/joy/Select';
 
 <Select defaultListboxOpen />;
 <Select
@@ -39,7 +39,7 @@ interface Value {
 />;
 <Select sx={{ bgcolor: (theme) => theme.vars.palette.background.body }} />;
 <Select
-  componentsProps={{
+  slotProps={{
     button: {
       'aria-labelledby': 'some-id',
       'aria-describedby': 'some-id',
@@ -61,3 +61,84 @@ interface Value {
 <Select invalidProp={0} />;
 
 <Select component="a" href="#" />;
+
+<Select
+  slots={{
+    root: 'div',
+    button: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+    indicator: 'div',
+    listbox: 'div',
+  }}
+/>;
+
+<Select
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    button: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    indicator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    listbox: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Select
+  slotProps={{
+    root: (ownerState) => {
+      expectType<SelectOwnerState<any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    button: (ownerState) => {
+      expectType<SelectOwnerState<any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<SelectOwnerState<any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<SelectOwnerState<any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    indicator: (ownerState) => {
+      expectType<SelectOwnerState<any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    listbox: (ownerState) => {
+      expectType<SelectOwnerState<any>, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Select/Select.test.tsx b/packages/mui-joy/src/Select/Select.test.tsx
index 58c61a1e5e0510..1a262a6a4cd660 100644
--- a/packages/mui-joy/src/Select/Select.test.tsx
+++ b/packages/mui-joy/src/Select/Select.test.tsx
@@ -12,14 +12,21 @@ import ListDivider from '@mui/joy/ListDivider';
 describe('Joy <Select />', () => {
   const { render } = createRenderer({ clock: 'fake' });
 
-  describeConformance(<Select value="" />, () => ({
+  describeConformance(<Select startDecorator="1" endDecorator="1" />, () => ({
     render,
+    inheritComponent: 'div',
     classes,
     ThemeProvider,
     refInstanceof: window.HTMLDivElement,
     muiName: 'JoySelect',
     testDeepOverrides: { slotName: 'button', slotClassName: classes.button },
     testVariantProps: { variant: 'soft' },
+    slots: {
+      root: { expectedClassName: classes.root },
+      button: { expectedClassName: classes.button },
+      startDecorator: { expectedClassName: classes.startDecorator },
+      endDecorator: { expectedClassName: classes.endDecorator },
+    },
     skip: ['classesRoot', 'propsSpread', 'componentProp', 'componentsProp'],
   }));
 
@@ -62,7 +69,7 @@ describe('Joy <Select />', () => {
     const { getByRole } = render(
       <Select
         name="blur-testing"
-        componentsProps={{
+        slotProps={{
           button: {
             onBlur: handleBlur,
           },
@@ -337,11 +344,7 @@ describe('Joy <Select />', () => {
     describe('Grouped options', () => {
       it('first selectable option is focused to use the arrow', () => {
         const { getByRole, getAllByRole } = render(
-          <Select
-            defaultValue=""
-            defaultListboxOpen
-            componentsProps={{ listbox: { component: 'div' } }}
-          >
+          <Select defaultValue="" defaultListboxOpen slotProps={{ listbox: { component: 'div' } }}>
             <List role="group">
               <ListItem role="presentation">Category 1</ListItem>
               <Option value={1}>Option 1</Option>
diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
index e51f9f4006ff5c..210bbfa4ef1b73 100644
--- a/packages/mui-joy/src/Select/Select.tsx
+++ b/packages/mui-joy/src/Select/Select.tsx
@@ -14,12 +14,12 @@ import {
   getOptionsFromChildren,
 } from '@mui/base/SelectUnstyled';
 import type { SelectChild, SelectOption } from '@mui/base/SelectUnstyled';
-import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/base/composeClasses';
 import { StyledList } from '../List/List';
 import ListProvider, { scopedVariables } from '../List/ListProvider';
 import Unfold from '../internal/svg-icons/Unfold';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import { SelectOwnProps, SelectStaticProps, SelectOwnerState, SelectTypeMap } from './SelectProps';
 import selectClasses, { getSelectUtilityClass } from './selectClasses';
 import { ListOwnerState } from '../List';
@@ -292,7 +292,7 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
     action,
     autoFocus,
     children,
-    componentsProps = {},
+    slotProps = {},
     defaultValue,
     defaultListboxOpen = false,
     disabled: disabledExternalProp,
@@ -311,7 +311,7 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
     startDecorator,
     endDecorator,
     indicator = <Unfold />,
-    // props to forward to the button (all handlers should go through componentsProps.button)
+    // props to forward to the button (all handlers should go through slotProps.button)
     'aria-describedby': ariaDescribedby,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
@@ -437,8 +437,13 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
     return options.find((o) => value === o.value) ?? null;
   }, [options, value]);
 
-  const rootProps = useSlotProps({
+  const externalForwardedProps = { ...other, slotProps };
+
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref: handleRef,
+    className: classes.root,
     elementType: SelectRoot,
+    externalForwardedProps,
     getSlotProps: (handlers) => ({
       onMouseDown: (event: React.MouseEvent<HTMLDivElement>) => {
         if (
@@ -453,19 +458,10 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
         handlers.onMouseDown?.(event);
       },
     }),
-    externalSlotProps: componentsProps.root,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref: handleRef,
-    },
     ownerState,
-    className: classes.root,
   });
 
-  const buttonProps = useSlotProps({
-    elementType: SelectButton,
-    getSlotProps: getButtonProps,
-    externalSlotProps: componentsProps.button,
+  const [SlotButton, buttonProps] = useSlot('button', {
     additionalProps: {
       'aria-describedby': ariaDescribedby ?? formControl?.['aria-describedby'],
       'aria-label': ariaLabel,
@@ -473,14 +469,15 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
       id: id ?? formControl?.htmlFor,
       name,
     },
-    ownerState,
     className: classes.button,
+    elementType: SelectButton,
+    externalForwardedProps,
+    getSlotProps: getButtonProps,
+    ownerState,
   });
 
   const resolveListboxProps =
-    typeof componentsProps.listbox === 'function'
-      ? componentsProps.listbox(ownerState)
-      : componentsProps.listbox;
+    typeof slotProps.listbox === 'function' ? slotProps.listbox(ownerState) : slotProps.listbox;
   // cache the modifiers to prevent Popper from being recreated when React rerenders menu.
   const cachedModifiers = React.useMemo<PopperUnstyledProps['modifiers']>(
     () => [
@@ -505,10 +502,7 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
     [resolveListboxProps?.modifiers],
   );
 
-  const { component: listboxComponent, ...listboxProps } = useSlotProps({
-    elementType: SelectListbox,
-    getSlotProps: getListboxProps,
-    externalSlotProps: componentsProps.listbox,
+  const [SlotListbox, listboxProps] = useSlot('listbox', {
     additionalProps: {
       ref: listboxRef,
       anchorEl,
@@ -517,34 +511,40 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
       placement: 'bottom' as const,
       modifiers: cachedModifiers,
     },
+    className: classes.listbox,
+    elementType: PopperUnstyled,
+    externalForwardedProps,
+    getSlotProps: getListboxProps,
     ownerState: {
       ...ownerState,
       nesting: false,
       row: false,
       wrap: false,
     } as SelectOwnerState<any> & ListOwnerState,
-    className: classes.listbox,
+    internalForwardedProps: {
+      component: SelectListbox,
+    },
   });
 
-  const startDecoratorProps = useSlotProps({
+  const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
+    className: classes.startDecorator,
     elementType: SelectStartDecorator,
-    externalSlotProps: componentsProps.startDecorator,
+    externalForwardedProps,
     ownerState,
-    className: classes.startDecorator,
   });
 
-  const endDecoratorProps = useSlotProps({
+  const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
+    className: classes.endDecorator,
     elementType: SelectEndDecorator,
-    externalSlotProps: componentsProps.endDecorator,
+    externalForwardedProps,
     ownerState,
-    className: classes.endDecorator,
   });
 
-  const indicatorProps = useSlotProps({
+  const [SlotIndicator, indicatorProps] = useSlot('indicator', {
+    className: classes.indicator,
     elementType: SelectIndicator,
-    externalSlotProps: componentsProps.indicator,
+    externalForwardedProps,
     ownerState,
-    className: classes.indicator,
   });
 
   const context = React.useMemo(
@@ -559,28 +559,26 @@ const Select = React.forwardRef(function Select<TValue extends {}>(
 
   return (
     <React.Fragment>
-      <SelectRoot {...rootProps}>
+      <SlotRoot {...rootProps}>
         {startDecorator && (
-          <SelectStartDecorator {...startDecoratorProps}>{startDecorator}</SelectStartDecorator>
+          <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
         )}
 
-        <SelectButton {...buttonProps}>
+        <SlotButton {...buttonProps}>
           {selectedOption ? renderValue(selectedOption) : placeholder}
-        </SelectButton>
-        {endDecorator && (
-          <SelectEndDecorator {...endDecoratorProps}>{endDecorator}</SelectEndDecorator>
-        )}
+        </SlotButton>
+        {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
 
-        {indicator && <SelectIndicator {...indicatorProps}>{indicator}</SelectIndicator>}
-      </SelectRoot>
+        {indicator && <SlotIndicator {...indicatorProps}>{indicator}</SlotIndicator>}
+      </SlotRoot>
       {anchorEl && (
         // @ts-ignore internal logic: `listboxComponent` should not replace `SelectListbox`.
-        <PopperUnstyled {...listboxProps} as={listboxComponent} component={SelectListbox}>
+        <SlotListbox {...listboxProps}>
           <SelectUnstyledContext.Provider value={context}>
             {/* for building grouped options */}
             <ListProvider nested>{children}</ListProvider>
           </SelectUnstyledContext.Provider>
-        </PopperUnstyled>
+        </SlotListbox>
       )}
 
       {name && <input type="hidden" name={name} value={getSerializedValue(selectedOption)} />}
@@ -635,18 +633,6 @@ Select.propTypes /* remove-proptypes */ = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    button: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    indicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * The default selected value. Use when the component is not controlled.
    */
diff --git a/packages/mui-joy/src/Select/SelectProps.ts b/packages/mui-joy/src/Select/SelectProps.ts
index 37b66df1c4005d..acb1f1f6138556 100644
--- a/packages/mui-joy/src/Select/SelectProps.ts
+++ b/packages/mui-joy/src/Select/SelectProps.ts
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SelectUnstyledCommonProps, SelectOption } from '@mui/base/SelectUnstyled';
 import { PopperUnstyledOwnProps } from '@mui/base/PopperUnstyled';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { SelectOption, SelectUnstyledCommonProps } from '@mui/base/SelectUnstyled';
+import { OverridableStringUnion, OverrideProps } from '@mui/types';
+import * as React from 'react';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type { SelectOption } from '@mui/base/SelectUnstyled';
 
@@ -16,26 +16,27 @@ export type SelectSlot =
   | 'listbox';
 
 export interface SelectPropsVariantOverrides {}
-
 export interface SelectPropsColorOverrides {}
-
 export interface SelectPropsSizeOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'div', { sx?: SxProps }, SelectOwnerState<any>>;
-  button?: SlotComponentProps<'button', { sx?: SxProps }, SelectOwnerState<any>>;
-  startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, SelectOwnerState<any>>;
-  endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, SelectOwnerState<any>>;
-  indicator?: SlotComponentProps<'span', { sx?: SxProps }, SelectOwnerState<any>>;
-  listbox?: SlotComponentProps<
-    'ul',
-    Omit<PopperUnstyledOwnProps, 'components' | 'componentsProps' | 'open'> & {
-      component?: React.ElementType;
-      sx?: SxProps;
-    },
-    SelectOwnerState<any>
-  >;
-}
+export type SelectSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  SelectSlot,
+  {
+    root: SlotProps<'div', {}, SelectOwnerState<any>>;
+    button: SlotProps<'button', {}, SelectOwnerState<any>>;
+    startDecorator: SlotProps<'span', {}, SelectOwnerState<any>>;
+    endDecorator: SlotProps<'span', {}, SelectOwnerState<any>>;
+    indicator: SlotProps<'span', {}, SelectOwnerState<any>>;
+    listbox: SlotProps<
+      'ul',
+      Omit<PopperUnstyledOwnProps, 'components' | 'componentsProps' | 'open'> & {
+        component?: React.ElementType;
+        sx?: SxProps;
+      },
+      SelectOwnerState<any>
+    >;
+  }
+>;
 
 export interface SelectStaticProps extends SelectUnstyledCommonProps {
   /**
@@ -49,11 +50,6 @@ export interface SelectStaticProps extends SelectUnstyledCommonProps {
    * @default 'primary'
    */
   color?: OverridableStringUnion<ColorPaletteProp, SelectPropsColorOverrides>;
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps?: ComponentsProps;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -97,37 +93,38 @@ export interface SelectStaticProps extends SelectUnstyledCommonProps {
   variant?: OverridableStringUnion<VariantProp, SelectPropsVariantOverrides>;
 }
 
-export interface SelectOwnProps<TValue extends {}> extends SelectStaticProps {
-  /**
-   * The default selected value. Use when the component is not controlled.
-   */
-  defaultValue?: TValue | null;
+export type SelectOwnProps<TValue extends {}> = SelectStaticProps &
+  SelectSlotsAndSlotProps & {
+    /**
+     * The default selected value. Use when the component is not controlled.
+     */
+    defaultValue?: TValue | null;
 
-  /**
-   * A function to convert the currently selected value to a string.
-   * Used to set a value of a hidden input associated with the select,
-   * so that the selected value can be posted with a form.
-   */
-  getSerializedValue?: (
-    option: SelectOption<TValue> | null,
-  ) => React.InputHTMLAttributes<HTMLInputElement>['value'];
-  /**
-   * Callback fired when an option is selected.
-   */
-  onChange?: (
-    e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
-    value: TValue | null,
-  ) => void;
-  /**
-   * Function that customizes the rendering of the selected value.
-   */
-  renderValue?: (option: SelectOption<TValue> | null) => React.ReactNode;
-  /**
-   * The selected value.
-   * Set to `null` to deselect all options.
-   */
-  value?: TValue | null;
-}
+    /**
+     * A function to convert the currently selected value to a string.
+     * Used to set a value of a hidden input associated with the select,
+     * so that the selected value can be posted with a form.
+     */
+    getSerializedValue?: (
+      option: SelectOption<TValue> | null,
+    ) => React.InputHTMLAttributes<HTMLInputElement>['value'];
+    /**
+     * Callback fired when an option is selected.
+     */
+    onChange?: (
+      e: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null,
+      value: TValue | null,
+    ) => void;
+    /**
+     * Function that customizes the rendering of the selected value.
+     */
+    renderValue?: (option: SelectOption<TValue> | null) => React.ReactNode;
+    /**
+     * The selected value.
+     * Set to `null` to deselect all options.
+     */
+    value?: TValue | null;
+  };
 
 export interface SelectOwnerState<TValue extends {}> extends SelectOwnProps<TValue> {
   /**
diff --git a/packages/mui-joy/src/Slider/Slider.spec.tsx b/packages/mui-joy/src/Slider/Slider.spec.tsx
index 31cb267baa8f7a..7c59bba6fa8834 100644
--- a/packages/mui-joy/src/Slider/Slider.spec.tsx
+++ b/packages/mui-joy/src/Slider/Slider.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Slider from '@mui/joy/Slider';
+import { expectType } from '@mui/types';
+import Slider, { SliderOwnerState } from '@mui/joy/Slider';
 
 <Slider />;
 
@@ -31,3 +32,106 @@ import Slider from '@mui/joy/Slider';
     '--joy-Slider-thumb-size': '16px',
   }}
 />;
+
+<Slider
+  slots={{
+    root: 'div',
+    mark: 'div',
+    markLabel: 'div',
+    rail: 'div',
+    track: 'div',
+    thumb: 'div',
+    valueLabel: 'div',
+    input: 'div',
+  }}
+/>;
+
+<Slider
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    mark: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    markLabel: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    rail: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    track: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    thumb: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    valueLabel: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    input: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Slider
+  slotProps={{
+    root: (ownerState) => {
+      expectType<SliderOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    mark: (ownerState) => {
+      expectType<SliderOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    markLabel: (ownerState) => {
+      expectType<SliderOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    rail: (ownerState) => {
+      expectType<SliderOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    track: (ownerState) => {
+      expectType<SliderOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    thumb: (ownerState) => {
+      expectType<SliderOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    valueLabel: (ownerState) => {
+      expectType<SliderOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    input: (ownerState) => {
+      expectType<SliderOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Slider/Slider.test.js b/packages/mui-joy/src/Slider/Slider.test.js
index 0fad87dc5125d8..aef1b287b00913 100644
--- a/packages/mui-joy/src/Slider/Slider.test.js
+++ b/packages/mui-joy/src/Slider/Slider.test.js
@@ -7,15 +7,34 @@ import { ThemeProvider } from '@mui/joy/styles';
 describe('<Slider />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Slider />, () => ({
-    classes,
-    render,
-    ThemeProvider,
-    muiName: 'JoySlider',
-    refInstanceof: window.HTMLSpanElement,
-    testVariantProps: { color: 'success' },
-    skip: ['componentProp', 'componentsProp', 'classesRoot', 'propsSpread', 'themeDefaultProps'],
-  }));
+  describeConformance(
+    <Slider
+      value={10}
+      marks={[
+        {
+          value: 0,
+          label: '0°C',
+        },
+      ]}
+    />,
+    () => ({
+      classes,
+      render,
+      ThemeProvider,
+      muiName: 'JoySlider',
+      refInstanceof: window.HTMLSpanElement,
+      testVariantProps: { color: 'success' },
+      slots: {
+        root: { expectedClassName: classes.root },
+        rail: { expectedClassName: classes.rail },
+        track: { expectedClassName: classes.track },
+        thumb: { expectedClassName: classes.thumb },
+        input: { expectedClassName: classes.input },
+        mark: { expectedClassName: classes.mark },
+      },
+      skip: ['componentProp', 'componentsProp', 'classesRoot', 'propsSpread', 'themeDefaultProps'],
+    }),
+  );
 
   it('should render the rail as the first child of the Slider', () => {
     const {
diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
index 8f2186461284c6..5963e99409ed1a 100644
--- a/packages/mui-joy/src/Slider/Slider.tsx
+++ b/packages/mui-joy/src/Slider/Slider.tsx
@@ -7,8 +7,9 @@ import {
 } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
 import { useSlider } from '@mui/base/SliderUnstyled';
-import { useSlotProps } from '@mui/base/utils';
+import { isHostComponent } from '@mui/base/utils';
 import { useThemeProps, styled, Theme } from '../styles';
+import useSlot from '../utils/useSlot';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { SliderProps, SliderTypeMap, SliderOwnerState } from './SliderProps';
 
@@ -34,13 +35,14 @@ const useUtilityClasses = (ownerState: SliderOwnerState) => {
     ],
     rail: ['rail'],
     track: ['track'],
+    thumb: ['thumb', disabled && 'disabled'],
+    input: ['input'],
     mark: ['mark'],
     markActive: ['markActive'],
     markLabel: ['markLabel'],
     markLabelActive: ['markLabelActive'],
     valueLabel: ['valueLabel'],
     valueLabelOpen: ['valueLabelOpen'],
-    thumb: ['thumb', disabled && 'disabled'],
     active: ['active'],
     focusVisible: ['focusVisible'],
   };
@@ -399,8 +401,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
   const {
     'aria-label': ariaLabel,
     'aria-valuetext': ariaValuetext,
-    component,
-    componentsProps = {},
+    className,
     classes: classesProp,
     disableSwap = false,
     disabled = false,
@@ -476,75 +477,76 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
     elementType: SliderRoot,
-    getSlotProps: getRootProps,
-    externalSlotProps: componentsProps.root,
     externalForwardedProps: other,
-    additionalProps: {
-      as: component,
-    },
+    getSlotProps: getRootProps,
     ownerState,
-    className: classes.root,
   });
 
-  const railProps = useSlotProps({
+  const [SlotRail, railProps] = useSlot('rail', {
+    className: classes.rail,
     elementType: SliderRail,
-    externalSlotProps: componentsProps.rail,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.rail,
   });
 
-  const trackProps = useSlotProps({
-    elementType: SliderTrack,
-    externalSlotProps: componentsProps.track,
+  const [SlotTrack, trackProps] = useSlot('track', {
     additionalProps: {
       style: trackStyle,
     },
-    ownerState,
     className: classes.track,
+    elementType: SliderTrack,
+    externalForwardedProps: other,
+    ownerState,
   });
 
-  const markProps = useSlotProps({
+  const [SlotMark, markProps] = useSlot('mark', {
+    className: classes.mark,
     elementType: SliderMark,
-    externalSlotProps: componentsProps.mark,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.mark,
   });
 
-  const markLabelProps = useSlotProps({
+  const [SlotMarkLabel, markLabelProps] = useSlot('markLabel', {
+    className: classes.markLabel,
     elementType: SliderMarkLabel,
-    externalSlotProps: componentsProps.markLabel,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.markLabel,
+    additionalProps: {
+      'aria-hidden': true,
+    },
   });
 
-  const thumbProps = useSlotProps({
+  const [SlotThumb, thumbProps] = useSlot('thumb', {
+    className: classes.thumb,
     elementType: SliderThumb,
+    externalForwardedProps: other,
     getSlotProps: getThumbProps,
-    externalSlotProps: componentsProps.thumb,
     ownerState,
-    className: classes.thumb,
   });
 
-  const inputProps = useSlotProps({
+  const [SlotInput, inputProps] = useSlot('input', {
+    className: classes.input,
     elementType: SliderInput,
+    externalForwardedProps: other,
     getSlotProps: getHiddenInputProps,
-    externalSlotProps: componentsProps.input,
     ownerState,
   });
 
-  const valueLabelProps = useSlotProps({
+  const [SlotValueLabel, valueLabelProps] = useSlot('valueLabel', {
+    className: classes.valueLabel,
     elementType: SliderValueLabel,
-    externalSlotProps: componentsProps.valueLabel,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.valueLabel,
   });
 
   return (
-    <SliderRoot {...rootProps}>
-      <SliderRail {...railProps} />
-      <SliderTrack {...trackProps} />
+    <SlotRoot {...rootProps}>
+      <SlotRail {...railProps} />
+      <SlotTrack {...trackProps} />
       {marks
         .filter((mark) => mark.value >= min && mark.value <= max)
         .map((mark, index) => {
@@ -568,28 +570,28 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
 
           return (
             <React.Fragment key={mark.value}>
-              <SliderMark
+              <SlotMark
                 data-index={index}
                 {...markProps}
+                {...(!isHostComponent(SlotMark) && {
+                  ownerState: { ...markProps.ownerState, percent },
+                })}
                 style={{ ...style, ...markProps.style }}
-                ownerState={{ ...ownerState, percent }}
                 className={clsx(markProps.className, {
                   [classes.markActive]: markActive,
                 })}
               />
               {mark.label != null ? (
-                <SliderMarkLabel
-                  aria-hidden
+                <SlotMarkLabel
                   data-index={index}
                   {...markLabelProps}
-                  ownerState={ownerState}
                   style={{ ...style, ...markLabelProps.style }}
                   className={clsx(classes.markLabel, markLabelProps.className, {
                     [classes.markLabelActive]: markActive,
                   })}
                 >
                   {mark.label}
-                </SliderMarkLabel>
+                </SlotMarkLabel>
               ) : null}
             </React.Fragment>
           );
@@ -598,7 +600,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
         const percent = valueToPercent(value, min, max);
         const style = axisProps[axis].offset(percent);
         return (
-          <SliderThumb
+          <SlotThumb
             key={index}
             data-index={index}
             {...thumbProps}
@@ -612,7 +614,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
               ...thumbProps.style,
             }}
           >
-            <SliderInput
+            <SlotInput
               data-index={index}
               aria-label={getAriaLabel ? getAriaLabel(index) : ariaLabel}
               aria-valuenow={scale(value)}
@@ -623,7 +625,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
               {...inputProps}
             />
             {valueLabelDisplay !== 'off' ? (
-              <SliderValueLabel
+              <SlotValueLabel
                 {...valueLabelProps}
                 className={clsx(valueLabelProps.className, {
                   [classes.valueLabelOpen]:
@@ -633,12 +635,12 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
                 {typeof valueLabelFormat === 'function'
                   ? valueLabelFormat(scale(value), index)
                   : valueLabelFormat}
-              </SliderValueLabel>
+              </SlotValueLabel>
             ) : null}
-          </SliderThumb>
+          </SlotThumb>
         );
       })}
-    </SliderRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<SliderTypeMap>;
 
@@ -663,6 +665,10 @@ Slider.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'primary'
@@ -671,25 +677,6 @@ Slider.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the Slider.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * The default value. Use when the component is not controlled.
    */
diff --git a/packages/mui-joy/src/Slider/SliderProps.ts b/packages/mui-joy/src/Slider/SliderProps.ts
index 0a2de173acdb49..93c782f0576381 100644
--- a/packages/mui-joy/src/Slider/SliderProps.ts
+++ b/packages/mui-joy/src/Slider/SliderProps.ts
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/base';
-import { ExtendSliderUnstyledTypeMap } from '@mui/base/SliderUnstyled';
+import { SliderUnstyledOwnProps } from '@mui/base/SliderUnstyled';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type SliderSlot =
   | 'root'
@@ -14,56 +14,51 @@ export type SliderSlot =
   | 'valueLabel'
   | 'input';
 
-export interface SliderPropsVariantOverrides {}
+export type SliderSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  SliderSlot,
+  {
+    root: SlotProps<'span', {}, SliderOwnerState>;
+    track: SlotProps<'span', {}, SliderOwnerState>;
+    rail: SlotProps<'span', {}, SliderOwnerState>;
+    thumb: SlotProps<'span', {}, SliderOwnerState>;
+    mark: SlotProps<'span', {}, SliderOwnerState>;
+    markLabel: SlotProps<'span', {}, SliderOwnerState>;
+    valueLabel: SlotProps<'span', {}, SliderOwnerState>;
+    input: SlotProps<'input', {}, SliderOwnerState>;
+  }
+>;
 
+export interface SliderPropsVariantOverrides {}
 export interface SliderPropsColorOverrides {}
-
 export interface SliderPropsSizeOverrides {}
 
-export interface SliderOwnProps {
-  /**
-   * The props used for each slot inside the Slider.
-   * @default {}
-   */
-  componentsProps?: {
-    root?: SlotComponentProps<'span', { sx?: SxProps }, SliderOwnerState>;
-    track?: SlotComponentProps<'span', { sx?: SxProps }, SliderOwnerState>;
-    rail?: SlotComponentProps<'span', { sx?: SxProps }, SliderOwnerState>;
-    thumb?: SlotComponentProps<'span', { sx?: SxProps }, SliderOwnerState>;
-    mark?: SlotComponentProps<'span', { sx?: SxProps }, SliderOwnerState>;
-    markLabel?: SlotComponentProps<'span', { sx?: SxProps }, SliderOwnerState>;
-    valueLabel?: SlotComponentProps<'span', { sx?: SxProps }, SliderOwnerState>;
-    input?: SlotComponentProps<'input', { sx?: SxProps }, SliderOwnerState>;
-  };
-  /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   * @default 'primary'
-   */
-  color?: OverridableStringUnion<ColorPaletteProp, SliderPropsColorOverrides>;
-  /**
-   * The size of the component.
-   * It accepts theme values between 'sm' and 'lg'.
-   * @default 'md'
-   */
-  size?: OverridableStringUnion<'sm' | 'md' | 'lg', SliderPropsSizeOverrides>;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps;
-  /**
-   * The variant to use.
-   * @default 'solid'
-   */
-  variant?: OverridableStringUnion<VariantProp, SliderPropsVariantOverrides>;
-}
-
-export type SliderTypeMap<
-  D extends React.ElementType = 'span',
-  P = {},
-> = ExtendSliderUnstyledTypeMap<{
-  props: P & SliderOwnProps;
+export type SliderTypeMap<D extends React.ElementType = 'span', P = {}> = {
+  props: P &
+    Omit<SliderUnstyledOwnProps, 'slots' | 'slotProps'> &
+    SliderSlotsAndSlotProps & {
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'primary'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, SliderPropsColorOverrides>;
+      /**
+       * The size of the component.
+       * It accepts theme values between 'sm' and 'lg'.
+       * @default 'md'
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', SliderPropsSizeOverrides>;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+      /**
+       * The variant to use.
+       * @default 'solid'
+       */
+      variant?: OverridableStringUnion<VariantProp, SliderPropsVariantOverrides>;
+    };
   defaultComponent: D;
-}>;
+};
 
 export type SliderProps<
   D extends React.ElementType = SliderTypeMap['defaultComponent'],
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.test.js b/packages/mui-joy/src/SvgIcon/SvgIcon.test.js
index 2b531674551f82..18b54f022794a8 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIcon.test.js
+++ b/packages/mui-joy/src/SvgIcon/SvgIcon.test.js
@@ -36,6 +36,13 @@ describe('<SvgIcon />', () => {
           {props.children}
         </svg>
       ),
+      slots: {
+        root: {
+          expectedClassName: classes.root,
+          testWithComponent: ({ className }) => <svg className={className} data-testid="custom" />,
+          testWithElement: null,
+        },
+      },
       skip: ['themeVariants', 'classesRoot', 'componentsProp'],
     }),
   );
diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
index 91eec650885309..ec640b35a84918 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
+++ b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
@@ -6,11 +6,12 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 import { SvgIconProps, SvgIconTypeMap, SvgIconOwnerState } from './SvgIconProps';
 
 const useUtilityClasses = (ownerState: SvgIconOwnerState) => {
-  const { color, fontSize, classes } = ownerState;
+  const { color, fontSize } = ownerState;
 
   const slots = {
     root: [
@@ -20,7 +21,7 @@ const useUtilityClasses = (ownerState: SvgIconOwnerState) => {
     ],
   };
 
-  return composeClasses(slots, getSvgIconUtilityClass, classes);
+  return composeClasses(slots, getSvgIconUtilityClass, {});
 };
 
 const SvgIconRoot = styled('svg', {
@@ -86,22 +87,26 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
+    elementType: SvgIconRoot,
+    externalForwardedProps: { ...other, component },
+    ownerState,
+    additionalProps: {
+      color: htmlColor,
+      focusable: 'false',
+      ...(titleAccess && { role: 'img' }),
+      ...(!titleAccess && { 'aria-hidden': true }),
+      ...(!inheritViewBox && { viewBox }),
+    },
+  });
+
   return (
-    <SvgIconRoot
-      as={component}
-      className={clsx(classes.root, className)}
-      focusable="false"
-      color={htmlColor}
-      aria-hidden={titleAccess ? undefined : true}
-      role={titleAccess ? 'img' : undefined}
-      ref={ref}
-      {...other}
-      {...(!inheritViewBox && { viewBox })}
-      ownerState={ownerState}
-    >
+    <SlotRoot {...rootProps}>
       {children}
       {titleAccess ? <title>{titleAccess}</title> : null}
-    </SvgIconRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<SvgIconTypeMap>;
 
@@ -114,10 +119,6 @@ SvgIcon.propTypes /* remove-proptypes */ = {
    * Node passed into the SVG element.
    */
   children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
   /**
    * @ignore
    */
diff --git a/packages/mui-joy/src/SvgIcon/SvgIconProps.ts b/packages/mui-joy/src/SvgIcon/SvgIconProps.ts
index 9bf2f219376f94..cfbbd6f81d8172 100644
--- a/packages/mui-joy/src/SvgIcon/SvgIconProps.ts
+++ b/packages/mui-joy/src/SvgIcon/SvgIconProps.ts
@@ -1,12 +1,10 @@
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import * as React from 'react';
 import { ColorPaletteProp, FontSize, SxProps, ApplyColorInversion } from '../styles/types';
-import { SvgIconClasses } from './svgIconClasses';
 
 export type SvgIconSlot = 'root';
 
 export interface SvgIconPropsSizeOverrides {}
-
 export interface SvgIconPropsColorOverrides {}
 
 export interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {
@@ -15,10 +13,6 @@ export interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {
      * Node passed into the SVG element.
      */
     children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<SvgIconClasses>;
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
      * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
diff --git a/packages/mui-joy/src/Switch/Switch.spec.tsx b/packages/mui-joy/src/Switch/Switch.spec.tsx
index 863b3de0e2a2cc..8c08f3d5433ae8 100644
--- a/packages/mui-joy/src/Switch/Switch.spec.tsx
+++ b/packages/mui-joy/src/Switch/Switch.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Switch from '@mui/joy/Switch';
+import Switch, { SwitchOwnerState } from '@mui/joy/Switch';
+import { expectType } from '@mui/types';
 
 <Switch />;
 
@@ -43,3 +44,95 @@ import Switch from '@mui/joy/Switch';
     '--joy-Switch-thumb-size': '16px',
   }}
 />;
+
+<Switch
+  slots={{
+    root: 'div',
+    track: 'div',
+    thumb: 'div',
+    action: 'div',
+    input: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+  }}
+/>;
+
+<Switch
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    track: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    thumb: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    action: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    input: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Switch
+  slotProps={{
+    root: (ownerState) => {
+      expectType<SwitchOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    track: (ownerState) => {
+      expectType<SwitchOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    thumb: (ownerState) => {
+      expectType<SwitchOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    action: (ownerState) => {
+      expectType<SwitchOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    input: (ownerState) => {
+      expectType<SwitchOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<SwitchOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<SwitchOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Switch/Switch.test.js b/packages/mui-joy/src/Switch/Switch.test.js
index 03871f77c08cc3..43f17439620928 100644
--- a/packages/mui-joy/src/Switch/Switch.test.js
+++ b/packages/mui-joy/src/Switch/Switch.test.js
@@ -7,7 +7,7 @@ import { ThemeProvider } from '@mui/joy/styles';
 describe('<Switch />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Switch />, () => ({
+  describeConformance(<Switch startDecorator="1" endDecorator="2" />, () => ({
     classes,
     render,
     ThemeProvider,
@@ -21,14 +21,23 @@ describe('<Switch />', () => {
     testVariantProps: { variant: 'soft' },
     testCustomVariant: true,
     refInstanceof: window.HTMLDivElement,
+    slots: {
+      root: { expectedClassName: classes.root },
+      thumb: { expectedClassName: classes.thumb },
+      track: { expectedClassName: classes.track },
+      action: { expectedClassName: classes.action },
+      input: { expectedClassName: classes.input },
+      startDecorator: { expectedClassName: classes.startDecorator },
+      endDecorator: { expectedClassName: classes.endDecorator },
+    },
     skip: ['componentProp', 'componentsProp', 'classesRoot'],
   }));
 
-  it('should pass `componentsProps` down to slots', () => {
+  it('should pass `slotProps` down to slots', () => {
     const { container } = render(
       <Switch
         data-testid="root-switch"
-        componentsProps={{
+        slotProps={{
           thumb: { className: 'custom-thumb' },
           track: { className: 'custom-track' },
           action: { className: 'custom-action' },
diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
index 8d80fbf610d594..0b876244441051 100644
--- a/packages/mui-joy/src/Switch/Switch.tsx
+++ b/packages/mui-joy/src/Switch/Switch.tsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import composeClasses from '@mui/base/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
 import { useSwitch } from '@mui/base/SwitchUnstyled';
 import { styled, useThemeProps, Theme } from '../styles';
+import useSlot from '../utils/useSlot';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
 import { SwitchTypeMap, SwitchOwnerState } from './SwitchProps';
 import FormControlContext from '../FormControl/FormControlContext';
@@ -223,8 +223,6 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
 
   const {
     checked: checkedProp,
-    component = 'div',
-    componentsProps = {},
     defaultChecked,
     disabled: disabledExternalProp,
     onBlur,
@@ -287,93 +285,89 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
     elementType: SwitchRoot,
-    externalSlotProps: componentsProps.root,
-    ownerState,
     externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component,
-    },
-    className: classes.root,
+    ownerState,
   });
 
-  const startDecoratorProps = useSlotProps({
-    elementType: SwitchStartDecorator,
-    externalSlotProps: componentsProps.startDecorator,
-    ownerState,
+  const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
     additionalProps: {
       'aria-hidden': true, // hide the decorator from assistive technology
     },
     className: classes.startDecorator,
+    elementType: SwitchStartDecorator,
+    externalForwardedProps: other,
+    ownerState,
   });
 
-  const endDecoratorProps = useSlotProps({
-    elementType: SwitchEndDecorator,
-    externalSlotProps: componentsProps.endDecorator,
-    ownerState,
+  const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
     additionalProps: {
       'aria-hidden': true, // hide the decorator from assistive technology
     },
     className: classes.endDecorator,
+    elementType: SwitchEndDecorator,
+    externalForwardedProps: other,
+    ownerState,
   });
 
-  const trackProps = useSlotProps({
+  const [SlotTrack, trackProps] = useSlot('track', {
+    className: classes.track,
     elementType: SwitchTrack,
-    externalSlotProps: componentsProps.track,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.track,
   });
 
-  const thumbProps = useSlotProps({
+  const [SlotThumb, thumbProps] = useSlot('thumb', {
+    className: classes.thumb,
     elementType: SwitchThumb,
-    externalSlotProps: componentsProps.thumb,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.thumb,
   });
 
-  const actionProps = useSlotProps({
+  const [SlotAction, actionProps] = useSlot('action', {
+    className: classes.action,
     elementType: SwitchAction,
-    externalSlotProps: componentsProps.action,
+    externalForwardedProps: other,
     ownerState,
-    className: classes.action,
   });
 
-  const inputProps = useSlotProps({
-    elementType: SwitchInput,
-    getSlotProps: getInputProps,
-    externalSlotProps: componentsProps.input,
-    ownerState,
+  const [SlotInput, inputProps] = useSlot('input', {
     additionalProps: {
       id: id ?? formControl?.htmlFor,
       'aria-describedby': formControl?.['aria-describedby'],
     },
     className: classes.input,
+    elementType: SwitchInput,
+    externalForwardedProps: other,
+    getSlotProps: getInputProps,
+    ownerState,
   });
 
   return (
-    <SwitchRoot {...rootProps}>
+    <SlotRoot {...rootProps}>
       {startDecorator && (
-        <SwitchStartDecorator {...startDecoratorProps}>
+        <SlotStartDecorator {...startDecoratorProps}>
           {typeof startDecorator === 'function' ? startDecorator(ownerState) : startDecorator}
-        </SwitchStartDecorator>
+        </SlotStartDecorator>
       )}
 
-      <SwitchTrack {...trackProps}>
+      <SlotTrack {...trackProps}>
         {/* @ts-ignore */}
         {trackProps?.children}
-        <SwitchThumb {...thumbProps} />
-      </SwitchTrack>
-      <SwitchAction {...actionProps}>
-        <SwitchInput {...inputProps} />
-      </SwitchAction>
+        <SlotThumb {...thumbProps} />
+      </SlotTrack>
+      <SlotAction {...actionProps}>
+        <SlotInput {...inputProps} />
+      </SlotAction>
       {endDecorator && (
-        <SwitchEndDecorator {...endDecoratorProps}>
+        <SlotEndDecorator {...endDecoratorProps}>
           {typeof endDecorator === 'function' ? endDecorator(ownerState) : endDecorator}
-        </SwitchEndDecorator>
+        </SlotEndDecorator>
       )}
-    </SwitchRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<SwitchTypeMap>;
 
@@ -398,24 +392,6 @@ Switch.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * The default checked state. Use when the component is not controlled.
    */
diff --git a/packages/mui-joy/src/Switch/SwitchProps.ts b/packages/mui-joy/src/Switch/SwitchProps.ts
index a01eec6d904ddc..e202da3ba3ba3e 100644
--- a/packages/mui-joy/src/Switch/SwitchProps.ts
+++ b/packages/mui-joy/src/Switch/SwitchProps.ts
@@ -1,40 +1,44 @@
 import * as React from 'react';
-import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
 import { UseSwitchParameters } from '@mui/base/SwitchUnstyled';
-import { ColorPaletteProp, VariantProp, SxProps } from '../styles/types';
+import { OverridableStringUnion, OverrideProps } from '@mui/types';
+import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export type SwitchSlot = 'root' | 'action' | 'input' | 'track' | 'thumb';
+export type SwitchSlot =
+  | 'root'
+  | 'action'
+  | 'input'
+  | 'track'
+  | 'thumb'
+  | 'startDecorator'
+  | 'endDecorator';
 
 export interface SwitchPropsVariantOverrides {}
-
 export interface SwitchPropsColorOverrides {}
-
 export interface SwitchPropsSizeOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'div', { sx?: SxProps }, SwitchOwnerState>;
-  thumb?: SlotComponentProps<'span', { sx?: SxProps }, SwitchOwnerState>;
-  action?: SlotComponentProps<'div', { sx?: SxProps }, SwitchOwnerState>;
-  input?: SlotComponentProps<'button', { sx?: SxProps }, SwitchOwnerState>;
-  track?: SlotComponentProps<'span', { sx?: SxProps }, SwitchOwnerState>;
-  startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, SwitchOwnerState>;
-  endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, SwitchOwnerState>;
-}
+export type SwitchSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  SwitchSlot,
+  {
+    root: SlotProps<'div', {}, SwitchOwnerState>;
+    thumb: SlotProps<'span', {}, SwitchOwnerState>;
+    action: SlotProps<'div', {}, SwitchOwnerState>;
+    input: SlotProps<'button', {}, SwitchOwnerState>;
+    track: SlotProps<'span', {}, SwitchOwnerState>;
+    startDecorator: SlotProps<'span', {}, SwitchOwnerState>;
+    endDecorator: SlotProps<'span', {}, SwitchOwnerState>;
+  }
+>;
 
 export interface SwitchTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
+    SwitchSlotsAndSlotProps &
     UseSwitchParameters & {
       /**
        * The color of the component. It supports those theme colors that make sense for this component.
        * @default 'neutral'
        */
       color?: OverridableStringUnion<ColorPaletteProp, SwitchPropsColorOverrides>;
-      /**
-       * The props used for each slot inside the component.
-       * @default {}
-       */
-      componentsProps?: ComponentsProps;
       /**
        * The element that appears at the end of the switch.
        */
diff --git a/packages/mui-joy/src/Switch/switchClasses.ts b/packages/mui-joy/src/Switch/switchClasses.ts
index 3593ae58fa310c..fe503acf7b9803 100644
--- a/packages/mui-joy/src/Switch/switchClasses.ts
+++ b/packages/mui-joy/src/Switch/switchClasses.ts
@@ -41,6 +41,10 @@ export interface SwitchClasses {
   variantSoft: string;
   /** Styles applied to the root element if `variant="solid"`. */
   variantSolid: string;
+  /** Styles applied to the startDecorator element. */
+  startDecorator: string;
+  /** Styles applied to the endDecorator element. */
+  endDecorator: string;
 }
 
 export type SwitchClassKey = keyof SwitchClasses;
@@ -70,6 +74,8 @@ const switchClasses: SwitchClasses = generateUtilityClasses('JoySwitch', [
   'variantOutlined',
   'variantSoft',
   'variantSolid',
+  'startDecorator',
+  'endDecorator',
 ]);
 
 export default switchClasses;
diff --git a/packages/mui-joy/src/Tab/TabProps.ts b/packages/mui-joy/src/Tab/TabProps.ts
index 5c61bec704e315..f8baf034183b6a 100644
--- a/packages/mui-joy/src/Tab/TabProps.ts
+++ b/packages/mui-joy/src/Tab/TabProps.ts
@@ -5,7 +5,6 @@ import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
 export type TabSlot = 'root';
 
 export interface TabPropsColorOverrides {}
-
 export interface TabPropsVariantOverrides {}
 
 export interface TabTypeMap<P = {}, D extends React.ElementType = 'button'> {
diff --git a/packages/mui-joy/src/TabPanel/TabPanelProps.ts b/packages/mui-joy/src/TabPanel/TabPanelProps.ts
index 9c553c227689df..a7694f0848d91c 100644
--- a/packages/mui-joy/src/TabPanel/TabPanelProps.ts
+++ b/packages/mui-joy/src/TabPanel/TabPanelProps.ts
@@ -9,7 +9,7 @@ export interface TabPanelPropsSizeOverrides {}
 
 export interface TabPanelTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
-    Omit<TabPanelUnstyledOwnProps, 'components' | 'componentsProps'> & {
+    Omit<TabPanelUnstyledOwnProps, 'slots' | 'slotProps'> & {
       /**
        * The size of the component.
        */
diff --git a/packages/mui-joy/src/Tabs/TabsProps.ts b/packages/mui-joy/src/Tabs/TabsProps.ts
index 62ed104549b5ad..5ff21ba0a7f391 100644
--- a/packages/mui-joy/src/Tabs/TabsProps.ts
+++ b/packages/mui-joy/src/Tabs/TabsProps.ts
@@ -13,7 +13,7 @@ export interface TabsPropsSizeOverrides {}
 
 export interface TabsTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
-    Omit<TabsUnstyledOwnProps, 'components' | 'componentsProps'> & {
+    Omit<TabsUnstyledOwnProps, 'slots' | 'slotProps'> & {
       /**
        * The color of the component. It supports those theme colors that make sense for this component.
        * @default 'neutral'
diff --git a/packages/mui-joy/src/TextField/TextField.test.js b/packages/mui-joy/src/TextField/TextField.test.js
index 072fe0a62a6508..848c8ec5ec8c75 100644
--- a/packages/mui-joy/src/TextField/TextField.test.js
+++ b/packages/mui-joy/src/TextField/TextField.test.js
@@ -10,7 +10,7 @@ import { formHelperTextClasses } from '@mui/joy/FormHelperText';
 describe('Joy <TextField />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<TextField />, () => ({
+  describeConformance(<TextField helperText="1" label="1" />, () => ({
     classes,
     inheritComponent: 'div',
     render,
@@ -126,7 +126,7 @@ describe('Joy <TextField />', () => {
     const handleKeyDown = spy();
     const { getByRole } = render(
       <TextField
-        componentsProps={{
+        slotProps={{
           input: {
             onKeyUp: handleKeyUp,
             onKeyDown: handleKeyDown,
diff --git a/packages/mui-joy/src/TextField/TextField.tsx b/packages/mui-joy/src/TextField/TextField.tsx
index bdd1e795fdc758..ca57f339c8efa1 100644
--- a/packages/mui-joy/src/TextField/TextField.tsx
+++ b/packages/mui-joy/src/TextField/TextField.tsx
@@ -8,6 +8,7 @@ import FormLabel from '../FormLabel';
 import FormHelperText from '../FormHelperText';
 import JoyInput from '../Input';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import { TextFieldOwnerState, TextFieldTypeMap } from './TextFieldProps';
 import textFieldClasses, { getTextFieldUtilityClass } from './textFieldClasses';
 
@@ -65,8 +66,8 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
     children,
     className,
     component,
-    components = {},
-    componentsProps = {},
+    slots = {},
+    slotProps = {},
     label,
     helperText,
     id: idOverride,
@@ -113,24 +114,26 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const Input = components.Input || JoyInput;
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
+    elementType: TextFieldRoot,
+    externalForwardedProps: { ...other, component, slots, slotProps },
+    ownerState,
+  });
+
+  const Input = slots.input || JoyInput;
 
   return (
-    <TextFieldRoot
-      ref={ref}
-      as={component}
-      className={clsx(classes.root, className)}
-      ownerState={ownerState}
-      {...other}
-    >
+    <SlotRoot {...rootProps}>
       {label && (
         <FormLabel
           htmlFor={id}
           id={formLabelId}
           required={required}
-          {...componentsProps.label}
-          {...(components.Label && {
-            component: components.Label,
+          {...slotProps.label}
+          {...(slots.label && {
+            component: slots.label,
           })}
         >
           {label}
@@ -138,7 +141,7 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
       )}
 
       <Input
-        {...componentsProps.input}
+        {...slotProps.input}
         id={id}
         name={name}
         type={type}
@@ -164,15 +167,15 @@ const TextField = React.forwardRef(function TextField(inProps, ref) {
       {helperText && (
         <FormHelperText
           id={helperTextId}
-          {...componentsProps.helperText}
-          {...(components.HelperText && {
-            component: components.HelperText,
+          {...slotProps.helperText}
+          {...(slots.helperText && {
+            component: slots.helperText,
           })}
         >
           {helperText}
         </FormHelperText>
       )}
-    </TextFieldRoot>
+    </SlotRoot>
   );
 }) as OverridableComponent<TextFieldTypeMap>;
 
@@ -210,24 +213,6 @@ TextField.propTypes /* remove-proptypes */ = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * @ignore
-   */
-  components: PropTypes.shape({
-    HelperText: PropTypes.elementType,
-    Input: PropTypes.elementType,
-    Label: PropTypes.elementType,
-    Root: PropTypes.elementType,
-  }),
-  /**
-   * @ignore
-   */
-  componentsProps: PropTypes.shape({
-    helperText: PropTypes.object,
-    input: PropTypes.object,
-    label: PropTypes.object,
-    root: PropTypes.object,
-  }),
   /**
    * @ignore
    */
@@ -299,6 +284,24 @@ TextField.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['sm', 'md', 'lg']),
     PropTypes.string,
   ]),
+  /**
+   * @ignore
+   */
+  slotProps: PropTypes.shape({
+    helperText: PropTypes.object,
+    input: PropTypes.object,
+    label: PropTypes.object,
+    root: PropTypes.object,
+  }),
+  /**
+   * @ignore
+   */
+  slots: PropTypes.shape({
+    helperText: PropTypes.elementType,
+    input: PropTypes.elementType,
+    label: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
   /**
    * Leading adornment for this input.
    */
diff --git a/packages/mui-joy/src/TextField/TextFieldProps.ts b/packages/mui-joy/src/TextField/TextFieldProps.ts
index 3f7c5dccc0e551..bded6834bac229 100644
--- a/packages/mui-joy/src/TextField/TextFieldProps.ts
+++ b/packages/mui-joy/src/TextField/TextFieldProps.ts
@@ -30,13 +30,13 @@ type InputRootKeys =
 export interface TextFieldTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
     Pick<InputProps, InputRootKeys> & {
-      components?: {
-        Root?: React.ElementType;
-        Label?: React.ElementType;
-        Input?: React.ElementType;
-        HelperText?: React.ElementType;
+      slots?: {
+        root?: React.ElementType;
+        label?: React.ElementType;
+        input?: React.ElementType;
+        helperText?: React.ElementType;
       };
-      componentsProps?: {
+      slotProps?: {
         root?: React.ComponentPropsWithRef<'div'>;
         label?: FormLabelProps;
         input?: Omit<InputProps, InputRootKeys>;
diff --git a/packages/mui-joy/src/Textarea/Textarea.spec.tsx b/packages/mui-joy/src/Textarea/Textarea.spec.tsx
new file mode 100644
index 00000000000000..d201329d187706
--- /dev/null
+++ b/packages/mui-joy/src/Textarea/Textarea.spec.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Textarea, { TextareaOwnerState } from '@mui/joy/Textarea';
+import { expectType } from '@mui/types';
+
+<Textarea component="div" />;
+
+<Textarea data-testid="any" />;
+
+<Textarea
+  slots={{
+    root: 'div',
+    textarea: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+  }}
+/>;
+
+<Textarea
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    textarea: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Textarea
+  slotProps={{
+    root: (ownerState) => {
+      expectType<TextareaOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    textarea: (ownerState) => {
+      expectType<TextareaOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<TextareaOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<TextareaOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Textarea/Textarea.test.tsx b/packages/mui-joy/src/Textarea/Textarea.test.tsx
index 391ed9f4b8a583..57cff77f653509 100644
--- a/packages/mui-joy/src/Textarea/Textarea.test.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.test.tsx
@@ -8,7 +8,7 @@ import { ThemeProvider } from '@mui/joy/styles';
 describe('Joy <Textarea />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Textarea />, () => ({
+  describeConformance(<Textarea startDecorator="1" endDecorator="2" />, () => ({
     render,
     classes,
     ThemeProvider,
@@ -17,6 +17,12 @@ describe('Joy <Textarea />', () => {
     testDeepOverrides: { slotName: 'textarea', slotClassName: classes.textarea },
     testCustomVariant: true,
     testVariantProps: { variant: 'solid' },
+    slots: {
+      root: { expectedClassName: classes.root },
+      textarea: { expectedClassName: classes.textarea },
+      startDecorator: { expectedClassName: classes.startDecorator },
+      endDecorator: { expectedClassName: classes.endDecorator },
+    },
     skip: ['propsSpread', 'componentsProp', 'classesRoot'],
   }));
 
@@ -38,7 +44,7 @@ describe('Joy <Textarea />', () => {
   it('should pass props to Textarea', () => {
     const { container } = render(
       <Textarea
-        componentsProps={{
+        slotProps={{
           textarea: {
             maxLength: 5,
           },
diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
index c4ff6765ea7a11..65ffdfccabf76b 100644
--- a/packages/mui-joy/src/Textarea/Textarea.tsx
+++ b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -2,10 +2,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { OverridableComponent } from '@mui/types';
-import { useSlotProps, EventHandlers } from '@mui/base/utils';
+import { EventHandlers } from '@mui/base/utils';
 import composeClasses from '@mui/base/composeClasses';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 import { styled, useThemeProps } from '../styles';
+import useSlot from '../utils/useSlot';
 import { TextareaTypeMap, TextareaProps, TextareaOwnerState } from './TextareaProps';
 import textareaClasses, { getTextareaUtilityClass } from './textareaClasses';
 import useForwardedInput from '../Input/useForwardedInput';
@@ -221,8 +222,6 @@ const Textarea = React.forwardRef(function Textarea(inProps, ref) {
     inputStateClasses,
     getRootProps,
     getInputProps,
-    component,
-    componentsProps = {},
     formControl,
     focused,
     error: errorProp = false,
@@ -266,52 +265,56 @@ const Textarea = React.forwardRef(function Textarea(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: [classes.root, rootStateClasses],
     elementType: TextareaRoot,
-    getSlotProps: getRootProps,
-    externalSlotProps: componentsProps.root,
     externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component,
-    },
+    getSlotProps: getRootProps,
     ownerState,
-    className: [classes.root, rootStateClasses],
   });
 
-  const textareaProps = useSlotProps({
-    elementType: TextareaInput,
-    getSlotProps: (otherHandlers: EventHandlers) =>
-      getInputProps({ ...otherHandlers, ...propsToForward }),
-    externalSlotProps: {
-      minRows,
-      maxRows,
-      ...componentsProps.textarea,
-    },
+  const [SlotTextarea, textareaProps] = useSlot('textarea', {
     additionalProps: {
       id: formControl?.htmlFor,
       'aria-describedby': formControl?.['aria-describedby'],
     },
-    ownerState,
     className: [classes.textarea, inputStateClasses],
+    elementType: TextareaInput,
+    internalForwardedProps: {
+      minRows,
+      maxRows,
+    },
+    externalForwardedProps: other,
+    getSlotProps: (otherHandlers: EventHandlers) =>
+      getInputProps({ ...otherHandlers, ...propsToForward }),
+    ownerState,
+  });
+
+  const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
+    className: classes.startDecorator,
+    elementType: TextareaStartDecorator,
+    externalForwardedProps: other,
+    ownerState,
+  });
+
+  const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
+    className: classes.endDecorator,
+    elementType: TextareaEndDecorator,
+    externalForwardedProps: other,
+    ownerState,
   });
 
   return (
-    <TextareaRoot {...rootProps}>
+    <SlotRoot {...rootProps}>
       {startDecorator && (
-        <TextareaStartDecorator className={classes.startDecorator} ownerState={ownerState}>
-          {startDecorator}
-        </TextareaStartDecorator>
+        <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
       )}
 
       {/* @ts-ignore onChange conflicts with html input */}
-      <TextareaInput {...textareaProps} />
-      {endDecorator && (
-        <TextareaEndDecorator className={classes.endDecorator} ownerState={ownerState}>
-          {endDecorator}
-        </TextareaEndDecorator>
-      )}
-    </TextareaRoot>
+      <SlotTextarea {...textareaProps} />
+      {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
+    </SlotRoot>
   );
 }) as OverridableComponent<TextareaTypeMap>;
 
@@ -332,16 +335,6 @@ Textarea.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
     PropTypes.string,
   ]),
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    textarea: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * @ignore
    */
diff --git a/packages/mui-joy/src/Textarea/TextareaProps.ts b/packages/mui-joy/src/Textarea/TextareaProps.ts
index 6cd44b15338d95..c34c980b507226 100644
--- a/packages/mui-joy/src/Textarea/TextareaProps.ts
+++ b/packages/mui-joy/src/Textarea/TextareaProps.ts
@@ -1,25 +1,27 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
-import { ColorPaletteProp, VariantProp, SxProps, ApplyColorInversion } from '../styles/types';
+import { ApplyColorInversion, ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type TextareaSlot = 'root' | 'textarea' | 'startDecorator' | 'endDecorator';
 
 export interface TextareaPropsVariantOverrides {}
-
 export interface TextareaPropsColorOverrides {}
-
 export interface TextareaPropsSizeOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'div', { sx?: SxProps }, TextareaOwnerState>;
-  textarea?: SlotComponentProps<'textarea', { sx?: SxProps }, TextareaOwnerState>;
-  startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, TextareaOwnerState>;
-  endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, TextareaOwnerState>;
-}
+export type TextareaSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  TextareaSlot,
+  {
+    root: SlotProps<'div', {}, TextareaOwnerState>;
+    textarea: SlotProps<'textarea', {}, TextareaOwnerState>;
+    startDecorator: SlotProps<'span', {}, TextareaOwnerState>;
+    endDecorator: SlotProps<'span', {}, TextareaOwnerState>;
+  }
+>;
 
 export interface TextareaTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
+    TextareaSlotsAndSlotProps &
     Pick<
       React.TextareaHTMLAttributes<HTMLTextAreaElement>,
       | 'autoComplete'
@@ -44,11 +46,6 @@ export interface TextareaTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * @default 'neutral'
        */
       color?: OverridableStringUnion<ColorPaletteProp, TextareaPropsColorOverrides>;
-      /**
-       * The props used for each slot inside the component.
-       * @default {}
-       */
-      componentsProps?: ComponentsProps;
       /**
        * Trailing adornment for this input.
        */
diff --git a/packages/mui-joy/src/Textarea/textareaClasses.ts b/packages/mui-joy/src/Textarea/textareaClasses.ts
index f2fc47955b92fb..a11f2e01e8ff9f 100644
--- a/packages/mui-joy/src/Textarea/textareaClasses.ts
+++ b/packages/mui-joy/src/Textarea/textareaClasses.ts
@@ -5,6 +5,10 @@ export interface TextareaClasses {
   root: string;
   /** Styles applied to the textarea element. */
   textarea: string;
+  /** Styles applied to the startDecorator element if supplied. */
+  startDecorator: string;
+  /** Styles applied to the endDecorator element if supplied. */
+  endDecorator: string;
   /** Styles applied to the root element if the component is a descendant of `FormControl`. */
   formControl: string;
   /** Styles applied to the root element if `disabled={true}`. */
@@ -31,10 +35,6 @@ export interface TextareaClasses {
   sizeMd: string;
   /** Styles applied to the root element if `size="lg"`. */
   sizeLg: string;
-  /** Styles applied to the startDecorator element if supplied. */
-  startDecorator: string;
-  /** Styles applied to the endDecorator element if supplied. */
-  endDecorator: string;
   /** Styles applied to the root element if `variant="plain"`. */
   variantPlain: string;
   /** Styles applied to the root element if `variant="outlined"`. */
@@ -52,6 +52,8 @@ export function getTextareaUtilityClass(slot: string): string {
 const textareaClasses: TextareaClasses = generateUtilityClasses('JoyTextarea', [
   'root',
   'textarea',
+  'startDecorator',
+  'endDecorator',
   'formControl',
   'disabled',
   'error',
@@ -65,8 +67,6 @@ const textareaClasses: TextareaClasses = generateUtilityClasses('JoyTextarea', [
   'sizeSm',
   'sizeMd',
   'sizeLg',
-  'startDecorator',
-  'endDecorator',
   'variantPlain',
   'variantOutlined',
   'variantSoft',
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.spec.tsx b/packages/mui-joy/src/Tooltip/Tooltip.spec.tsx
new file mode 100644
index 00000000000000..79ad0333f40cc9
--- /dev/null
+++ b/packages/mui-joy/src/Tooltip/Tooltip.spec.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import Tooltip, { TooltipOwnerState } from '@mui/joy/Tooltip';
+import { expectType } from '@mui/types';
+
+<Tooltip title="title" open component="div">
+  <div />
+</Tooltip>;
+
+<Tooltip title="title" open data-testid="any">
+  <div />
+</Tooltip>;
+
+<Tooltip
+  title="title"
+  open
+  slots={{
+    root: 'div',
+    arrow: 'div',
+  }}
+>
+  <div />
+</Tooltip>;
+
+<Tooltip
+  title="title"
+  open
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+      open: false,
+    },
+    arrow: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+>
+  <div />
+</Tooltip>;
+
+<Tooltip
+  title="title"
+  open
+  slotProps={{
+    root: (ownerState) => {
+      expectType<TooltipOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+        open: false,
+      };
+    },
+    arrow: (ownerState) => {
+      expectType<TooltipOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+>
+  <div />
+</Tooltip>;
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.test.js b/packages/mui-joy/src/Tooltip/Tooltip.test.js
index 9bd425d0391b3d..8889ee5fcbb3ec 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.test.js
+++ b/packages/mui-joy/src/Tooltip/Tooltip.test.js
@@ -4,14 +4,22 @@ import { createRenderer, describeConformance } from 'test/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import Tooltip, { tooltipClasses as classes } from '@mui/joy/Tooltip';
 import { unstable_capitalize as capitalize } from '@mui/utils';
-import Button from '../Button';
 
 describe('<Tooltip />', () => {
   const { render } = createRenderer();
 
+  function TestPopper(props) {
+    const { children, className, 'data-testid': testId } = props;
+    return (
+      <div className={className} data-testid={testId ?? 'custom'}>
+        {typeof children === 'function' ? children({}) : children}
+      </div>
+    );
+  }
+
   describeConformance(
-    <Tooltip title="Hello World" open>
-      <Button>button</Button>
+    <Tooltip title="Hello World" open arrow>
+      <button type="submit">Hello World</button>
     </Tooltip>,
     () => ({
       classes,
@@ -20,10 +28,18 @@ describe('<Tooltip />', () => {
       ThemeProvider,
       muiName: 'JoyTooltip',
       refInstanceof: window.HTMLButtonElement,
-      testRootOverrides: { slotName: 'root', slotClassName: classes.root },
       testComponentPropWith: 'span',
+      testRootOverrides: { slotName: 'root', slotClassName: classes.root },
       testVariantProps: { variant: 'solid' },
       testCustomVariant: true,
+      slots: {
+        root: {
+          expectedClassName: classes.root,
+          testWithComponent: TestPopper,
+          testWithElement: null,
+        },
+        arrow: { expectedClassName: classes.arrow },
+      },
       skip: [
         'rootClass',
         'componentProp',
@@ -39,7 +55,7 @@ describe('<Tooltip />', () => {
     it('solid by default', () => {
       const { getByRole } = render(
         <Tooltip title="Add" open>
-          <Button>button</Button>
+          <button>button</button>
         </Tooltip>,
       );
       expect(getByRole('tooltip')).to.have.class(classes.variantSolid);
@@ -49,7 +65,7 @@ describe('<Tooltip />', () => {
       it(`should render ${variant}`, () => {
         const { getByRole } = render(
           <Tooltip title="Add" variant={variant} open>
-            <Button>button</Button>
+            <button>button</button>
           </Tooltip>,
         );
         expect(getByRole('tooltip')).to.have.class(classes[`variant${capitalize(variant)}`]);
@@ -61,7 +77,7 @@ describe('<Tooltip />', () => {
     it('adds a neutral class by default', () => {
       const { getByRole } = render(
         <Tooltip title="Add" open>
-          <Button>button</Button>
+          <button>button</button>
         </Tooltip>,
       );
 
@@ -72,7 +88,7 @@ describe('<Tooltip />', () => {
       it(`should render ${color}`, () => {
         const { getByRole } = render(
           <Tooltip title="Add" color={color} open>
-            <Button>button</Button>
+            <button>button</button>
           </Tooltip>,
         );
 
@@ -85,7 +101,7 @@ describe('<Tooltip />', () => {
     it('md by default', () => {
       const { getByRole } = render(
         <Tooltip title="Add" open>
-          <Button>button</Button>
+          <button>button</button>
         </Tooltip>,
       );
 
@@ -96,7 +112,7 @@ describe('<Tooltip />', () => {
       it(`should render ${size}`, () => {
         const { getByRole } = render(
           <Tooltip title="Add" size={size} open>
-            <Button>button</Button>
+            <button>button</button>
           </Tooltip>,
         );
 
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index 35108acd660196..1603afa4b4745a 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -10,19 +10,18 @@ import {
   unstable_useId as useId,
 } from '@mui/utils';
 import { PopperUnstyled, unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlotProps } from '@mui/base/utils';
-import { WithCommonProps } from '@mui/base/utils/mergeSlotProps';
-import { MUIStyledCommonProps } from '@mui/system';
 import { OverridableComponent } from '@mui/types';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import { getTooltipUtilityClass } from './tooltipClasses';
-import {
-  TooltipComponentsPropsOverrides,
-  TooltipProps,
-  TooltipOwnerState,
-  TooltipTypeMap,
-} from './TooltipProps';
+import { TooltipProps, TooltipOwnerState, TooltipTypeMap } from './TooltipProps';
+
+// Create a function to prevent typescript-to-proptypes from generating `slots` and `slotProps` proptypes.
+const excludeSlotsAndSlotProps = <T extends { slots?: any; slotProps?: any }>(props: T) => {
+  const { slots, slotProps, ...otherProps } = props;
+  return otherProps;
+};
 
 const useUtilityClasses = (ownerState: TooltipOwnerState) => {
   const { arrow, variant, color, size, placement, touch } = ownerState;
@@ -214,8 +213,6 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
     children,
     className,
     arrow = false,
-    components = {},
-    componentsProps = {},
     describeChild = false,
     disableFocusListener = false,
     disableHoverListener = false,
@@ -492,7 +489,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
 
   const childrenProps = {
     ...nameOrDescProps,
-    ...other,
+    ...excludeSlotsAndSlotProps(other),
     ...children.props,
     className: clsx(className, children.props.className),
     onTouchStart: detectTouchStart,
@@ -577,64 +574,55 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const RootComponent = components.Root ?? TooltipRoot;
-  const ArrowComponent = components.Arrow ?? TooltipArrow;
-
-  const rootProps = useSlotProps({
-    elementType: RootComponent,
-    externalSlotProps: componentsProps.root,
+  const [SlotRoot, rootProps] = useSlot('root', {
+    additionalProps: {
+      id,
+      popperRef,
+      placement,
+      popperOptions,
+      anchorEl: followCursor
+        ? {
+            getBoundingClientRect: () =>
+              ({
+                top: positionRef.current.y,
+                left: positionRef.current.x,
+                right: positionRef.current.x,
+                bottom: positionRef.current.y,
+                width: 0,
+                height: 0,
+              } as DOMRect),
+          }
+        : childNode,
+      open: childNode ? open : false,
+      ...interactiveWrapperListeners,
+    },
+    ref: null,
+    className: classes.root,
+    elementType: PopperUnstyled,
+    externalForwardedProps: other,
     ownerState,
-    className: clsx(classes.root, componentsProps.root?.className),
+    internalForwardedProps: {
+      component: TooltipRoot,
+    },
   });
 
-  const tooltipArrowProps = useSlotProps({
-    elementType: ArrowComponent,
-    externalSlotProps: componentsProps.arrow as WithCommonProps<
-      React.HTMLProps<HTMLSpanElement> & MUIStyledCommonProps & TooltipComponentsPropsOverrides
-    >,
+  const [SlotArrow, arrowProps] = useSlot('arrow', {
+    additionalProps: {
+      ref: setArrowRef,
+    },
+    className: classes.arrow,
+    elementType: TooltipArrow,
+    externalForwardedProps: other,
     ownerState,
-    className: clsx(classes.arrow, componentsProps.arrow?.className),
   });
 
   return (
     <React.Fragment>
       {React.isValidElement(children) && React.cloneElement(children, childrenProps)}
-      <PopperUnstyled
-        component={RootComponent}
-        placement={placement}
-        anchorEl={
-          followCursor
-            ? {
-                getBoundingClientRect: () =>
-                  ({
-                    top: positionRef.current.y,
-                    left: positionRef.current.x,
-                    right: positionRef.current.x,
-                    bottom: positionRef.current.y,
-                    width: 0,
-                    height: 0,
-                  } as DOMRect),
-              }
-            : childNode
-        }
-        popperRef={popperRef}
-        open={childNode ? open : false}
-        id={id}
-        {...interactiveWrapperListeners}
-        {...rootProps}
-        popperOptions={popperOptions}
-        ownerState={ownerState}
-      >
+      <SlotRoot {...rootProps}>
         {title}
-        {arrow ? (
-          <TooltipArrow
-            {...tooltipArrowProps}
-            className={clsx(classes.arrow, componentsProps.arrow?.className)}
-            ref={setArrowRef}
-            ownerState={ownerState}
-          />
-        ) : null}
-      </PopperUnstyled>
+        {arrow ? <SlotArrow {...arrowProps} /> : null}
+      </SlotRoot>
     </React.Fragment>
   );
 }) as OverridableComponent<TooltipTypeMap>;
@@ -661,28 +649,7 @@ Tooltip.propTypes /* remove-proptypes */ = {
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'primary'
    */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
-    PropTypes.string,
-  ]),
-  /**
-   * The components used for each slot inside the Tooltip.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Arrow: PropTypes.elementType,
-    Root: PropTypes.elementType,
-  }),
-  /**
-   * The props used for each slot inside the Tooltip.
-   * Note that `componentsProps.root` prop values win over `RootProps` if both are applied.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    arrow: PropTypes.object,
-    root: PropTypes.object,
-  }),
+  color: PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
   /**
    * Set to `true` if the `title` acts as an accessible description.
    * By default the `title` acts as an accessible label for the child.
@@ -785,10 +752,7 @@ Tooltip.propTypes /* remove-proptypes */ = {
    * The size of the component.
    * @default 'md'
    */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['lg', 'md', 'sm']),
-    PropTypes.string,
-  ]),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -805,10 +769,7 @@ Tooltip.propTypes /* remove-proptypes */ = {
    * The variant to use.
    * @default 'soft'
    */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
-    PropTypes.string,
-  ]),
+  variant: PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
 } as any;
 
 export default Tooltip;
diff --git a/packages/mui-joy/src/Tooltip/TooltipProps.ts b/packages/mui-joy/src/Tooltip/TooltipProps.ts
index 795e678267e36c..18d69502ffccd3 100644
--- a/packages/mui-joy/src/Tooltip/TooltipProps.ts
+++ b/packages/mui-joy/src/Tooltip/TooltipProps.ts
@@ -1,175 +1,160 @@
-import * as React from 'react';
 import { PopperUnstyledProps } from '@mui/base';
-import { MUIStyledCommonProps } from '@mui/system';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
+import * as React from 'react';
 import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
-
-export type RootProps = Omit<PopperUnstyledProps, 'direction'> & {
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps;
-};
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type TooltipSlot = 'root' | 'arrow';
 
 export interface TooltipPropsVariantOverrides {}
 export interface TooltipPropsColorOverrides {}
 export interface TooltipPropsSizeOverrides {}
-export interface TooltipComponentsPropsOverrides {}
+
+export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  TooltipSlot,
+  {
+    root: SlotProps<
+      'div',
+      { component?: React.ElementType; sx?: SxProps } & Omit<PopperUnstyledProps, 'direction'>,
+      TooltipOwnerState
+    >;
+    arrow: SlotProps<'span', {}, TooltipOwnerState>;
+  }
+>;
 
 export interface TooltipTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    /**
-     * If `true`, adds an arrow to the tooltip.
-     * @default false
-     */
-    arrow?: boolean;
-    /**
-     * Tooltip reference element.
-     */
-    children: React.ReactElement;
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: OverridableStringUnion<ColorPaletteProp, TooltipPropsColorOverrides>;
-    /**
-     * The components used for each slot inside the Tooltip.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    components?: {
-      Root?: React.ElementType;
-      Arrow?: React.ElementType;
-    };
-    /**
-     * The props used for each slot inside the Tooltip.
-     * Note that `componentsProps.root` prop values win over `RootProps` if both are applied.
-     * @default {}
-     */
-    componentsProps?: {
-      root?: Partial<RootProps> & TooltipComponentsPropsOverrides;
-      arrow?: React.HTMLProps<HTMLSpanElement> &
-        MUIStyledCommonProps &
-        TooltipComponentsPropsOverrides;
+  props: P &
+    TooltipSlotsAndSlotProps & {
+      /**
+       * If `true`, adds an arrow to the tooltip.
+       * @default false
+       */
+      arrow?: boolean;
+      /**
+       * Tooltip reference element.
+       */
+      children: React.ReactElement;
+      /**
+       * The color of the component. It supports those theme colors that make sense for this component.
+       * @default 'primary'
+       */
+      color?: OverridableStringUnion<ColorPaletteProp, TooltipPropsColorOverrides>;
+      /**
+       * Set to `true` if the `title` acts as an accessible description.
+       * By default the `title` acts as an accessible label for the child.
+       * @default false
+       */
+      describeChild?: boolean;
+      /**
+       * Do not respond to focus-visible events.
+       * @default false
+       */
+      disableFocusListener?: boolean;
+      /**
+       * Do not respond to hover events.
+       * @default false
+       */
+      disableHoverListener?: boolean;
+      /**
+       * Makes a tooltip not interactive, i.e. it will close when the user
+       * hovers over the tooltip before the `leaveDelay` is expired.
+       * @default false
+       */
+      disableInteractive?: boolean;
+      /**
+       * Do not respond to long press touch events.
+       * @default false
+       */
+      disableTouchListener?: boolean;
+      /**
+       * The number of milliseconds to wait before showing the tooltip.
+       * This prop won't impact the enter touch delay (`enterTouchDelay`).
+       * @default 100
+       */
+      enterDelay?: number;
+      /**
+       * The number of milliseconds to wait before showing the tooltip when one was already recently opened.
+       * @default 0
+       */
+      enterNextDelay?: number;
+      /**
+       * The number of milliseconds a user must touch the element before showing the tooltip.
+       * @default 700
+       */
+      enterTouchDelay?: number;
+      /**
+       * If `true`, the tooltip follow the cursor over the wrapped element.
+       * @default false
+       */
+      followCursor?: boolean;
+      /**
+       * This prop is used to help implement the accessibility logic.
+       * If you don't provide this prop. It falls back to a randomly generated id.
+       */
+      id?: string;
+      /**
+       * The number of milliseconds to wait before hiding the tooltip.
+       * This prop won't impact the leave touch delay (`leaveTouchDelay`).
+       * @default 0
+       */
+      leaveDelay?: number;
+      /**
+       * The number of milliseconds after the user stops touching an element before hiding the tooltip.
+       * @default 1500
+       */
+      leaveTouchDelay?: number;
+      /**
+       * Callback fired when the component requests to be closed.
+       *
+       * @param {React.SyntheticEvent} event The event source of the callback.
+       */
+      onClose?: (event: React.SyntheticEvent | Event) => void;
+      /**
+       * Callback fired when the component requests to be open.
+       *
+       * @param {React.SyntheticEvent} event The event source of the callback.
+       */
+      onOpen?: (event: React.SyntheticEvent) => void;
+      /**
+       * If `true`, the component is shown.
+       */
+      open?: boolean;
+      /**
+       * Tooltip placement.
+       * @default 'bottom'
+       */
+      placement?:
+        | 'bottom-end'
+        | 'bottom-start'
+        | 'bottom'
+        | 'left-end'
+        | 'left-start'
+        | 'left'
+        | 'right-end'
+        | 'right-start'
+        | 'right'
+        | 'top-end'
+        | 'top-start'
+        | 'top';
+      /**
+       * The size of the component.
+       * @default 'md'
+       */
+      size?: OverridableStringUnion<'sm' | 'md' | 'lg', TooltipPropsSizeOverrides>;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps;
+      /**
+       * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
+       */
+      title: React.ReactNode;
+      /**
+       * The variant to use.
+       * @default 'soft'
+       */
+      variant?: OverridableStringUnion<VariantProp, TooltipPropsVariantOverrides>;
     };
-    /**
-     * Set to `true` if the `title` acts as an accessible description.
-     * By default the `title` acts as an accessible label for the child.
-     * @default false
-     */
-    describeChild?: boolean;
-    /**
-     * Do not respond to focus-visible events.
-     * @default false
-     */
-    disableFocusListener?: boolean;
-    /**
-     * Do not respond to hover events.
-     * @default false
-     */
-    disableHoverListener?: boolean;
-    /**
-     * Makes a tooltip not interactive, i.e. it will close when the user
-     * hovers over the tooltip before the `leaveDelay` is expired.
-     * @default false
-     */
-    disableInteractive?: boolean;
-    /**
-     * Do not respond to long press touch events.
-     * @default false
-     */
-    disableTouchListener?: boolean;
-    /**
-     * The number of milliseconds to wait before showing the tooltip.
-     * This prop won't impact the enter touch delay (`enterTouchDelay`).
-     * @default 100
-     */
-    enterDelay?: number;
-    /**
-     * The number of milliseconds to wait before showing the tooltip when one was already recently opened.
-     * @default 0
-     */
-    enterNextDelay?: number;
-    /**
-     * The number of milliseconds a user must touch the element before showing the tooltip.
-     * @default 700
-     */
-    enterTouchDelay?: number;
-    /**
-     * If `true`, the tooltip follow the cursor over the wrapped element.
-     * @default false
-     */
-    followCursor?: boolean;
-    /**
-     * This prop is used to help implement the accessibility logic.
-     * If you don't provide this prop. It falls back to a randomly generated id.
-     */
-    id?: string;
-    /**
-     * The number of milliseconds to wait before hiding the tooltip.
-     * This prop won't impact the leave touch delay (`leaveTouchDelay`).
-     * @default 0
-     */
-    leaveDelay?: number;
-    /**
-     * The number of milliseconds after the user stops touching an element before hiding the tooltip.
-     * @default 1500
-     */
-    leaveTouchDelay?: number;
-    /**
-     * Callback fired when the component requests to be closed.
-     *
-     * @param {React.SyntheticEvent} event The event source of the callback.
-     */
-    onClose?: (event: React.SyntheticEvent | Event) => void;
-    /**
-     * Callback fired when the component requests to be open.
-     *
-     * @param {React.SyntheticEvent} event The event source of the callback.
-     */
-    onOpen?: (event: React.SyntheticEvent) => void;
-    /**
-     * If `true`, the component is shown.
-     */
-    open?: boolean;
-    /**
-     * Tooltip placement.
-     * @default 'bottom'
-     */
-    placement?:
-      | 'bottom-end'
-      | 'bottom-start'
-      | 'bottom'
-      | 'left-end'
-      | 'left-start'
-      | 'left'
-      | 'right-end'
-      | 'right-start'
-      | 'right'
-      | 'top-end'
-      | 'top-start'
-      | 'top';
-    /**
-     * The size of the component.
-     * @default 'md'
-     */
-    size?: OverridableStringUnion<'sm' | 'md' | 'lg', TooltipPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps;
-    /**
-     * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
-     */
-    title: React.ReactNode;
-    /**
-     * The variant to use.
-     * @default 'soft'
-     */
-    variant?: OverridableStringUnion<VariantProp, TooltipPropsVariantOverrides>;
-  };
   defaultComponent: D;
 }
 
diff --git a/packages/mui-joy/src/Typography/Typography.spec.tsx b/packages/mui-joy/src/Typography/Typography.spec.tsx
index cc9ee602a7e313..804b52a15cca90 100644
--- a/packages/mui-joy/src/Typography/Typography.spec.tsx
+++ b/packages/mui-joy/src/Typography/Typography.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Typography from '@mui/joy/Typography';
+import Typography, { TypographyOwnerState } from '@mui/joy/Typography';
+import { expectType } from '@mui/types';
 
 <Typography component="a" href="/">
   Text
@@ -25,3 +26,51 @@ function Link(props: JSX.IntrinsicElements['a']) {
 <Typography color="warning" />;
 
 <Typography textColor="neutral.500" />;
+
+<Typography
+  slots={{
+    root: 'div',
+    startDecorator: 'div',
+    endDecorator: 'div',
+  }}
+/>;
+
+<Typography
+  slotProps={{
+    root: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    startDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+    endDecorator: {
+      component: 'div',
+      'data-testid': 'test',
+    },
+  }}
+/>;
+
+<Typography
+  slotProps={{
+    root: (ownerState) => {
+      expectType<TypographyOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    startDecorator: (ownerState) => {
+      expectType<TypographyOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+    endDecorator: (ownerState) => {
+      expectType<TypographyOwnerState, typeof ownerState>(ownerState);
+      return {
+        'data-testid': 'test',
+      };
+    },
+  }}
+/>;
diff --git a/packages/mui-joy/src/Typography/Typography.test.js b/packages/mui-joy/src/Typography/Typography.test.js
index 34ad3d18e6d2ae..42004f9fce9c6d 100644
--- a/packages/mui-joy/src/Typography/Typography.test.js
+++ b/packages/mui-joy/src/Typography/Typography.test.js
@@ -7,7 +7,7 @@ import { ThemeProvider } from '@mui/joy/styles';
 describe('<Typography />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<Typography />, () => ({
+  describeConformance(<Typography startDecorator="1" endDecorator="2" />, () => ({
     classes,
     inheritComponent: 'p',
     ThemeProvider,
@@ -16,6 +16,11 @@ describe('<Typography />', () => {
     muiName: 'JoyTypography',
     testVariantProps: { level: 'body3' },
     testCustomVariant: true,
+    slots: {
+      root: { expectedClassName: classes.root },
+      startDecorator: { expectedClassName: classes.startDecorator },
+      endDecorator: { expectedClassName: classes.endDecorator },
+    },
     skip: ['componentsProp', 'classesRoot'],
   }));
 
diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
index 18be3e797d39c8..7f83469adb4f10 100644
--- a/packages/mui-joy/src/Typography/Typography.tsx
+++ b/packages/mui-joy/src/Typography/Typography.tsx
@@ -4,10 +4,10 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { unstable_extendSxProp as extendSxProp } from '@mui/system';
 import composeClasses from '@mui/base/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
 import { TypographyTypeMap, TypographyProps, TypographyOwnerState } from './TypographyProps';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import { getTypographyUtilityClass } from './typographyClasses';
 
 export const TypographyContext = React.createContext(false);
@@ -134,7 +134,6 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
 
   const {
     component: componentProp,
-    componentsProps = {},
     gutterBottom = false,
     noWrap = false,
     level: levelProp = 'body1',
@@ -165,43 +164,40 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
   };
 
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = { ...other, component };
 
-  const rootProps = useSlotProps({
+  const [SlotRoot, rootProps] = useSlot('root', {
+    ref,
+    className: classes.root,
     elementType: TypographyRoot,
-    externalSlotProps: componentsProps.root,
+    externalForwardedProps,
     ownerState,
-    additionalProps: {
-      ref,
-      as: component,
-    },
-    externalForwardedProps: other,
-    className: classes.root,
   });
 
-  const startDecoratorProps = useSlotProps({
+  const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
+    className: classes.startDecorator,
     elementType: StartDecorator,
-    externalSlotProps: componentsProps.startDecorator,
+    externalForwardedProps,
     ownerState,
-    className: classes.startDecorator,
   });
 
-  const endDecoratorProps = useSlotProps({
+  const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
+    className: classes.endDecorator,
     elementType: EndDecorator,
-    externalSlotProps: componentsProps.endDecorator,
+    externalForwardedProps,
     ownerState,
-    className: classes.endDecorator,
   });
 
   return (
     <TypographyContext.Provider value>
-      <TypographyRoot {...rootProps}>
+      <SlotRoot {...rootProps}>
         {startDecorator && (
-          <StartDecorator {...startDecoratorProps}>{startDecorator}</StartDecorator>
+          <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
         )}
 
         {children}
-        {endDecorator && <EndDecorator {...endDecoratorProps}>{endDecorator}</EndDecorator>}
-      </TypographyRoot>
+        {endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
+      </SlotRoot>
     </TypographyContext.Provider>
   );
 }) as OverridableComponent<TypographyTypeMap>;
@@ -227,15 +223,6 @@ Typography.propTypes /* remove-proptypes */ = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * The props used for each slot inside the component.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  }),
   /**
    * Element placed after the children.
    */
diff --git a/packages/mui-joy/src/Typography/TypographyProps.ts b/packages/mui-joy/src/Typography/TypographyProps.ts
index 26fc05fb9f9793..1dc87035b1c7a3 100644
--- a/packages/mui-joy/src/Typography/TypographyProps.ts
+++ b/packages/mui-joy/src/Typography/TypographyProps.ts
@@ -1,28 +1,31 @@
 import * as React from 'react';
-import { OverrideProps, OverridableStringUnion } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
+import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import {
   ColorPaletteProp,
-  TypographySystem,
   SxProps,
   SystemProps,
+  TypographySystem,
   VariantProp,
 } from '../styles/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type TypographySlot = 'root' | 'startDecorator' | 'endDecorator';
 
 export interface TypographyPropsColorOverrides {}
-
 export interface TypographyPropsVariantOverrides {}
 
-interface ComponentsProps {
-  root?: SlotComponentProps<'a', { sx?: SxProps }, TypographyOwnerState>;
-  startDecorator?: SlotComponentProps<'span', { sx?: SxProps }, TypographyOwnerState>;
-  endDecorator?: SlotComponentProps<'span', { sx?: SxProps }, TypographyOwnerState>;
-}
+export type TypographySlotsAndSlotProps = CreateSlotsAndSlotProps<
+  TypographySlot,
+  {
+    root: SlotProps<'a', {}, TypographyOwnerState>;
+    startDecorator: SlotProps<'span', {}, TypographyOwnerState>;
+    endDecorator: SlotProps<'span', {}, TypographyOwnerState>;
+  }
+>;
 
 export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'> {
   props: P &
+    TypographySlotsAndSlotProps &
     Omit<SystemProps, 'color'> & {
       /**
        * The content of the component.
@@ -32,11 +35,6 @@ export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'>
        * The color of the component. It supports those theme colors that make sense for this component.
        */
       color?: OverridableStringUnion<ColorPaletteProp, TypographyPropsColorOverrides>;
-      /**
-       * The props used for each slot inside the component.
-       * @default {}
-       */
-      componentsProps?: ComponentsProps;
       /**
        * Element placed after the children.
        */
diff --git a/packages/mui-joy/src/utils/types.ts b/packages/mui-joy/src/utils/types.ts
new file mode 100644
index 00000000000000..0b059cba9f4453
--- /dev/null
+++ b/packages/mui-joy/src/utils/types.ts
@@ -0,0 +1,33 @@
+import { SxProps } from '../styles/types';
+
+type SlotCommonProps = {
+  component?: React.ElementType;
+  sx?: SxProps;
+};
+
+export type SlotProps<TSlotComponent extends React.ElementType, TOverrides, TOwnerState> =
+  | (React.ComponentPropsWithRef<TSlotComponent> &
+      TOverrides &
+      SlotCommonProps &
+      Record<string, unknown>)
+  | ((
+      ownerState: TOwnerState,
+    ) => Record<string, unknown> &
+      React.ComponentPropsWithRef<TSlotComponent> &
+      TOverrides &
+      SlotCommonProps &
+      Record<string, unknown>);
+
+/**
+ * Use T to make sure that K contains all of the keys of T
+ *
+ * @example CreateSlotsAndSlotProps<'root' | 'decorator', { root: ..., decorator: ... }>
+ */
+export type CreateSlotsAndSlotProps<T extends string, K extends Record<T, any>> = {
+  slots?: {
+    [P in keyof K]?: React.ElementType;
+  };
+  slotProps?: {
+    [P in keyof K]?: K[P];
+  };
+};
diff --git a/packages/mui-joy/src/utils/useSlot.test.tsx b/packages/mui-joy/src/utils/useSlot.test.tsx
index e65cd1a9c599a3..825aa07822561a 100644
--- a/packages/mui-joy/src/utils/useSlot.test.tsx
+++ b/packages/mui-joy/src/utils/useSlot.test.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from 'test/utils';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
-import { SlotComponentProps } from '@mui/base/utils';
 import { styled } from '../styles';
+import { SlotProps } from './types';
 import useSlot from './useSlot';
 
 describe('useSlot', () => {
@@ -45,10 +45,10 @@ describe('useSlot', () => {
         className?: string;
         component?: React.ElementType;
         href?: string;
-        components?: { root?: React.ElementType; decorator?: React.ElementType };
-        componentsProps?: {
-          root?: SlotComponentProps<'button', Record<string, any>, {}>;
-          decorator?: SlotComponentProps<'span', { size?: 'sm' | 'md' } & Record<string, any>, {}>;
+        slots?: { root?: React.ElementType; decorator?: React.ElementType };
+        slotProps?: {
+          root?: SlotProps<'button', Record<string, any>, {}>;
+          decorator?: SlotProps<'span', { size?: 'sm' | 'md' } & Record<string, any>, {}>;
         };
       }
     >((props, ref) => {
@@ -92,7 +92,7 @@ describe('useSlot', () => {
 
     it('should append classes', () => {
       const { getByRole } = render(
-        <Item className="foo-bar" componentsProps={{ decorator: { className: 'foo-bar' } }} />,
+        <Item className="foo-bar" slotProps={{ decorator: { className: 'foo-bar' } }} />,
       );
       expect(getByRole('button')).to.have.class('root');
       expect(getByRole('button')).to.have.class('foo-bar');
@@ -106,13 +106,13 @@ describe('useSlot', () => {
     });
 
     it('slot ownerstate should be overriable', () => {
-      const { getByRole } = render(<Item componentsProps={{ decorator: { size: 'sm' } }} />);
+      const { getByRole } = render(<Item slotProps={{ decorator: { size: 'sm' } }} />);
       expect(getByRole('button').firstChild).to.have.class('size-sm');
     });
 
-    it('componentsProps has higher priority', () => {
+    it('slotProps has higher priority', () => {
       const { getByRole } = render(
-        <Item data-item="foo" componentsProps={{ root: { 'data-item': 'bar' } }} />,
+        <Item data-item="foo" slotProps={{ root: { 'data-item': 'bar' } }} />,
       );
       expect(getByRole('button')).to.have.attribute('data-item', 'bar');
     });
@@ -122,19 +122,80 @@ describe('useSlot', () => {
       expect(getByRole('link')).toBeVisible();
     });
 
-    it('use componentsProps `component` over `component` prop', () => {
+    it('use slotProps `component` over `component` prop', () => {
       const { getByRole } = render(
-        <Item component="div" componentsProps={{ root: { component: 'a', href: '/' } }} />,
+        <Item component="div" slotProps={{ root: { component: 'a', href: '/' } }} />,
       );
       expect(getByRole('link')).toBeVisible();
     });
 
     it('can change decorator leaf component', () => {
-      const { getByRole } = render(<Item componentsProps={{ decorator: { component: 'div' } }} />);
+      const { getByRole } = render(<Item slotProps={{ decorator: { component: 'div' } }} />);
       expect(getByRole('button').firstChild).to.have.tagName('div');
     });
   });
 
+  /**
+   * Simulate `Tooltip`, ...etc
+   */
+  describe('unstyled popper as the root slot', () => {
+    const ItemRoot = styled('div')({});
+    function Item(props: {
+      component?: React.ElementType;
+      slots?: {
+        root?: React.ElementType;
+      };
+      slotProps?: {
+        root?: SlotProps<'button', Record<string, any>, {}>;
+      };
+    }) {
+      const ref = React.useRef(null);
+      const [SlotRoot, rootProps] = useSlot('root', {
+        ref,
+        className: 'root',
+        elementType: PopperUnstyled,
+        externalForwardedProps: props,
+        ownerState: {},
+        additionalProps: {
+          open: true, // !!force the popper to always visible for testing
+          anchorEl: () => document.createElement('div'),
+        },
+        internalForwardedProps: {
+          component: ItemRoot,
+        },
+      });
+      return <SlotRoot {...rootProps} />;
+    }
+
+    it('should render popper with styled-component', () => {
+      const { getByRole } = render(<Item />);
+      expect(getByRole('tooltip')).toBeVisible();
+      expect(getByRole('tooltip')).to.have.tagName('div');
+    });
+
+    it('the root slot should be replaceable', () => {
+      const Listbox = React.forwardRef<HTMLUListElement, { component?: React.ElementType }>(
+        function Listbox({ component }, ref) {
+          return <ul ref={ref} data-component={component} />;
+        },
+      );
+
+      const { getByRole } = render(<Item slots={{ root: Listbox }} />);
+      expect(getByRole('list')).toBeVisible();
+      expect(getByRole('list')).not.to.have.attribute('class');
+      // to test that the `component` prop should not forward to the custom slot.
+      expect(getByRole('list')).not.to.have.attribute('data-component');
+    });
+
+    it('the root component can be changed', () => {
+      const { getByRole } = render(<Item slotProps={{ root: { component: 'aside' } }} />);
+      expect(getByRole('tooltip')).to.have.tagName('aside');
+    });
+  });
+
+  /**
+   * Simulate `Autocomplete`, `Select`, ...etc
+   */
   describe('multiple slots with unstyled popper', () => {
     const ItemRoot = styled('div')({});
     const ItemListbox = styled('ul')({
@@ -144,15 +205,15 @@ describe('useSlot', () => {
 
     function Item(props: {
       component?: React.ElementType;
-      components?: {
+      slots?: {
         root?: React.ElementType;
         listbox?: React.ElementType;
         option?: React.ElementType;
       };
-      componentsProps?: {
-        root?: SlotComponentProps<'button', Record<string, any>, {}>;
-        listbox?: SlotComponentProps<'span', Record<string, any>, {}>;
-        option?: SlotComponentProps<'div', Record<string, any>, {}>;
+      slotProps?: {
+        root?: SlotProps<'button', Record<string, any>, {}>;
+        listbox?: SlotProps<'span', Record<string, any>, {}>;
+        option?: SlotProps<'div', Record<string, any>, {}>;
       };
     }) {
       const ref = React.useRef(null);
@@ -169,7 +230,7 @@ describe('useSlot', () => {
         externalForwardedProps: props,
         ownerState: {},
         additionalProps: {
-          open: true,
+          open: true, // !!force the popper to always visible for testing
           role: 'menu',
           anchorEl: () => document.createElement('div'),
         },
@@ -208,19 +269,21 @@ describe('useSlot', () => {
       function Listbox({ component }: { component?: React.ElementType }) {
         return <ul data-component={component} />;
       }
-      const { getByRole } = render(<Item components={{ listbox: Listbox }} />);
+
+      const { getByRole } = render(<Item slots={{ listbox: Listbox }} />);
       expect(getByRole('list')).toBeVisible();
       expect(getByRole('list')).not.to.have.attribute('class');
+      // to test that the `component` prop should not forward to the custom slot.
       expect(getByRole('list')).not.to.have.attribute('data-component');
     });
 
     it('the listbox leaf component can be changed', () => {
-      const { getByRole } = render(<Item componentsProps={{ listbox: { component: 'div' } }} />);
+      const { getByRole } = render(<Item slotProps={{ listbox: { component: 'div' } }} />);
       expect(getByRole('menu')).to.have.tagName('div');
     });
 
     it('the option leaf component can be changed', () => {
-      const { getByRole } = render(<Item componentsProps={{ option: { component: 'div' } }} />);
+      const { getByRole } = render(<Item slotProps={{ option: { component: 'div' } }} />);
       expect(getByRole('menuitem')).to.have.tagName('div');
     });
   });
diff --git a/packages/mui-joy/src/utils/useSlot.ts b/packages/mui-joy/src/utils/useSlot.ts
index 407e733ea7a711..d69a847afabff5 100644
--- a/packages/mui-joy/src/utils/useSlot.ts
+++ b/packages/mui-joy/src/utils/useSlot.ts
@@ -35,8 +35,8 @@ export default function useSlot<
   ExternalSlotProps extends { component?: React.ElementType },
   ExternalForwardedProps extends {
     component?: React.ElementType;
-    components?: { [k in T]?: React.ElementType };
-    componentsProps?: {
+    slots?: { [k in T]?: React.ElementType };
+    slotProps?: {
       [k in T]?:
         | WithCommonProps<ExternalSlotProps>
         | ((ownerState: OwnerState) => WithCommonProps<ExternalSlotProps>);
@@ -66,8 +66,8 @@ export default function useSlot<
      */
     ownerState: OwnerState;
     /**
-     * The `other` props from the consumer. It has to contain `component`, `components`, and `componentsProps`.
-     * The function will use those props to calculate the final leaf component and the returned props.
+     * The `other` props from the consumer. It has to contain `component`, `slots`, and `slotProps`.
+     * The function will use those props to calculate the final rendered element and the returned props.
      *
      * If the slot is not `root`, the rest of the `externalForwardedProps` are neglected.
      */
@@ -80,17 +80,17 @@ export default function useSlot<
      * For overriding the component's ownerState for the slot.
      * This is required for some components that need styling via `ownerState`.
      *
-     * It is a function because `componentsProps.{slot}` can be a function which has to be resolved first.
+     * It is a function because `slotProps.{slot}` can be a function which has to be resolved first.
      */
     getSlotOwnerState?: (
       mergedProps: SlotProps &
         ExternalSlotProps &
         ExtractComponentProps<
-          Exclude<Exclude<ExternalForwardedProps['componentsProps'], undefined>[T], undefined>
+          Exclude<Exclude<ExternalForwardedProps['slotProps'], undefined>[T], undefined>
         >,
     ) => SlotOwnerState;
     /**
-     * props forward to `T` only if leaf component is not provided.
+     * props forward to `T` only if the `slotProps.*.component` is not provided.
      * e.g. Autocomplete's listbox uses PopperUnstyled + StyledComponent
      */
     internalForwardedProps?: any;
@@ -98,7 +98,7 @@ export default function useSlot<
 ) {
   const {
     className,
-    elementType,
+    elementType: initialElementType,
     ownerState,
     externalForwardedProps,
     getSlotOwnerState,
@@ -107,14 +107,16 @@ export default function useSlot<
   } = parameters;
   const {
     component: rootComponent,
-    components = { [name]: undefined },
-    componentsProps = { [name]: undefined },
+    slots = { [name]: undefined },
+    slotProps = { [name]: undefined },
     ...other
   } = externalForwardedProps;
 
-  // `componentsProps[name]` can be a callback that receives the component's `ownerState`.
+  const elementType = slots[name] || initialElementType;
+
+  // `slotProps[name]` can be a callback that receives the component's ownerState.
   // `resolvedComponentsProps` is always a plain object.
-  const resolvedComponentsProps = resolveComponentProps(componentsProps[name], ownerState);
+  const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
 
   const {
     props: { component: slotComponent, ...mergedProps },
@@ -143,8 +145,8 @@ export default function useSlot<
   const props = appendOwnerState(
     elementType,
     {
-      ...(name === 'root' && !rootComponent && !components[name] && internalForwardedProps),
-      ...(name !== 'root' && !components[name] && internalForwardedProps),
+      ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
+      ...(name !== 'root' && !slots[name] && internalForwardedProps),
       ...(mergedProps as { className: string } & SlotProps &
         ExternalSlotProps &
         AdditionalProps &
@@ -157,5 +159,5 @@ export default function useSlot<
     finalOwnerState as OwnerState & SlotOwnerState,
   );
 
-  return [components[name] || elementType, props] as [ElementType, typeof props];
+  return [elementType, props] as [ElementType, typeof props];
 }
diff --git a/test/regressions/fixtures/SelectJoy/GroupedOptionSelect.js b/test/regressions/fixtures/SelectJoy/GroupedOptionSelect.js
index 96a7fc9733ba0f..121447493a375a 100644
--- a/test/regressions/fixtures/SelectJoy/GroupedOptionSelect.js
+++ b/test/regressions/fixtures/SelectJoy/GroupedOptionSelect.js
@@ -26,7 +26,7 @@ export default function SelectGroupedOptions() {
       <Select
         placeholder="Choose your animal"
         defaultListboxOpen
-        componentsProps={{
+        slotProps={{
           listbox: {
             component: 'div',
             sx: {