diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx
new file mode 100644
index 00000000000000..89723ca9e16b84
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-pagination/page.tsx
@@ -0,0 +1,86 @@
+'use client';
+import * as React from 'react';
+import BasicPagination from '../../../../../../docs/data/material/components/pagination/BasicPagination';
+import CustomIcons from '../../../../../../docs/data/material/components/pagination/CustomIcons';
+import PaginationButtons from '../../../../../../docs/data/material/components/pagination/PaginationButtons';
+import PaginationControlled from '../../../../../../docs/data/material/components/pagination/PaginationControlled';
+import PaginationLink from '../../../../../../docs/data/material/components/pagination/PaginationLink';
+import PaginationOutlined from '../../../../../../docs/data/material/components/pagination/PaginationOutlined';
+import PaginationRanges from '../../../../../../docs/data/material/components/pagination/PaginationRanges';
+import PaginationRounded from '../../../../../../docs/data/material/components/pagination/PaginationRounded';
+import PaginationSize from '../../../../../../docs/data/material/components/pagination/PaginationSize';
+import TablePaginationDemo from '../../../../../../docs/data/material/components/pagination/TablePaginationDemo';
+import UsePagination from '../../../../../../docs/data/material/components/pagination/UsePagination';
+
+export default function Pagination() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Basic Pagination</h2>
+        <div className="demo-container">
+          <BasicPagination />
+        </div>
+      </section>
+      <section>
+        <h2> Custom Icons</h2>
+        <div className="demo-container">
+          <CustomIcons />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Buttons</h2>
+        <div className="demo-container">
+          <PaginationButtons />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Controlled</h2>
+        <div className="demo-container">
+          <PaginationControlled />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Link</h2>
+        <div className="demo-container">
+          <PaginationLink />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Outlined</h2>
+        <div className="demo-container">
+          <PaginationOutlined />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Ranges</h2>
+        <div className="demo-container">
+          <PaginationRanges />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Rounded</h2>
+        <div className="demo-container">
+          <PaginationRounded />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Size</h2>
+        <div className="demo-container">
+          <PaginationSize />
+        </div>
+      </section>
+      <section>
+        <h2> Table Pagination Demo</h2>
+        <div className="demo-container">
+          <TablePaginationDemo />
+        </div>
+      </section>
+      <section>
+        <h2> Use Pagination</h2>
+        <div className="demo-container">
+          <UsePagination />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx
new file mode 100644
index 00000000000000..0c98e85fc85307
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-pagination.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import BasicPagination from '../../../../../docs/data/material/components/pagination/BasicPagination.tsx';
+import CustomIcons from '../../../../../docs/data/material/components/pagination/CustomIcons.tsx';
+import PaginationButtons from '../../../../../docs/data/material/components/pagination/PaginationButtons.tsx';
+import PaginationControlled from '../../../../../docs/data/material/components/pagination/PaginationControlled.tsx';
+import PaginationLink from '../../../../../docs/data/material/components/pagination/PaginationLink.tsx';
+import PaginationOutlined from '../../../../../docs/data/material/components/pagination/PaginationOutlined.tsx';
+import PaginationRanges from '../../../../../docs/data/material/components/pagination/PaginationRanges.tsx';
+import PaginationRounded from '../../../../../docs/data/material/components/pagination/PaginationRounded.tsx';
+import PaginationSize from '../../../../../docs/data/material/components/pagination/PaginationSize.tsx';
+import TablePaginationDemo from '../../../../../docs/data/material/components/pagination/TablePaginationDemo.tsx';
+import UsePagination from '../../../../../docs/data/material/components/pagination/UsePagination.tsx';
+
+export default function Pagination() {
+  return (
+    <MaterialUILayout>
+      <h1>Pagination</h1>
+      <section>
+        <h2> Basic Pagination</h2>
+        <div className="demo-container">
+          <BasicPagination />
+        </div>
+      </section>
+      <section>
+        <h2> Custom Icons</h2>
+        <div className="demo-container">
+          <CustomIcons />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Buttons</h2>
+        <div className="demo-container">
+          <PaginationButtons />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Controlled</h2>
+        <div className="demo-container">
+          <PaginationControlled />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Link</h2>
+        <div className="demo-container">
+          <PaginationLink />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Outlined</h2>
+        <div className="demo-container">
+          <PaginationOutlined />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Ranges</h2>
+        <div className="demo-container">
+          <PaginationRanges />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Rounded</h2>
+        <div className="demo-container">
+          <PaginationRounded />
+        </div>
+      </section>
+      <section>
+        <h2> Pagination Size</h2>
+        <div className="demo-container">
+          <PaginationSize />
+        </div>
+      </section>
+      <section>
+        <h2> Table Pagination Demo</h2>
+        <div className="demo-container">
+          <TablePaginationDemo />
+        </div>
+      </section>
+      <section>
+        <h2> Use Pagination</h2>
+        <div className="demo-container">
+          <UsePagination />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js
index 3f51141d0587a9..0b65f22c60f365 100644
--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
-import useThemeProps from '../styles/useThemeProps';
 import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
@@ -13,7 +12,9 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+
+const useThemeProps = createUseThemeProps('MuiPaginationItem');
 
 const overridesResolver = (props, styles) => {
   const { ownerState } = props;
@@ -65,7 +66,7 @@ const PaginationItemEllipsis = styled('div', {
   name: 'MuiPaginationItem',
   slot: 'Root',
   overridesResolver,
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   ...theme.typography.body2,
   borderRadius: 32 / 2,
   textAlign: 'center',
@@ -78,185 +79,225 @@ const PaginationItemEllipsis = styled('div', {
   [`&.${paginationItemClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,
   },
-  ...(ownerState.size === 'small' && {
-    minWidth: 26,
-    borderRadius: 26 / 2,
-    margin: '0 1px',
-    padding: '0 4px',
-  }),
-  ...(ownerState.size === 'large' && {
-    minWidth: 40,
-    borderRadius: 40 / 2,
-    padding: '0 10px',
-    fontSize: theme.typography.pxToRem(15),
-  }),
+  variants: [
+    {
+      props: { size: 'small' },
+      style: {
+        minWidth: 26,
+        borderRadius: 26 / 2,
+        margin: '0 1px',
+        padding: '0 4px',
+      },
+    },
+    {
+      props: { size: 'large' },
+      style: {
+        minWidth: 40,
+        borderRadius: 40 / 2,
+        padding: '0 10px',
+        fontSize: theme.typography.pxToRem(15),
+      },
+    },
+  ],
 }));
 
 const PaginationItemPage = styled(ButtonBase, {
   name: 'MuiPaginationItem',
   slot: 'Root',
   overridesResolver,
-})(
-  ({ theme, ownerState }) => ({
-    ...theme.typography.body2,
-    borderRadius: 32 / 2,
-    textAlign: 'center',
-    boxSizing: 'border-box',
-    minWidth: 32,
-    height: 32,
-    padding: '0 6px',
-    margin: '0 3px',
-    color: (theme.vars || theme).palette.text.primary,
-    [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette.action.focus,
-    },
-    [`&.${paginationItemClasses.disabled}`]: {
-      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+})(({ theme }) => ({
+  ...theme.typography.body2,
+  borderRadius: 32 / 2,
+  textAlign: 'center',
+  boxSizing: 'border-box',
+  minWidth: 32,
+  height: 32,
+  padding: '0 6px',
+  margin: '0 3px',
+  color: (theme.vars || theme).palette.text.primary,
+  [`&.${paginationItemClasses.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus,
+  },
+  [`&.${paginationItemClasses.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
+  },
+  transition: theme.transitions.create(['color', 'background-color'], {
+    duration: theme.transitions.duration.short,
+  }),
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent',
     },
-    transition: theme.transitions.create(['color', 'background-color'], {
-      duration: theme.transitions.duration.short,
-    }),
+  },
+  [`&.${paginationItemClasses.selected}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.selected,
     '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.action.hover,
+      backgroundColor: theme.vars
+        ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
+        : alpha(
+            theme.palette.action.selected,
+            theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+          ),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: 'transparent',
+        backgroundColor: (theme.vars || theme).palette.action.selected,
       },
     },
-    [`&.${paginationItemClasses.selected}`]: {
+    [`&.${paginationItemClasses.focusVisible}`]: {
+      backgroundColor: theme.vars
+        ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
+        : alpha(
+            theme.palette.action.selected,
+            theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
+          ),
+    },
+    [`&.${paginationItemClasses.disabled}`]: {
+      opacity: 1,
+      color: (theme.vars || theme).palette.action.disabled,
       backgroundColor: (theme.vars || theme).palette.action.selected,
-      '&:hover': {
-        backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
-          : alpha(
-              theme.palette.action.selected,
-              theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
-            ),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: (theme.vars || theme).palette.action.selected,
-        },
+    },
+  },
+  variants: [
+    {
+      props: { size: 'small' },
+      style: {
+        minWidth: 26,
+        height: 26,
+        borderRadius: 26 / 2,
+        margin: '0 1px',
+        padding: '0 4px',
       },
-      [`&.${paginationItemClasses.focusVisible}`]: {
-        backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
-          : alpha(
-              theme.palette.action.selected,
-              theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
-            ),
+    },
+    {
+      props: { size: 'large' },
+      style: {
+        minWidth: 40,
+        height: 40,
+        borderRadius: 40 / 2,
+        padding: '0 10px',
+        fontSize: theme.typography.pxToRem(15),
       },
-      [`&.${paginationItemClasses.disabled}`]: {
-        opacity: 1,
-        color: (theme.vars || theme).palette.action.disabled,
-        backgroundColor: (theme.vars || theme).palette.action.selected,
+    },
+    {
+      props: { shape: 'rounded' },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius,
       },
     },
-    ...(ownerState.size === 'small' && {
-      minWidth: 26,
-      height: 26,
-      borderRadius: 26 / 2,
-      margin: '0 1px',
-      padding: '0 4px',
-    }),
-    ...(ownerState.size === 'large' && {
-      minWidth: 40,
-      height: 40,
-      borderRadius: 40 / 2,
-      padding: '0 10px',
-      fontSize: theme.typography.pxToRem(15),
-    }),
-    ...(ownerState.shape === 'rounded' && {
-      borderRadius: (theme.vars || theme).shape.borderRadius,
-    }),
-  }),
-  ({ theme, ownerState }) => ({
-    ...(ownerState.variant === 'text' && {
-      [`&.${paginationItemClasses.selected}`]: {
-        ...(ownerState.color !== 'standard' && {
-          color: (theme.vars || theme).palette[ownerState.color].contrastText,
-          backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-          '&:hover': {
-            backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-            // Reset on touch devices, it doesn't add specificity
-            '@media (hover: none)': {
-              backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-            },
+    {
+      props: { variant: 'outlined' },
+      style: {
+        border: theme.vars
+          ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
+          : `1px solid ${
+              theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+            }`,
+        [`&.${paginationItemClasses.selected}`]: {
+          [`&.${paginationItemClasses.disabled}`]: {
+            borderColor: (theme.vars || theme).palette.action.disabledBackground,
+            color: (theme.vars || theme).palette.action.disabled,
           },
-          [`&.${paginationItemClasses.focusVisible}`]: {
-            backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+        },
+      },
+    },
+    {
+      props: { variant: 'text' },
+      style: {
+        [`&.${paginationItemClasses.selected}`]: {
+          [`&.${paginationItemClasses.disabled}`]: {
+            color: (theme.vars || theme).palette.action.disabled,
           },
-        }),
-        [`&.${paginationItemClasses.disabled}`]: {
-          color: (theme.vars || theme).palette.action.disabled,
         },
       },
-    }),
-    ...(ownerState.variant === 'outlined' && {
-      border: theme.vars
-        ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
-        : `1px solid ${
-            theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-          }`,
-      [`&.${paginationItemClasses.selected}`]: {
-        ...(ownerState.color !== 'standard' && {
-          color: (theme.vars || theme).palette[ownerState.color].main,
-          border: `1px solid ${
-            theme.vars
-              ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)`
-              : alpha(theme.palette[ownerState.color].main, 0.5)
-          }`,
-          backgroundColor: theme.vars
-            ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
-                theme.vars.palette.action.activatedOpacity
-              })`
-            : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
-          '&:hover': {
-            backgroundColor: theme.vars
-              ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${
-                  theme.vars.palette.action.activatedOpacity
-                } + ${theme.vars.palette.action.focusOpacity}))`
-              : alpha(
-                  theme.palette[ownerState.color].main,
-                  theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity,
-                ),
-            // Reset on touch devices, it doesn't add specificity
-            '@media (hover: none)': {
-              backgroundColor: 'transparent',
+    },
+    ...Object.entries(theme.palette)
+      .filter(([, value]) => value.main && value.dark && value.contrastText)
+      .map(([color]) => ({
+        props: { variant: 'text', color },
+        style: {
+          [`&.${paginationItemClasses.selected}`]: {
+            color: (theme.vars || theme).palette[color].contrastText,
+            backgroundColor: (theme.vars || theme).palette[color].main,
+            '&:hover': {
+              backgroundColor: (theme.vars || theme).palette[color].dark,
+              // Reset on touch devices, it doesn't add specificity
+              '@media (hover: none)': {
+                backgroundColor: (theme.vars || theme).palette[color].main,
+              },
+            },
+            [`&.${paginationItemClasses.focusVisible}`]: {
+              backgroundColor: (theme.vars || theme).palette[color].dark,
+            },
+            [`&.${paginationItemClasses.disabled}`]: {
+              color: (theme.vars || theme).palette.action.disabled,
             },
           },
-          [`&.${paginationItemClasses.focusVisible}`]: {
+        },
+      })),
+    ...Object.entries(theme.palette)
+      .filter(([, value]) => value.main && value.light)
+      .map(([color]) => ({
+        props: { variant: 'outlined', color },
+        style: {
+          [`&.${paginationItemClasses.selected}`]: {
+            color: (theme.vars || theme).palette[color].main,
+            border: `1px solid ${
+              theme.vars
+                ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)`
+                : alpha(theme.palette[color].main, 0.5)
+            }`,
             backgroundColor: theme.vars
-              ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${
-                  theme.vars.palette.action.activatedOpacity
-                } + ${theme.vars.palette.action.focusOpacity}))`
-              : alpha(
-                  theme.palette[ownerState.color].main,
-                  theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity,
-                ),
+              ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})`
+              : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity),
+            '&:hover': {
+              backgroundColor: theme.vars
+                ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
+                : alpha(
+                    theme.palette[color].main,
+                    theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity,
+                  ),
+              // Reset on touch devices, it doesn't add specificity
+              '@media (hover: none)': {
+                backgroundColor: 'transparent',
+              },
+            },
+            [`&.${paginationItemClasses.focusVisible}`]: {
+              backgroundColor: theme.vars
+                ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
+                : alpha(
+                    theme.palette[color].main,
+                    theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity,
+                  ),
+            },
           },
-        }),
-        [`&.${paginationItemClasses.disabled}`]: {
-          borderColor: (theme.vars || theme).palette.action.disabledBackground,
-          color: (theme.vars || theme).palette.action.disabled,
         },
-      },
-    }),
-  }),
-);
+      })),
+  ],
+}));
 
 const PaginationItemPageIcon = styled('div', {
   name: 'MuiPaginationItem',
   slot: 'Icon',
   overridesResolver: (props, styles) => styles.icon,
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   fontSize: theme.typography.pxToRem(20),
   margin: '0 -8px',
-  ...(ownerState.size === 'small' && {
-    fontSize: theme.typography.pxToRem(18),
-  }),
-  ...(ownerState.size === 'large' && {
-    fontSize: theme.typography.pxToRem(22),
-  }),
+  variants: [
+    {
+      props: { size: 'small' },
+      style: {
+        fontSize: theme.typography.pxToRem(18),
+      },
+    },
+    {
+      props: { size: 'large' },
+      style: {
+        fontSize: theme.typography.pxToRem(22),
+      },
+    },
+  ],
 }));
 
 const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) {