+
+ Lucas Smith
+
+
-
Scranton, PA, United States
-
-
-
-
-
-
-
-
-
-
+
setActive(event.target.checked)}
sx={{ ml: 'auto' }}
/>
-
+
);
}
diff --git a/docs/src/components/home/References.tsx b/docs/src/components/home/References.tsx
index 76d5e08b001fb8..823d38b981552f 100644
--- a/docs/src/components/home/References.tsx
+++ b/docs/src/components/home/References.tsx
@@ -24,7 +24,7 @@ export default function References({
| typeof TEMPLATES_CUSTOMERS;
}) {
return (
-
+
diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx
index f9da7c6f9f7597..ee337eaa13a59c 100644
--- a/docs/src/components/home/ShowcaseContainer.tsx
+++ b/docs/src/components/home/ShowcaseContainer.tsx
@@ -1,21 +1,16 @@
import * as React from 'react';
-import { alpha } from '@mui/material/styles';
import Box, { BoxProps } from '@mui/material/Box';
import Fade from '@mui/material/Fade';
import NoSsr from '@mui/material/NoSsr';
-import Paper, { PaperProps } from '@mui/material/Paper';
+import Frame from 'docs/src/components/action/Frame';
export default function ShowcaseContainer({
preview,
- previewSx,
code,
- codeSx,
sx,
}: {
preview?: React.ReactNode;
- previewSx?: PaperProps['sx'];
code?: React.ReactNode;
- codeSx?: BoxProps['sx'];
sx?: BoxProps['sx'];
}) {
return (
@@ -25,55 +20,32 @@ export default function ShowcaseContainer({
display: 'flex',
flexDirection: 'column',
height: '100%',
+ '& > div:first-of-type': {
+ borderTopLeftRadius: '12px',
+ borderTopRightRadius: '12px',
+ },
+ '& > div:last-of-type': {
+ borderBottomLeftRadius: '12px',
+ borderBottomRightRadius: '12px',
+ },
...sx,
}}
>
-
- theme.applyDarkStyles({
- bgcolor: alpha(theme.palette.primaryDark[800], 0.5),
- borderColor: 'divider',
- }),
- ...(Array.isArray(previewSx) ? previewSx : [previewSx]),
- ]}
+
{preview}
-
-
+
+ {code}
-
+
);
diff --git a/docs/src/components/home/StartToday.tsx b/docs/src/components/home/StartToday.tsx
index f4879b5adadb92..c0aa6a2bc39a22 100644
--- a/docs/src/components/home/StartToday.tsx
+++ b/docs/src/components/home/StartToday.tsx
@@ -1,89 +1,31 @@
import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import Link from 'docs/src/modules/components/Link';
import GradientText from 'docs/src/components/typography/GradientText';
-import ROUTES from 'docs/src/route';
import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
export default function StartToday() {
return (
-
-
-
- Ship your next project
-
- faster
-
- }
- description="Find out why MUI's tools are trusted by thousands of open-source developers and teams around the world."
- />
-
-
-
-
-
-
- Showcase
-
-
- Check out some great examples of MUI's products in action.
-
- svg': { transition: '0.2s' },
- '&:hover > svg': { transform: 'translateX(2px)' },
- }}
- >
- Learn more{' '}
-
-
-
-
-
-
-
- Blog
-
-
- Read the latest updates about our company and products.
-
- svg': { transition: '0.2s' },
- '&:hover > svg': { transform: 'translateX(2px)' },
- }}
- >
- Learn more{' '}
-
-
-
-
-
-
+
+
+ Ship your next project faster
+
+ }
+ description="Find out why MUI's tools are trusted by thousands of open-source developers and teams around the world."
+ />
+
+
);
}
diff --git a/docs/src/components/home/Testimonials.tsx b/docs/src/components/home/Testimonials.tsx
index c39ad3f19b151b..991c982b15927d 100644
--- a/docs/src/components/home/Testimonials.tsx
+++ b/docs/src/components/home/Testimonials.tsx
@@ -14,12 +14,9 @@ export default function Testimonials() {
({
- background: `linear-gradient(180deg, ${alpha(
- theme.palette.primaryDark[800],
- 0.8,
- )}2%, ${alpha(theme.palette.primaryDark[900], 0.5)} 80%),
- ${(theme.vars || theme).palette.common.black}
- `,
+ background: `linear-gradient(180deg, ${alpha(theme.palette.primaryDark[800], 0.8)}2%, ${
+ theme.palette.primaryDark[900]
+ } 80%), ${theme.palette.primaryDark[900]}`,
})}
>
diff --git a/docs/src/components/home/XGridGlobalStyles.tsx b/docs/src/components/home/XGridGlobalStyles.tsx
index 3608b9155cd4b6..f0f7796bdddda7 100644
--- a/docs/src/components/home/XGridGlobalStyles.tsx
+++ b/docs/src/components/home/XGridGlobalStyles.tsx
@@ -27,7 +27,7 @@ export default function XGridGlobalStyles({
flexShrink: 0,
border: '1px solid',
padding: theme.spacing(0, 1),
- borderColor: (theme.vars || theme).palette.grey[200],
+ borderColor: (theme.vars || theme).palette.divider,
'& svg': {
fontSize: '1.125rem',
},
@@ -120,7 +120,7 @@ export default function XGridGlobalStyles({
'& .MuiDataGrid-root': {
'& .MuiDataGrid-toolbarContainer': {
'& > button': {
- borderColor: (theme.vars || theme).palette.primaryDark[600],
+ borderColor: (theme.vars || theme).palette.divider,
},
},
'& .MuiCheckbox-root': {
@@ -130,7 +130,7 @@ export default function XGridGlobalStyles({
color: (theme.vars || theme).palette.primary[300],
},
'& .MuiDataGrid-columnHeaders': {
- borderColor: (theme.vars || theme).palette.primaryDark[500],
+ borderColor: (theme.vars || theme).palette.divider,
},
'& .MuiDataGrid-columnSeparator': {
color: (theme.vars || theme).palette.primaryDark[400],
diff --git a/docs/src/components/productCore/CoreHero.tsx b/docs/src/components/productCore/CoreHero.tsx
index d370dd80f81a12..efa0dd69ba55a8 100644
--- a/docs/src/components/productCore/CoreHero.tsx
+++ b/docs/src/components/productCore/CoreHero.tsx
@@ -1,51 +1,31 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
+import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
import GradientText from 'docs/src/components/typography/GradientText';
+
import IconImage from 'docs/src/components/icon/IconImage';
export default function CoreHero() {
return (
-
-
- ({
- color: 'primary.600',
- display: 'flex',
- alignItems: 'center',
- justifyContent: { xs: 'center', md: 'flex-start' },
- mb: { xs: 1, sm: 0 },
- '& > *': { mr: 1 },
- ...theme.applyDarkStyles({
- color: 'primary.400',
- }),
- })}
- >
- MUI Core
-
-
- Ready to use components
-
- free forever
-
-
- Get a growing list of React components and utilities, ready-to-use, free forever, and with
- accessibility always in mind. We've built the foundational UI blocks for your design
- system so you don't have to.
-
-
-
+
+
+ {' '}
+ MUI Core
+
+ }
+ title={
+
+ Ready to use components free forever
+
+ }
+ description="Get a growing list of React components and utilities, ready-to-use, free forever, and with
+ accessibility always in mind. We've built the foundational UI blocks for your design system so you don't have to."
+ />
+
);
}
diff --git a/docs/src/components/productCore/CoreHeroEnd.tsx b/docs/src/components/productCore/CoreHeroEnd.tsx
deleted file mode 100644
index 337ff521cffdfd..00000000000000
--- a/docs/src/components/productCore/CoreHeroEnd.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import { alpha } from '@mui/material/styles';
-import Section from 'docs/src/layouts/Section';
-import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
-import GradientText from 'docs/src/components/typography/GradientText';
-import Link from 'docs/src/modules/components/Link';
-import ROUTES from 'docs/src/route';
-import MuiStatistics from 'docs/src/components/home/MuiStatistics';
-
-export default function CoreHeroEnd() {
- return (
-
- `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[900]} 50%,
- ${alpha(theme.palette.primary[800], 0.2)} 100%), ${
- (theme.vars || theme).palette.primaryDark[900]
- }`,
- }}
- >
-
-
-
-
- Join our global community
-
- }
- description="The core components were crafted by many hands, all over the world. Join us today to get help when you need it, and lend a hand when you can."
- />
- }
- sx={{ width: { xs: '100%', sm: 'auto' } }}
- >
- Join our community
-
-
-
-
-
-
- );
-}
diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx
new file mode 100644
index 00000000000000..22c69b1242ba58
--- /dev/null
+++ b/docs/src/components/productMaterial/MaterialEnd.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
+import CompareIcon from '@mui/icons-material/Compare';
+import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
+import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
+import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import GradientText from 'docs/src/components/typography/GradientText';
+import Link from 'docs/src/modules/components/Link';
+import ROUTES from 'docs/src/route';
+
+export default function MaterialEnd() {
+ return (
+
+ `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[900]} 50%,
+ ${alpha(theme.palette.primary[800], 0.2)} 100%), ${
+ (theme.vars || theme).palette.primaryDark[900]
+ }`,
+ }}
+ >
+
+
+
+ Join our global community
+
+ }
+ description={
+
+ Material UI wouldn't be possible without our global community of contributors.
+ Join us today to get help when you need it, and lend a hand when you can.
+
+ }
+ />
+
+
+
+ li': { alignItems: 'flex-start' } }}>
+
+ } />
+
+
+ Material UI vs. Base UI
+
+
+ Material UI implements Google's Material Design whereas Base UI features many
+ of the same components, but without the Material Design implementation.
+
+
+
+
+ } />
+
+
+ Does it support Material 3?
+
+
+ The adoption of Material 3 is tentatively planned for Material UI v6. See the{' '}
+
+ the release schedule
+ {' '}
+ and follow{' '}
+
+ this GitHub issue
+ {' '}
+ for future updates.
+
+