diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-breadcrumbs/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-breadcrumbs/page.tsx
new file mode 100644
index 00000000000000..2bc3ae9757a7a7
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-breadcrumbs/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+import * as React from 'react';
+import ActiveLastBreadcrumb from '../../../../../../docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb';
+import BasicBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/BasicBreadcrumbs';
+import CollapsedBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs';
+import CustomSeparator from '../../../../../../docs/data/material/components/breadcrumbs/CustomSeparator';
+import CustomizedBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs';
+import IconBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/IconBreadcrumbs';
+import RouterBreadcrumbs from '../../../../../../docs/data/material/components/breadcrumbs/RouterBreadcrumbs';
+
+export default function Breadcrumbs() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Active Last Breadcrumb</h2>
+        <div className="demo-container">
+          <ActiveLastBreadcrumb />
+        </div>
+      </section>
+      <section>
+        <h2> Basic Breadcrumbs</h2>
+        <div className="demo-container">
+          <BasicBreadcrumbs />
+        </div>
+      </section>
+      <section>
+        <h2> Collapsed Breadcrumbs</h2>
+        <div className="demo-container">
+          <CollapsedBreadcrumbs />
+        </div>
+      </section>
+      <section>
+        <h2> Custom Separator</h2>
+        <div className="demo-container">
+          <CustomSeparator />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Breadcrumbs</h2>
+        <div className="demo-container">
+          <CustomizedBreadcrumbs />
+        </div>
+      </section>
+      <section>
+        <h2> Icon Breadcrumbs</h2>
+        <div className="demo-container">
+          <IconBreadcrumbs />
+        </div>
+      </section>
+      <section>
+        <h2> Router Breadcrumbs</h2>
+        <div className="demo-container">
+          <RouterBreadcrumbs />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-breadcrumbs.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-breadcrumbs.tsx
new file mode 100644
index 00000000000000..45845fd495b0ba
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-breadcrumbs.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import ActiveLastBreadcrumb from '../../../../../docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx';
+import BasicBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx';
+import CollapsedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx';
+import CustomSeparator from '../../../../../docs/data/material/components/breadcrumbs/CustomSeparator.tsx';
+import CustomizedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx';
+import IconBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx';
+import RouterBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx';
+
+export default function Breadcrumbs() {
+  return (
+    <MaterialUILayout>
+      <h1>Breadcrumbs</h1>
+      <section>
+        <h2> Active Last Breadcrumb</h2>
+        <div className="demo-container">
+          <ActiveLastBreadcrumb />
+        </div>
+      </section>
+      <section>
+        <h2> Basic Breadcrumbs</h2>
+        <div className="demo-container">
+          <BasicBreadcrumbs />
+        </div>
+      </section>
+      <section>
+        <h2> Collapsed Breadcrumbs</h2>
+        <div className="demo-container">
+          <CollapsedBreadcrumbs />
+        </div>
+      </section>
+      <section>
+        <h2> Custom Separator</h2>
+        <div className="demo-container">
+          <CustomSeparator />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Breadcrumbs</h2>
+        <div className="demo-container">
+          <CustomizedBreadcrumbs />
+        </div>
+      </section>
+      <section>
+        <h2> Icon Breadcrumbs</h2>
+        <div className="demo-container">
+          <IconBreadcrumbs />
+        </div>
+      </section>
+      <section>
+        <h2> Router Breadcrumbs</h2>
+        <div className="demo-container">
+          <RouterBreadcrumbs />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js
index 6d9ffc22b684d4..ae105db224e248 100644
--- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js
+++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.js
@@ -6,12 +6,13 @@ import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Typography from '../Typography';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed';
 import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses';
 
+const useThemeProps = createUseThemeProps('MuiBreadcrumbs');
+
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;