DEV Community

Cover image for Material-UI is now MUI
Rakesh S Nakrani
Rakesh S Nakrani

Posted on • Updated on

Material-UI is now MUI

What is Material-UI (MUI React)?

Do you know React.js? If yes, then you surely know Material-UI - One of the popular React component library. I must say Material-UI is the top 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 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 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.

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

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

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

Color Palette

Following is the new color palette of the MUI brand.

mui-color-palette

MUI Core v5.0

Introducing MUI core v5.0. Over 400 days of development and 40+ releases, MUI team introduce MUI core v5.0.0!

introducing-mui-v5

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.

mui-core

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.

mui-x

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.

mui-store

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.

mui-designkits

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

mui-team

How to support MUI?

You can support MUI via three different channels

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

Premium React Material MUI Templates

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

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

Discussion (14)

Collapse
manoharreddyporeddy profile image
Manohar Reddy Poreddy

Thank you for the history & very detailed post.

Collapse
rakesh_nakrani profile image
Rakesh S Nakrani Author

Your welcome :)

Collapse
sm0ke profile image
Sm0ke

🚀🚀

Collapse
mbrookes profile image
Matt

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

Collapse
martinrojas profile image
martin rojas

This had fallen off my radar, but I love this library. Will have to check it out.

Collapse
raibtoffoletto profile image
Raí B. Toffoletto

I've been working with Material UI for the past year to develop our company's design system. Now v5 is out I can't wait to update it using the new version as base.

Collapse
wpsyed profile image
Syed Saadullah Shah

ughhhhhhhhhhh

Collapse
ramdaniali profile image
Bifrost

Is it ready for production ? I think that v5 Is still now as a prerelease

Collapse
raibtoffoletto profile image
Raí B. Toffoletto

Just launched.

Collapse
rakesh_nakrani profile image
Rakesh S Nakrani Author

v5 is launched.

Collapse
ky1e_s profile image
Kyle Stephens

The documentation looks amazing.

Are you using a particular system to present them?

Collapse
rakesh_nakrani profile image
Rakesh S Nakrani Author

Yes, Documentation looks promising. Also, there is no any framework behind it. It all custom made.

Collapse
georgeappiah profile image
George Appiah

Wow... 24-yo 3-letter .com domain!

That must have easily cost them 5 figures!

Collapse
rakesh_nakrani profile image
Rakesh S Nakrani Author

:)