` or any other element with the `sx` prop.
+
+```diff
+-import Box from '@mui/material/Box';
+
+-
++
![]()
+```
+
+## React 19 support
+
+Material UI v6 is ready for React 19.
+We've been testing Material UI with the latest [React 19 RC](https://react.dev/blog/2024/04/25/react-19) versions to ensure compatibility once the stable release of React 19 is out.
+
+We're also working on backporting React 19 support to Material UI v5—stay tuned.
+
+## Full-stack apps via Toolpad Core
+
+To help you build full-stack apps faster than ever, we're launching [Toolpad Core](https://mui.com/toolpad/), a framework for building dashboards and internal tools with Material UI and Next.js that comes with routing, layout components, and authentication already configured for you.
+
+Stay tuned for more updates on Toolpad Core in the near future.
+
+## Get started with Material UI v6
+
+Ready to upgrade to Material UI v6?
+Head to [the v6 migration guide](/material-ui/migration/upgrade-to-v6/) next.
+
+Visit the links below for further details on some of the key features covered here:
+
+- [Pigment CSS integration](/material-ui/migration/migrating-to-pigment-css/)
+- [Container queries](/material-ui/customization/container-queries/)
+- [CSS theme variables](/material-ui/customization/css-theme-variables/overview/)
+- [Stabilized Grid v2](/material-ui/migration/upgrade-to-v6/#grid2)
+- [Free templates](/material-ui/getting-started/templates/)
diff --git a/docs/public/static/blog/material-ui-v6-is-out/dark-templates.png b/docs/public/static/blog/material-ui-v6-is-out/dark-templates.png
new file mode 100644
index 00000000000000..8d20642de2dcfd
Binary files /dev/null and b/docs/public/static/blog/material-ui-v6-is-out/dark-templates.png differ
diff --git a/docs/public/static/blog/material-ui-v6-is-out/light-templates.png b/docs/public/static/blog/material-ui-v6-is-out/light-templates.png
new file mode 100644
index 00000000000000..e16ba517aadae0
Binary files /dev/null and b/docs/public/static/blog/material-ui-v6-is-out/light-templates.png differ
diff --git a/docs/src/components/action/Frame.tsx b/docs/src/components/action/Frame.tsx
index 39f3235aab08f6..c3ee070fd4fea9 100644
--- a/docs/src/components/action/Frame.tsx
+++ b/docs/src/components/action/Frame.tsx
@@ -46,9 +46,13 @@ const FrameInfo = React.forwardRef
(function FrameInfo(
);
});
-function Frame({ sx, ...props }: BoxProps) {
+const Frame = React.forwardRef(function Frame(
+ { sx, ...props }: BoxProps,
+ ref,
+) {
return (
);
-}
+}) as ReturnType> & {
+ Demo: typeof FrameDemo;
+ Info: typeof FrameInfo;
+};
Frame.Demo = FrameDemo;
Frame.Info = FrameInfo;
diff --git a/docs/src/components/blog/material-ui-v6-is-out/CustomThemeComparison.js b/docs/src/components/blog/material-ui-v6-is-out/CustomThemeComparison.js
new file mode 100644
index 00000000000000..b14bedab2246f4
--- /dev/null
+++ b/docs/src/components/blog/material-ui-v6-is-out/CustomThemeComparison.js
@@ -0,0 +1,139 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+import useResizeHandle from 'docs/src/modules/utils/useResizeHandle';
+import Frame from '../../action/Frame';
+
+export default function CustomThemeComparison() {
+ const objectRef = React.useRef(null);
+ const handleDragging = React.useCallback((target, length) => {
+ const rect = target.getBoundingClientRect();
+ target.style.setProperty(
+ '--split-point',
+ `clamp(12px, ${((length * 100) / rect.width).toFixed(2)}%, calc(100% - 12px))`,
+ );
+ }, []);
+ const { dragging, getDragHandlers } = useResizeHandle(objectRef, {
+ onDragging: handleDragging,
+ });
+ return (
+ *': {
+ borderRadius: '12px',
+ },
+ }}
+ >
+
+ ({
+ userSelect: 'none',
+ pointerEvents: 'none',
+ width: '100%',
+ height: '100%',
+ objectFit: 'cover',
+ objectPosition: 'top',
+ ...theme.applyStyles('dark', {
+ content:
+ 'url(/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg)',
+ }),
+ })}
+ />
+
+
+ ({
+ userSelect: 'none',
+ pointerEvents: 'none',
+ width: '100%',
+ height: '100%',
+ objectFit: 'cover',
+ objectPosition: 'top',
+ ...theme.applyStyles('dark', {
+ content:
+ 'url(/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)',
+ }),
+ })}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/blog/material-ui-v6-is-out/FreeTemplatesBento.js b/docs/src/components/blog/material-ui-v6-is-out/FreeTemplatesBento.js
new file mode 100644
index 00000000000000..79b2f52eead4ea
--- /dev/null
+++ b/docs/src/components/blog/material-ui-v6-is-out/FreeTemplatesBento.js
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+export default function FreeTemplatesBento() {
+ return (
+
+ ({
+ width: '100vw',
+ position: 'relative',
+ left: '50%',
+ transform: 'translateX(-50%)',
+ py: 3,
+ borderBlock: '1px solid',
+ borderColor: 'divider',
+ background:
+ 'linear-gradient(180deg, var(--muidocs-palette-primary-50) 0%, hsla(215, 15%, 97%, 0.6) 100%)',
+ ...theme.applyStyles('dark', {
+ background:
+ 'linear-gradient(180deg, hsla(210, 100%, 23%, 0.1) 0%, hsla(210, 14%, 4%, 0.5) 100%)',
+ }),
+ })}
+ >
+ ({
+ width: '100%',
+ maxWidth: 1000,
+ mx: 'auto',
+ display: 'block',
+ height: 'auto',
+ ...theme.applyStyles('dark', {
+ content: `url(/static/blog/material-ui-v6-is-out/dark-templates.png)`,
+ }),
+ })}
+ />
+
+
+ );
+}
diff --git a/docs/src/components/blog/material-ui-v6-is-out/ThemeTokens.js b/docs/src/components/blog/material-ui-v6-is-out/ThemeTokens.js
new file mode 100644
index 00000000000000..e1b36e003ece0a
--- /dev/null
+++ b/docs/src/components/blog/material-ui-v6-is-out/ThemeTokens.js
@@ -0,0 +1,173 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { CssVarsProvider, extendTheme, styled } from '@mui/material/styles';
+
+const defaultTheme = extendTheme({
+ colorSchemes: { light: true, dark: true },
+ colorSchemeSelector: 'data-mui-color-scheme',
+});
+
+const traverseObject = (palette) => {
+ const result = {};
+ const traverse = (object, parts = []) => {
+ if (object && typeof object === 'object') {
+ for (const key of Object.keys(object)) {
+ traverse(object[key], [...parts, key]);
+ }
+ } else if (typeof object !== 'function') {
+ result[parts.join('.')] = object;
+ }
+ };
+ traverse(palette);
+ return result;
+};
+
+const Table = styled('table')(({ theme }) => ({
+ width: 'max-content', // to keep the content in 1 line
+ borderCollapse: 'separate',
+ borderSpacing: 0,
+ display: 'block',
+ height: 'clamp(30vmax, 40vmax, 40vmin)',
+ maxHeight: '40vmin',
+ overflowY: 'scroll',
+ '& th': {
+ textAlign: 'left',
+ padding: 10,
+ position: 'sticky',
+ top: 0,
+ zIndex: 1,
+ borderBottom: '1px solid',
+ borderColor: theme.palette.divider,
+ backgroundColor: theme.palette.grey[50],
+ ...theme.applyStyles('dark', {
+ borderColor: 'var(--muidocs-palette-primaryDark-700)',
+ backgroundColor: 'hsl(210, 25%, 9%)',
+ }),
+ },
+ '& td': {
+ verticalAlign: 'top',
+ padding: '4px 10px',
+ fontSize: '0.75rem',
+ fontFamily: 'Menlo,Consolas,"Droid Sans Mono",monospace',
+ backgroundColor: theme.palette.common.white,
+ ...theme.applyStyles('dark', {
+ backgroundColor: 'var(--muidocs-palette-primaryDark-900)',
+ }),
+ },
+}));
+
+const ColorSwatch = styled('span')(({ theme }) => ({
+ display: 'inline-block',
+ marginRight: '3px',
+ marginBottom: '1px',
+ verticalAlign: 'middle',
+ width: '0.75em',
+ height: '0.75em',
+ borderRadius: '2px',
+ border: '1px solid',
+ borderColor: theme.vars.palette.divider,
+ backgroundColor: 'currentcolor',
+}));
+
+export default function TemplateCarousel() {
+ const colors = traverseObject(defaultTheme.vars.palette);
+ const fonts = Object.keys(defaultTheme.vars.font).map(
+ (key) => `--mui-font-${key.replace('.', '-')}`,
+ );
+ const shadow = Object.keys(defaultTheme.vars.shadows).map((key) => `--mui-shadows-${key}`);
+ const overlay = Object.keys(defaultTheme.vars.overlays).map((key) => `--mui-overlays-${key}`);
+ const spacing = ['--mui-spacing'];
+ const shape = ['--mui-shape-borderRadius'];
+ const zIndex = Object.keys(defaultTheme.vars.zIndex).map((key) => `--mui-zIndex-${key}`);
+ return (
+
+ ({
+ mb: 4,
+ border: '1px solid',
+ borderColor: 'divider',
+ borderRadius: '10px',
+ position: 'relative',
+ overflow: 'hidden',
+ ...theme.applyStyles('dark', {
+ borderColor: 'var(--muidocs-palette-primaryDark-700)',
+ }),
+ mx: 'clamp(-147px, (1000px - 100vw) * 9999, 0px)',
+ })}
+ >
+ ({
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ width: '100%',
+ height: 56,
+ pointerEvents: 'none',
+ opacity: 0.4,
+ background:
+ 'linear-gradient(180deg, hsla(0, 0%, 100%, 0) 80%, hsla(215, 15%, 80%, 0.7) 100%)',
+ ...theme.applyStyles('dark', {
+ opacity: 0.5,
+ background:
+ 'linear-gradient(180deg, hsla(0, 0%, 0%, 0) 80%, hsla(215, 15%, 0%, 0.8) 100%)',
+ }),
+ })}
+ />
+ ({
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ height: '100%',
+ width: 56,
+ pointerEvents: 'none',
+ opacity: 0.4,
+ background:
+ 'linear-gradient(90deg, hsla(0, 0%, 100%, 0) 80%, hsla(215, 15%, 80%, 0.7) 100%)',
+ ...theme.applyStyles('dark', {
+ opacity: 0.5,
+ background:
+ 'linear-gradient(90deg, hsla(0, 0%, 0%, 0) 80%, hsla(215, 15%, 0%, 0.8) 100%)',
+ }),
+ })}
+ />
+
+
+
+
+ | Light colors |
+ Dark colors |
+ Font |
+ Overlay |
+ Shadow |
+ Spacing |
+ Shape |
+ z Index |
+
+
+
+ {Object.entries(colors).map((color, index) => (
+
+ |
+
+ --mui-{color[0].replace('.', '-')}
+ |
+
+
+ --mui-{color[0].replace('.', '-')}
+ |
+ {fonts[index]} |
+ {overlay[index]} |
+ {shadow[index]} |
+ {spacing[index]} |
+ {shape[index]} |
+ {zIndex[index]} |
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index fb1b0492176f27..1e3097b9b34afd 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -15,6 +15,7 @@ import Highlighter from 'docs/src/components/action/Highlighter';
import Frame from 'docs/src/components/action/Frame';
import RealEstateCard from 'docs/src/components/showcase/RealEstateCard';
import FlashCode from 'docs/src/components/animation/FlashCode';
+import useResizeHandle from 'docs/src/modules/utils/useResizeHandle';
const code = `
,
- options?: { minWidth?: string; maxWidth?: string },
-) => {
- const { minWidth = '0px', maxWidth = '100%' } = options || {};
- const [dragging, setDragging] = React.useState(false);
- const [dragOffset, setDragOffset] = React.useState(0);
- const isTouchEvent = (event: MouseEvent | TouchEvent): event is TouchEvent => {
- return Boolean((event as TouchEvent).touches && (event as TouchEvent).touches.length);
- };
- const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => {
- return Boolean((event as MouseEvent).clientX || (event as MouseEvent).clientX === 0);
- };
- const getClientX = React.useCallback((event: MouseEvent | TouchEvent) => {
- let clientX;
- if (isMouseEvent(event)) {
- clientX = event.clientX;
- }
- if (isTouchEvent(event)) {
- clientX = event.touches[0].clientX;
- }
- return clientX as number;
- }, []);
- const handleStart = (event: React.MouseEvent | React.TouchEvent) => {
- const clientX = getClientX(event.nativeEvent);
- const rect = (event.target as HTMLElement).getBoundingClientRect();
- setDragging(true);
- setDragOffset(rect.width - (clientX - rect.x));
- };
- React.useEffect(() => {
- function resizeObject(event: MouseEvent | TouchEvent) {
- if (event.cancelable) {
- event.preventDefault();
- }
- const clientX = getClientX(event);
-
- if (target.current && dragging && clientX) {
- const objectRect = target.current.getBoundingClientRect();
- const newWidth = clientX - objectRect.left + dragOffset;
- target.current.style.setProperty(
- 'width',
- `clamp(${minWidth}, ${Math.floor(newWidth)}px, ${maxWidth})`,
- );
- }
- }
- function stopResize() {
- setDragging(false);
- }
-
- if (dragging) {
- document.addEventListener('mousemove', resizeObject, { passive: false });
- document.addEventListener('mouseup', stopResize);
- document.addEventListener('touchmove', resizeObject, { passive: false });
- document.addEventListener('touchend', stopResize);
- return () => {
- document.removeEventListener('mousemove', resizeObject);
- document.removeEventListener('mouseup', stopResize);
- document.removeEventListener('touchmove', resizeObject);
- document.removeEventListener('touchend', stopResize);
- };
- }
- return () => {};
- }, [dragOffset, dragging, getClientX, maxWidth, minWidth, target]);
- return {
- dragging,
- getDragHandlers: () => ({
- onTouchStart: handleStart,
- onMouseDown: handleStart,
- }),
- };
-};
-
export default function MaterialStyling() {
const [index, setIndex] = React.useState(0);
const objectRef = React.useRef(null);
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 98a1490bf8a80a..6d52bc023e361d 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -126,6 +126,21 @@ export const authors = {
avatar: 'https://avatars.githubusercontent.com/u/717550?',
github: 'brijeshb42',
},
+ aarongarciah: {
+ name: 'AarĂłn GarcĂa',
+ avatar: 'https://avatars.githubusercontent.com/u/7225802?',
+ github: 'aarongarciah',
+ },
+ zanivan: {
+ name: 'Victor Zanivan Monteiro',
+ avatar: 'https://avatars.githubusercontent.com/u/37222944?',
+ github: 'zanivan',
+ },
+ romgrk: {
+ name: 'Romain Gregoire',
+ avatar: 'https://avatars.githubusercontent.com/u/1423607',
+ github: 'romgrk',
+ },
};
const classes = {
diff --git a/docs/src/modules/utils/useResizeHandle.ts b/docs/src/modules/utils/useResizeHandle.ts
new file mode 100644
index 00000000000000..14f7b6c29a6643
--- /dev/null
+++ b/docs/src/modules/utils/useResizeHandle.ts
@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+const useResizeHandle = (
+ target: React.MutableRefObject,
+ options?: {
+ minWidth?: string;
+ maxWidth?: string;
+ onDragging?: (
+ target: React.MutableRefObject['current'],
+ length: number,
+ dragOffset: number,
+ ) => void;
+ },
+) => {
+ const { minWidth = '0px', maxWidth = '100%', onDragging } = options || {};
+ const [dragging, setDragging] = React.useState(false);
+ const [dragOffset, setDragOffset] = React.useState(0);
+ const isTouchEvent = (event: MouseEvent | TouchEvent): event is TouchEvent => {
+ return Boolean((event as TouchEvent).touches && (event as TouchEvent).touches.length);
+ };
+ const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => {
+ return Boolean((event as MouseEvent).clientX || (event as MouseEvent).clientX === 0);
+ };
+ const getClientX = React.useCallback((event: MouseEvent | TouchEvent) => {
+ let clientX;
+ if (isMouseEvent(event)) {
+ clientX = event.clientX;
+ }
+ if (isTouchEvent(event)) {
+ clientX = event.touches[0].clientX;
+ }
+ return clientX as number;
+ }, []);
+ const handleStart = (event: React.MouseEvent | React.TouchEvent) => {
+ const clientX = getClientX(event.nativeEvent);
+ const rect = (event.target as HTMLElement).getBoundingClientRect();
+ setDragging(true);
+ setDragOffset(rect.width - (clientX - rect.x));
+ };
+ React.useEffect(() => {
+ function resizeObject(event: MouseEvent | TouchEvent) {
+ if (event.cancelable) {
+ event.preventDefault();
+ }
+ const clientX = getClientX(event);
+
+ if (target.current && dragging && clientX) {
+ const objectRect = target.current.getBoundingClientRect();
+ const newWidth = clientX - objectRect.left;
+ if (onDragging) {
+ onDragging(target.current, newWidth, dragOffset);
+ } else {
+ target.current.style.width = `clamp(${minWidth}, ${Math.floor(
+ newWidth + dragOffset,
+ )}px, ${maxWidth})`;
+ }
+ }
+ }
+ function stopResize() {
+ setDragging(false);
+ }
+
+ if (dragging) {
+ document.addEventListener('mousemove', resizeObject, { passive: false });
+ document.addEventListener('mouseup', stopResize);
+ document.addEventListener('touchmove', resizeObject, { passive: false });
+ document.addEventListener('touchend', stopResize);
+ return () => {
+ document.removeEventListener('mousemove', resizeObject);
+ document.removeEventListener('mouseup', stopResize);
+ document.removeEventListener('touchmove', resizeObject);
+ document.removeEventListener('touchend', stopResize);
+ };
+ }
+ return () => {};
+ }, [dragOffset, dragging, getClientX, maxWidth, minWidth, onDragging, target]);
+ return {
+ dragging,
+ getDragHandlers: () => ({
+ onTouchStart: handleStart,
+ onMouseDown: handleStart,
+ }),
+ };
+};
+
+export default useResizeHandle;