How to update Mantine dependencies?

Update dependencies with npm-check-updates

Run the following script to update package.json file:

npx npm-check-updates @mantine/* @mantinex/* postcss-preset-mantine -u

Then install new dependencies with your package manager. For example, if you use yarn, run

yarn

All done! Your dependencies are up to date.

ncu script

You can install npm-check-updates globally and run it without npx:

npm install -g npm-check-updates

After the package is installed, run the following command to update @mantine/* dependencies:

ncu @mantine/* @mantinex/* postcss-preset-mantine -u

Update dependencies manually

If the method above does not work for you or you want to update @mantine/* dependencies to a specific version, you can do it manually. Open package.json file, it may look something like this:

{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {},
  "dependencies": {
    "@mantine/core": "^7.2.2",
    "@mantine/hooks": "^7.2.2",
    "next": "14.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "postcss": "^8.4.31",
    "postcss-preset-mantine": "^1.10.0",
    "prettier": "^3.1.0",
    "typescript": "5.2.2"
  }
}

Update dependencies version in package.json file to the desired version. Note that all @mantine/* packages must have the same version. For example, if you want to update @mantine/* dependencies to 7.3.0 and postcss-preset-mantine to 1.11.0, you package.json file should be updated like this:

{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {},
  "dependencies": {
    "@mantine/core": "^7.3.0",
    "@mantine/hooks": "^7.3.0",
    "next": "14.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "postcss": "^8.4.31",
    "postcss-preset-mantine": "^1.11.0",
    "prettier": "^3.1.0",
    "typescript": "5.2.2"
  }
}

Then install new dependencies with your package manager. For example, if you use yarn, run

yarn

All done! Your dependencies are up to date.

How do I know which version is the latest?

All @mantine/* packages have the same version, so you can check the latest version of @mantine/hooks package on npm. It is also displayed near the Mantine logo on the documentation home page.

To check the latest version of postcss-preset-mantine package, visit postcss-preset-mantine package on npm.