@material-ui/core vs @mui/material
Material Design Libraries for React
Search packages..
@material-ui/core@mui/materialSimilar Packages:

Material Design Libraries for React

Both @material-ui/core and @mui/material are libraries that provide React components implementing Google's Material Design. They aim to help developers build responsive and aesthetically pleasing user interfaces with ease. While @material-ui/core was the original package, @mui/material represents the evolution of the library, incorporating modern features and improvements, including better performance and accessibility enhancements. This transition reflects the library's commitment to staying current with best practices in UI development.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
@material-ui/core098,1325.96 MB1,679-MIT
@mui/material098,1325.49 MB1,6795 days agoMIT

Feature Comparison: @material-ui/core vs @mui/material

Versioning and Updates

  • @material-ui/core:

    @material-ui/core is the original version of the Material-UI library. It has a stable API but may not receive new features as frequently as its successor. It is suitable for projects that prioritize stability over the latest features.

  • @mui/material:

    @mui/material is the latest version, which includes significant updates and improvements. It follows a more modern approach to versioning, ensuring that developers can easily adopt new features and enhancements without breaking changes.

Customization

  • @material-ui/core:

    Customization in @material-ui/core is achieved through a theme provider and styled components. While it allows for some level of customization, it may require more boilerplate code compared to the newer version.

  • @mui/material:

    @mui/material offers a more streamlined customization process with the new sx prop and improved theming capabilities. This allows developers to apply styles directly to components with less code, making it easier to create unique designs.

Performance

  • @material-ui/core:

    Performance in @material-ui/core is generally good, but it may not be as optimized for modern web applications as @mui/material. Some components may have unnecessary re-renders, affecting overall performance.

  • @mui/material:

    @mui/material is optimized for performance with features like tree-shaking and better handling of component re-renders. It ensures that only the necessary components are loaded, improving the speed and responsiveness of applications.

Accessibility

  • @material-ui/core:

    @material-ui/core has basic accessibility features but may require additional work to ensure compliance with modern accessibility standards. Developers need to manually implement some ARIA attributes and roles.

  • @mui/material:

    @mui/material places a stronger emphasis on accessibility, with built-in support for ARIA attributes and improved keyboard navigation. This makes it easier for developers to create applications that are accessible to all users.

Community and Support

  • @material-ui/core:

    @material-ui/core has a large community and extensive documentation, but as it is being phased out, new support and features may be limited.

  • @mui/material:

    @mui/material benefits from an active community and ongoing support from the maintainers. It has comprehensive documentation and a growing number of resources available for developers.

How to Choose: @material-ui/core vs @mui/material

  • @material-ui/core:

    Choose @material-ui/core if you are maintaining legacy projects that were built with this version and require stability and backward compatibility. It is also suitable for teams that have already invested in this library and prefer to continue using it without migrating to the newer version.

  • @mui/material:

    Choose @mui/material if you are starting a new project or looking to take advantage of the latest features, improved performance, and better accessibility support. It is designed to be more modular, allowing for a more flexible and customizable approach to building user interfaces.

Similar Npm Packages to @material-ui/core

@material-ui/core is a popular React UI framework that provides a robust set of components and tools for building responsive and visually appealing user interfaces. It follows Google's Material Design guidelines, offering a consistent and modern look and feel. With a wide range of pre-built components, such as buttons, forms, modals, and navigation elements, @material-ui/core allows developers to create complex UIs quickly and efficiently. Additionally, it offers customization options to tailor the components to fit the specific needs of an application.

One notable alternative to @material-ui/core is @chakra-ui/react. Chakra UI is a modular and accessible component library that provides a set of reusable components designed for building user interfaces in React applications. It emphasizes simplicity and ease of use, making it a great choice for developers who want to create beautiful UIs without a steep learning curve. Chakra UI also focuses on accessibility, ensuring that components are usable for all users, including those with disabilities. Its theming capabilities allow for easy customization, enabling developers to create a unique look and feel for their applications.

To see how @material-ui/core compares with @chakra-ui/react, check out the comparison: Comparing @material-ui/core vs @chakra-ui/react.

Similar Npm Packages to @mui/material

@mui/material is a popular React component library that implements Google's Material Design guidelines. It provides a robust set of pre-designed components that help developers build responsive and visually appealing user interfaces quickly. With a focus on usability and accessibility, MUI allows for easy customization and theming, making it a favorite among developers for creating modern web applications. However, there are several alternatives in the React ecosystem that also offer component libraries and design systems. Here are a few notable ones:

  • @blueprintjs/core is a React-based UI toolkit developed by Palantir. It is particularly well-suited for building complex, data-dense interfaces, such as dashboards and admin panels. Blueprint provides a comprehensive set of components, including tables, forms, and menus, all designed with a focus on usability and performance. If your application requires a robust set of components for enterprise-level applications, Blueprint is a strong choice.

  • @chakra-ui/react is a modular and accessible component library that provides a simple and flexible way to build React applications. Chakra UI emphasizes developer experience and accessibility, offering a set of customizable components that can be easily styled using a theme. Its focus on simplicity and composability makes it an excellent choice for developers looking to create responsive and accessible UIs without a steep learning curve.

  • grommet is a React-based framework that provides a rich set of components and design patterns for building responsive and accessible web applications. Grommet is known for its flexibility and customizability, allowing developers to create unique designs while adhering to best practices in accessibility and usability. If you are looking for a library that emphasizes design consistency and responsiveness, Grommet is worth considering.

  • react-bootstrap is a popular library that brings the Bootstrap framework to React. It provides a set of pre-built components that follow the Bootstrap design principles, making it easy to create responsive layouts and components. If you are already familiar with Bootstrap and want to leverage its design system within a React application, React Bootstrap is a great option.

  • rebass is a minimalist component library that focuses on providing a set of responsive and themeable components for building user interfaces. It is built on top of styled-components and allows for easy customization through props. If you prefer a lightweight library that emphasizes design flexibility and simplicity, Rebass is an excellent choice.

  • semantic-ui-react is the official React integration for Semantic UI, a popular CSS framework. It provides a set of components that adhere to Semantic UI's design principles, enabling developers to create responsive and visually appealing applications. If you are looking for a library that combines the power of Semantic UI with React, this is a solid option.

  • styled-components is a popular library for styling React components using tagged template literals. It allows developers to write CSS directly within their JavaScript files, promoting a component-based styling approach. While it is not a component library in the traditional sense, it can be used alongside other libraries to create custom-styled components.

  • tailwindcss is a utility-first CSS framework that provides a set of low-level utility classes for building custom designs. It encourages a different approach to styling by allowing developers to compose styles directly in their markup. If you prefer a highly customizable and utility-based approach to styling, Tailwind CSS is an excellent choice.

To explore how @mui/material compares with these alternatives, check out the comparison link: Comparing @blueprintjs/core vs @chakra-ui/react vs @mui/material vs grommet vs react-bootstrap vs rebass vs semantic-ui-react vs styled-components vs tailwindcss.

README for @material-ui/core

Material-UI logo

Material-UI

MUI v5 is out! ✨ Check out the latest documentation here.

React components for faster and simpler web development. Build your own design system, or start with Material Design.

license npm latest package npm next package npm downloads CircleCI Coverage Status Follow on Twitter Dependabot Status Average time to resolve an issue Crowdin Open Collective backers and sponsors

Installation

Material-UI is available as an npm package.

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

Head to the v4 documentation for more details.

Older versions

Who sponsors Material-UI?

Diamond 💎

octopus doit-intl

Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI.

Gold 🏆

via Patreon

tidelift bitsrc Next gen digital product studio.

via OpenCollective

call-em-all hoodiebees Screen recorder for Mac

Direct

elevator

Gold Sponsors are those who have pledged $500/month or more to Material-UI.

There is more!

See the full list of our backers.

Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return <Button variant="contained">Hello World</Button>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Edit Button

Questions

For how-to questions and other non-issues, please use StackOverflow instead of GitHub issues. There is a StackOverflow tag called "material-ui" that you can use to tag your questions.

Examples

Are you looking for an example project to get started? We host some.

Documentation

Check out our documentation website.

Premium Themes

You can find complete templates & themes in the Material-UI store.

Contributing

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Material-UI.

Notice that contributions go far beyond pull requests and commits. Although we love giving you the opportunity to put your stamp on Material-UI, we also are thrilled to receive a variety of other contributions.

Changelog

If you have recently updated, please read the changelog for details of what has changed.

Roadmap

The future plans and high priority features and enhancements can be found in the roadmap file.

License

This project is licensed under the terms of the MIT license.

Sponsoring services

These great services sponsor Material-UI's core infrastructure:

GitHub

GitHub allows us to host the Git repository.

CircleCI

CircleCI allows us to run the test suite.

Netlify

Netlify allows us to distribute the documentation.

CrowdIn

CrowdIn allows us to translate the documentation.

BrowserStack

BrowserStack allows us to test in real browsers.

CodeCov

CodeCov allows us to monitor the test coverage.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.