diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-checkbox/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-checkbox/page.tsx
new file mode 100644
index 00000000000000..94e60f90ae0c67
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-checkbox/page.tsx
@@ -0,0 +1,79 @@
+'use client';
+import * as React from 'react';
+import CheckboxLabels from '../../../../../../docs/data/material/components/checkboxes/CheckboxLabels';
+import CheckboxesComponent from '../../../../../../docs/data/material/components/checkboxes/Checkboxes';
+import CheckboxesGroup from '../../../../../../docs/data/material/components/checkboxes/CheckboxesGroup';
+import ColorCheckboxes from '../../../../../../docs/data/material/components/checkboxes/ColorCheckboxes';
+import ControlledCheckbox from '../../../../../../docs/data/material/components/checkboxes/ControlledCheckbox';
+import CustomizedCheckbox from '../../../../../../docs/data/material/components/checkboxes/CustomizedCheckbox';
+import FormControlLabelPosition from '../../../../../../docs/data/material/components/checkboxes/FormControlLabelPosition';
+import IconCheckboxes from '../../../../../../docs/data/material/components/checkboxes/IconCheckboxes';
+import IndeterminateCheckbox from '../../../../../../docs/data/material/components/checkboxes/IndeterminateCheckbox';
+import SizeCheckboxes from '../../../../../../docs/data/material/components/checkboxes/SizeCheckboxes';
+
+export default function Checkboxes() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Checkbox Labels</h2>
+        <div className="demo-container">
+          <CheckboxLabels />
+        </div>
+      </section>
+      <section>
+        <h2> Checkboxes</h2>
+        <div className="demo-container">
+          <CheckboxesComponent />
+        </div>
+      </section>
+      <section>
+        <h2> Checkboxes Group</h2>
+        <div className="demo-container">
+          <CheckboxesGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Color Checkboxes</h2>
+        <div className="demo-container">
+          <ColorCheckboxes />
+        </div>
+      </section>
+      <section>
+        <h2> Controlled Checkbox</h2>
+        <div className="demo-container">
+          <ControlledCheckbox />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Checkbox</h2>
+        <div className="demo-container">
+          <CustomizedCheckbox />
+        </div>
+      </section>
+      <section>
+        <h2> Form Control Label Position</h2>
+        <div className="demo-container">
+          <FormControlLabelPosition />
+        </div>
+      </section>
+      <section>
+        <h2> Icon Checkboxes</h2>
+        <div className="demo-container">
+          <IconCheckboxes />
+        </div>
+      </section>
+      <section>
+        <h2> Indeterminate Checkbox</h2>
+        <div className="demo-container">
+          <IndeterminateCheckbox />
+        </div>
+      </section>
+      <section>
+        <h2> Size Checkboxes</h2>
+        <div className="demo-container">
+          <SizeCheckboxes />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-checkbox.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-checkbox.tsx
new file mode 100644
index 00000000000000..47da6a7f153f10
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-checkbox.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import CheckboxLabels from '../../../../../docs/data/material/components/checkboxes/CheckboxLabels.tsx';
+import CheckboxesComponent from '../../../../../docs/data/material/components/checkboxes/Checkboxes.tsx';
+import CheckboxesGroup from '../../../../../docs/data/material/components/checkboxes/CheckboxesGroup.tsx';
+import ColorCheckboxes from '../../../../../docs/data/material/components/checkboxes/ColorCheckboxes.tsx';
+import ControlledCheckbox from '../../../../../docs/data/material/components/checkboxes/ControlledCheckbox.tsx';
+import CustomizedCheckbox from '../../../../../docs/data/material/components/checkboxes/CustomizedCheckbox.tsx';
+import FormControlLabelPosition from '../../../../../docs/data/material/components/checkboxes/FormControlLabelPosition.tsx';
+import IconCheckboxes from '../../../../../docs/data/material/components/checkboxes/IconCheckboxes.tsx';
+import IndeterminateCheckbox from '../../../../../docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx';
+import SizeCheckboxes from '../../../../../docs/data/material/components/checkboxes/SizeCheckboxes.tsx';
+
+export default function Checkboxes() {
+  return (
+    <MaterialUILayout>
+      <h1>Checkboxes</h1>
+      <section>
+        <h2> Checkbox Labels</h2>
+        <div className="demo-container">
+          <CheckboxLabels />
+        </div>
+      </section>
+      <section>
+        <h2> Checkboxes</h2>
+        <div className="demo-container">
+          <CheckboxesComponent />
+        </div>
+      </section>
+      <section>
+        <h2> Checkboxes Group</h2>
+        <div className="demo-container">
+          <CheckboxesGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Color Checkboxes</h2>
+        <div className="demo-container">
+          <ColorCheckboxes />
+        </div>
+      </section>
+      <section>
+        <h2> Controlled Checkbox</h2>
+        <div className="demo-container">
+          <ControlledCheckbox />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Checkbox</h2>
+        <div className="demo-container">
+          <CustomizedCheckbox />
+        </div>
+      </section>
+      <section>
+        <h2> Form Control Label Position</h2>
+        <div className="demo-container">
+          <FormControlLabelPosition />
+        </div>
+      </section>
+      <section>
+        <h2> Icon Checkboxes</h2>
+        <div className="demo-container">
+          <IconCheckboxes />
+        </div>
+      </section>
+      <section>
+        <h2> Indeterminate Checkbox</h2>
+        <div className="demo-container">
+          <IndeterminateCheckbox />
+        </div>
+      </section>
+      <section>
+        <h2> Size Checkboxes</h2>
+        <div className="demo-container">
+          <SizeCheckboxes />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
index 2a320260668f68..3687c1376e3d9c 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -10,9 +10,11 @@ import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank
 import CheckBoxIcon from '../internal/svg-icons/CheckBox';
 import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
+import { createUseThemeProps, styled } from '../zero-styled';
+
+const useThemeProps = createUseThemeProps('MuiCheckbox');
 
 const useUtilityClasses = (ownerState) => {
   const { classes, indeterminate, color, size } = ownerState;
@@ -48,36 +50,57 @@ const CheckboxRoot = styled(SwitchBase, {
       ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`],
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   color: (theme.vars || theme).palette.text.secondary,
-  ...(!ownerState.disableRipple && {
-    '&:hover': {
-      backgroundColor: theme.vars
-        ? `rgba(${
-            ownerState.color === 'default'
-              ? theme.vars.palette.action.activeChannel
-              : theme.vars.palette[ownerState.color].mainChannel
-          } / ${theme.vars.palette.action.hoverOpacity})`
-        : alpha(
-            ownerState.color === 'default'
-              ? theme.palette.action.active
-              : theme.palette[ownerState.color].main,
-            theme.palette.action.hoverOpacity,
-          ),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
+  variants: [
+    {
+      props: { color: 'default', disableRipple: false },
+      style: {
+        '&:hover': {
+          backgroundColor: theme.vars
+            ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
+            : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        },
       },
     },
-  }),
-  ...(ownerState.color !== 'default' && {
-    [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
-      color: (theme.vars || theme).palette[ownerState.color].main,
-    },
-    [`&.${checkboxClasses.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled,
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette.main)
+      .map(([color]) => ({
+        props: { color, disableRipple: false },
+        style: {
+          '&:hover': {
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
+              : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+          },
+        },
+      })),
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette.main)
+      .map(([color]) => ({
+        props: { color },
+        style: {
+          [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
+            color: (theme.vars || theme).palette[color].main,
+          },
+          [`&.${checkboxClasses.disabled}`]: {
+            color: (theme.vars || theme).palette.action.disabled,
+          },
+        },
+      })),
+    {
+      // Should be last to override other colors
+      props: { disableRipple: false },
+      style: {
+        // Reset on touch devices, it doesn't add specificity
+        '&:hover': {
+          '@media (hover: none)': {
+            backgroundColor: 'transparent',
+          },
+        },
+      },
     },
-  }),
+  ],
 }));
 
 const defaultCheckedIcon = <CheckBoxIcon />;