Material-UI is now MUI

What is Material-UI (MUI React)?

Do you know React.js? If yes, then 90% chance you know the Material-UI is a popular React component library. I must say Material-UI is the top general-purpose library out there in the market. It follows Googles material design guidelines, components, and tools to make web applications faster.

The origin

Material-UI started as a React Implementation of Googles 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 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 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 release has new initiatives that broaden the MUI horizon.

MUIs goal is to become the most effective tool to build UIs while making access to many as possible.

Whats new in MUI?

Lets jump into the brand new MUI. Many people combine or synonym Material-UI with Google. That is super great. But the both Googles Material Design and Material-UI is identical to each other.

New Name

Material-UI is now MUI. It stands for Material to build UIs.
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 a very easy to type and find a domain.

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.

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. 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. Mind-blowing sections like Getting started, components, API, customization, how-to guides, and styles are completely restructured and aim to ease finding each detail through Algolia search.

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

Color Palette

Following is the new color palette of the MUI brand.

MUI Core

MUI 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.

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 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 for future updates.

All New MUI Store

Find your desired premium MUI template 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.

Design Kits

MUI 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.
[image]

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

How to support MUI?

You can support MUI via three different channels

• Give them feedback
• Answer questions on Stackoverflow
• Support them Financially via Open collective

Showcase

You can find some of the public 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 React Admin Dashboard
• Minimal

Premium React Material MUI Templates

You can find the top 10 react material-ui admin templates in my other post. But here Im list few of popular templates.

• Berry React Dashboard Template
• Flexy React
• Material App Pro