-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a7f2632
commit 547dfcd
Showing
8 changed files
with
111 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import * as React from 'react'; | ||
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; | ||
import { docs } from './material-ui-is-now-mui.md?@mui/markdown'; | ||
|
||
export default function Page() { | ||
return <TopLayoutBlog docs={docs} />; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
--- | ||
title: Material-UI is now MUI | ||
description: Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products. | ||
date: 2021-09-15T00:00:00.000Z | ||
authors: ['oliviertassinari', 'danilo-leal', 'mbrookes'] | ||
card: true | ||
--- | ||
|
||
Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products. | ||
|
||
- Material-UI: the organization is now called [**MUI**](https://github.com/mui-org/). | ||
- Material-UI: the MIT React library is now called [**MUI Core**](https://github.com/mui-org/material-ui). | ||
- Material-UI X: the set of advanced React components is now called [**MUI X**](https://github.com/mui-org/material-ui-x). | ||
|
||
The new identity matches with the increase scope of our focus. | ||
|
||
## The origin | ||
|
||
Material-UI started as a React implementation of the Material Design guidelines in 2014. | ||
The goal was simple, to empower the React developers to use Material Design. | ||
The community [loved it](https://news.ycombinator.com/item?id=8582439) and was craving for more, so we kept building. | ||
|
||
We have made it smooth for the community to contribute. | ||
We started actively reviewing pull requests and guiding issues. | ||
Things started to really take off with [the release of v1](/blog/material-ui-v1-is-out/) in 2018. | ||
The frontend community was actively migrating to React and in desperate need to move fast. | ||
|
||
Before we realized it, we had grown into the most popular React UI components library. | ||
We were heavily used and customized to build: customer-facing applications, internal tools, and mobile-hybrid applications. | ||
|
||
## A larger focus | ||
|
||
In our last survey, [60% fewer](/blog/2020-developer-survey-results/#comparison-with-last-year) developers were complaining about improving Material Design implementation than they did a year before. | ||
At the same time, 400% more developers were struggling to customize the components. | ||
|
||
This is the context in which we started working on v5 in 2019. | ||
Our primary focus was to revamp the **customization DX**. | ||
It had become clear that design and DX were key to unlock the next stage of growth. | ||
|
||
The release of this rebranding matches with the release of v5.0.0. | ||
It's a big deal. | ||
The new branding aligns with the increase of the company's area of focus. | ||
|
||
Our ultimate goal is to become the most effective and efficient tool to build UIs while making it accessible to the many. | ||
|
||
## Our new brand | ||
|
||
Let's dig in. | ||
|
||
### A new name | ||
|
||
We are breaking the strong association with Material Design. | ||
We have seen too many people confusing Material-UI with a Google effort or a synonym of Material Design. | ||
|
||
We are now called **MUI**, it stands for **M**aterials to Build **UI**s. | ||
and is pronounced [/ɛmjuːaɪ/](http://ipa-reader.xyz/?text=%C9%9Bmju%CB%90a%C9%AA). | ||
|
||
It's shorter, it distinguishes ourselves, it's already how many people abbreviate us. | ||
More importantly, it prepares the release of unstyled/headless components, a second design system (not a theme), and more. | ||
|
||
### A new domain name | ||
|
||
A new name wouldn't resonate without a new domain name. | ||
We have moved home from https://material-ui.com/ to https://mui.com/, an 3 domain laters domain. | ||
|
||
### New logos | ||
|
||
The logo of the company is evolving: | ||
|
||
- We have reduced the emphasis on the smart 3D perspective. It's a step away from the notion of elevation in Material Design with a single color. | ||
- We have rebalanced the proportions and equilibrium of the letters. | ||
- We have added a slight border-radius to soften the angles. | ||
|
||
<img loading="lazy" src="/static/blog/material-ui-is-now-mui/old-new.png" alt="" style="width: 302px; margin-bottom: 16px;" /> | ||
|
||
We are introducing logos for each of our products: | ||
|
||
<img loading="lazy" src="/static/blog/material-ui-is-now-mui/products.png" alt="" style="width: 427px; margin-bottom: 16px;" /> | ||
|
||
### New package names | ||
|
||
The package names have changed in v5, which is a **breaking change**, you can find more details in the release notes. | ||
The npm organization name has moved from @material-ui to [@mui](https://www.npmjs.com/org/mui). | ||
|
||
### A new website & documentation | ||
|
||
We used this opportunity to tell a different story about the company and its products, positioning us in a broader space. | ||
We better explain and share what we do and who we are. | ||
We have created a custom brand identity, away from Material Design. | ||
For instance, you will find this custom color palette: | ||
|
||
<img loading="lazy" src="/static/blog/material-ui-is-now-mui/palette.png" alt="" style="width: 408px; margin-bottom: 16px;" /> | ||
|
||
[Head to the new website](/). | ||
Note that these changes are **not** impacting the design of the components released under the `@mui/material` npm package. | ||
|
||
## The path ahead | ||
|
||
Most of this update has been rolled out, we will fix inconsistencies as we spot them. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.