Material-UI is now MUI
Tags: react, javascript, typescript
Published: 2021-09-18 10:39:53

###**What is Material-UI (MUI React)?**
Do you know React.js? If **yes**, then you surely know [Material-UI](https://mui.com/) - One of the popular React component library. I must say Material-UI is the [top](https://retool.com/blog/react-component-libraries/) general-purpose library out there in the market. It follows Google’s material design guidelines, components, and tools to make web applications faster.

####**The origin**
Material-UI [started](https://www.text-em-all.com/blog/material-ui-the-internet-found-our-ui-project) as a React Implementation of Google’s Material Design specification back in 2014. The goal was simple, to entitle React developers to use Material Design. 

The React community is excited about new features, so the MUI team keeps adding them.

Over 2200 developers helping hand to [contribute](https://github.com/mui-org/material-ui/graphs/contributors) so far with an aim to build the customer-facing application, tools, and mobile-hybrid apps. Now React Material-UI is the best react component library out there in market.

This post is based upon Material-UI turns to MUI, here I am going to use the **MUI** term for upcoming sections.

####**A Larger Focus in mind**
Material-UI had a [survey](https://mui.com/blog/2020-developer-survey-results/#comparison-with-last-year) last year about improving the Material Design, implementation was down by 60%. At the same time, 5x more developers were struggling with customizing the components.

Based upon that context MUI v5 in 2019. The primary focus was to give a new and improved focus on DX(Developer Experience). The new [v5.0.0](https://mui.com/blog/2020-developer-survey-results/#comparison-with-last-year) release has new initiatives that broaden the MUI horizon.

MUI organization's goal is to become the most effective tool to build UIs while making access to as many as possible.

###**What’s new in MUI?**
Let’s jump into the brand new MUI. Many people combine or synonym Material-UI with Google. But the both Google’s Material Design and Material-UI is identical to each other.

![mui-new-component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zr98vibbg5ztsjszmmf.gif)

#####**New Name**
Material-UI is now MUI. It stands for **M**aterial to build **UI**s.
It is quite shorter. Many people already used it for pronouncing Material-UI.

#####**New Domain Name**
Moved from https://material-ui.com to https://mui.com. Its very easy to type and to find a mui.com on internet.

#####**New Logos**
The new MUI logo is quite the same as an older one. They removed the 3D perspective and keep it simple as possible to adhere to the new brand identity. 

![mui-new-logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b112ak3inb4pmdspenky.png)

#####**New Package Names**
This is a breaking change - The package names have changed in MUI v5. The npm name moved from @material-ui to [@mui](https://www.npmjs.com/org/mui). For more details, you may see the release notes.

#####**New Website & Documentation**
I must say, the new Documentation helper guide is mindblowing. MUI team really understands the pain points of their developers. Sections like Getting started, components, API, customization, how-to guides, and styles are completely restructured. Also, they integrated Algolia search which is helpful to find any search term. 

You’ll find a completely different theme from Material Design with having new typefaces, colors, box-shadows with powerful theming features of v5.

![mui-documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiyseryja1wfvlin9cnq.png)

#####**Color Palette**
Following is the new color palette of the MUI brand.

![mui-color-palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv35kxn6yphwyi0aj11o.png)

#####**MUI Core v5.0**
[Introducing](https://mui.com/blog/mui-core-v5/) MUI core v5.0. Over 400 days of development and 40+ releases, MUI team introduce MUI core v5.0.0!

![introducing-mui-v5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aacl24hz56exx34ohaj4.png)

[MUI Core](https://mui.com/core/) is made for reusable, accessible UI components that you can combine to build your own website or web app. The components are free and also open-source, so you can edit them to fit your design system perfectly.

![mui-core](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6osz5arftfmk5cyhkye.gif)

#####**Features**
Component library having 40+ building blocks covering Button, Text Field, Table, and lots more.
Custom Theming - Start by defining your ideal design system, then build towards that goal.
Styling - CSS utility classes provide an easy way to add styling for common use cases.
[image]

#####**MUI X**
[MUI X](https://mui.com/x/) is the premium product of MUI. Using the most powerful Data Grid on the market, you'll be able to build complex applications. 
The MUI X package makes it possible for apps to have complex use-cases that are supported by several advanced components.

 - Data Grid
 - Date Picker
 - Tree View
 - Sparkline Chart
 - Charts

The MUI Data Grid is a data table powerhouse. It comes with a multitude of features that make working with lots of data more efficient. From Editing to filtering MUI X is available for both Free and Premium plans of MUI.

Follow the MUI X [roadmap](https://github.com/mui-org/material-ui-x/projects/1) for future updates.

![mui-x](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tr85n29yhh2xm4946ahn.png)

#####**All New MUI Store**
Find your desired premium MUI [template](https://mui.com/store) in different categories like landing pages, Dashboard Templates and, E-commerce Templates.

The fun fact is the MUI store collection has an average of 4.5 ratings with hand-tested by the MUI team.

![mui-store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b68evu3ntfgy69vojhoz.png)

#####**Design Kits**
MUI [Design Kits](https://mui.com/design-kits/) is now in your favorite design tools - Sketch, Figma, and XD. 

Pick your favorite design tool, whether it's XD, Figma, or Sketch, to enjoy and use MUI components. Boost consistency and facilitate communication when working with developers.

Designing with the same library will make development easier because you'll understand how it works, no matter you are Designers, Product Managers, or Developers you will surely love the MUI Design kits.

![mui-designkits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zlgouud69fdyrk5ehvk.png)

###**The Team behind MUI**
Most of MUI's core contributors are volunteers, and without the support of the community, MUI wouldn't be able to exist. There are a lot of professionals from different countries contributing to the MUI project.

Here is Core [Team](https://mui.com/about/)

![mui-team](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ils9y3g96n06bc4gb2d0.png)

###**How to support MUI?**
You can support MUI via three different channels
 - Give them [feedback](https://github.com/mui-org/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc)
 - Answer questions on [Stackoverflow](https://stackoverflow.com/questions/tagged/material-ui)
 - Support them Financially via [Open collective](https://opencollective.com/material-ui)

###**Showcase**
You can find some of the [public](https://mui.com/discover-more/showcase/) apps using MUI. The websites included there have the following dimensions
 - Non-Material Design Customization
 - High Traffic
 - Open Source

###**Open Source React MUI Templates**
 - [Berry Free](https://material-ui.com/store/items/berry-react-material-admin-free/) React Admin Dashboard
 - [Minimal](https://material-ui.com/store/items/minimal-dashboard-free/)
 - [Devias](https://material-ui.com/store/items/devias-kit/)

###**Premium React Material MUI Templates**
You can find the top 10 react material-ui admin templates in my other [post](https://dev.to/rakesh_nakrani/10-best-react-material-ui-admin-template-51ob). But here I’m list few of popular templates.
 - [Berry](https://material-ui.com/store/items/berry-react-material-admin/) React Dashboard Template
 - [Flexy](https://material-ui.com/store/items/flexy-react-admin-dashboard/) React
 - [Material App Pro](https://material-ui.com/store/items/material-app/)

**For the full blog post that this is based on, jump to: https://mui.com/blog/material-ui-is-now-mui/**