Skip to content
+

Upgrade to v7

This guide explains how to upgrade from Material UI v6 to v7.

Start using the alpha release

In the package.json file, change the package version from latest to next.

package.json
-"@mui/material": "latest",
+"@mui/material": "next",

Using next ensures your project always uses the latest v7 pre-releases. Alternatively, you can also target and fix it to a specific version, for example, 7.0.0-alpha.0.

Breaking changes

Since v7 is a new major release, it contains some changes that affect the public API. The steps you need to take to migrate from Material UI v6 to v7 are described below.

Lab components moved to the main package

The following @mui/lab components and hook have been moved to @mui/material:

  • Alert
  • AlertTitle
  • Autocomplete
  • AvatarGroup
  • Pagination
  • PaginationItem
  • Rating
  • Skeleton
  • SpeedDial
  • SpeedDialAction
  • SpeedDialIcon
  • ToggleButton
  • ToggleButtonGroup
  • usePagination

To keep using these components and hook, import them from @mui/material instead of @mui/lab.

-import Alert from '@mui/lab/Alert';
+import Alert from '@mui/material/Alert';

-import { Alert } from '@mui/lab';
+import { Alert } from '@mui/material';

Use this codemod to automatically update the imports:

npx @mui/codemod@next v7.0.0/lab-removed-components <path/to/folder>