-
-
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.
[blog] Introducing MUI Core v5.0 (#27912)
- Loading branch information
1 parent
ffabc89
commit 84eab8c
Showing
40 changed files
with
987 additions
and
67 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
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
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,114 @@ | ||
| --- | ||
| 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-16T00:00:00.000Z | ||
| authors: ['oliviertassinari', 'danilo-leal', 'mbrookes'] | ||
| card: true | ||
| --- | ||
|
|
||
| <img src="/static/blog/material-ui-is-now-mui/intro.png" alt="The new MUI logo" style="width: 100%; margin-bottom: 16px;" /> | ||
|
|
||
| Starting today we are evolving our brand identity to 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 set of foundational MIT React components 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). | ||
|
|
||
| Our previous name was no longer serving our areas of focus. | ||
| We have grown our product offering. | ||
| We needed a new identity to match our increased scope. | ||
|
|
||
| ## 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 the Material Design guidelines in 2014. | ||
| The goal was simple, to empower 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 made it easy for the community to contribute and started actively reviewing pull requests and guiding issues. | ||
| Over 2,200 developers have cared enough about our mission to contribute, so far. | ||
| 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, but didn't have the bandwidth to rebuild legacy interfaces from scratch, | ||
| so before we knew it, we had grown into the most popular React UI component library. | ||
| The components were heavily used and customized to build customer-facing applications, internal tools, and mobile-hybrid apps. | ||
|
|
||
| ## A larger focus | ||
|
|
||
| In our last survey, the number of developers that commented about improving the Material Design implementation was down by [60%](/blog/2020-developer-survey-results/#comparison-with-last-year) compared to the year before. | ||
| At the same time, 5X more developers were struggling to customize the components. | ||
|
|
||
| It was based on this context that we started work on v5 in 2019. | ||
| Our primary focus was to revamp the **customization Developer Experience (DX)**. | ||
| It had become clear that design (aesthetic, UX) and DX were key to unlocking the next stage of growth. | ||
|
|
||
| The new brand supports the v5.0.0 release while also creating space for new initiatives that broaden the company horizon. It's a big deal! | ||
|
|
||
| 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 | ||
| as we have seen too many people confusing Material-UI with Google, or as a synonym of Material Design. | ||
|
|
||
| We are now called **MUI**. It stands for **M**aterial to build **UI**s | ||
| and is pronounced [/ɛm juː aɪ/](http://ipa-reader.xyz/?text=%C9%9Bmju%CB%90a%C9%AA). | ||
|
|
||
| It's shorter, it distinguishes us, and it's familiar – many people already used it for abbreviating Material-UI. | ||
| More importantly, it allows for the release of products not directly coupled to Material Design, such as an unstyled/headless version of the components, a brand new second design system as an alternative to MD, and more ambitious initiatives. | ||
|
|
||
| ### A new domain name | ||
|
|
||
| A new name wouldn't be so official without a new domain, | ||
| so we have moved home from https://material-ui.com/ to https://mui.com/, a very easy to type (and find) domain. | ||
|
|
||
| ### New logos | ||
|
|
||
| We've tightened up the company logo to match the new brand. | ||
|
|
||
| It's basically the same, to keep it familiar – | ||
| we're keeping the geometrical shape, to resonate with the _building blocks_ idea of the components – | ||
| however, we're reducing the emphasis on the 3D perspective, stepping away from the notion of elevation that Material Design coined. | ||
|
|
||
| <img loading="lazy" src="/static/blog/material-ui-is-now-mui/old-new.png" alt="Side-by-side of the new and old logo" style="width: 612px; margin-bottom: 16px;" /> | ||
|
|
||
| To better identify, market, and promote each product, we're introducing logos for each one of them. | ||
|
|
||
| <img loading="lazy" src="/static/blog/material-ui-is-now-mui/products.png" alt="Logos for MUI Core, MUI X and Templates" style="width: 600px; margin-bottom: 16px;" /> | ||
|
|
||
| - **MUI Core** contains ready-to-use, free forever, foundational components. | ||
| - **MUI X** includes advanced and powerful components for complex use-cases. | ||
| - **Templates** is a collection of fully built, out-of-the-box, React templates for your application. They are developed by the community curated by us for quality. | ||
|
|
||
| ### New package names | ||
|
|
||
| The package names have changed in v5, which is a **breaking change**. | ||
| You can find more details in the [release](https://github.com/mui-org/material-ui/releases/tag/v5.0.0) [notes](https://github.com/mui-org/material-ui-x/releases/tag/v4.0.0). | ||
| The npm organization name (scope) has moved from @material-ui to [@mui](https://www.npmjs.com/org/mui). | ||
|
|
||
| ### A new website & documentation | ||
|
|
||
| Lastly, to celebrate the start of a new chapter for the company with the release of v5.0.0, and new products in the making, we're introducing a brand new website and documentation design. | ||
|
|
||
| You'll find a completely different theme from Material Design – new typeface, colors, box-shadows, and more, | ||
| all done using the flexible theming features of v5. | ||
|
|
||
| <img loading="lazy" src="/static/blog/material-ui-is-now-mui/palette.png" alt="Selection of the new color palette and gradients" style="width: 600px; margin-bottom: 16px;" /> | ||
|
|
||
| <p class="blog-description">The color palette of our brand.</p> | ||
|
|
||
| [Head to the new website](/). | ||
|
|
||
| > Note that these changes do **not** impact the design of the components released under the `@mui/*` npm packages. | ||
| ## The path ahead | ||
|
|
||
| There are many more exciting things to come in the future as we roll into this new chapter. | ||
| We're grateful to have you with us, supporting the library, and helping it grow and mature. | ||
|
|
||
| Material Design will continue to be supported with the same attention to detail as before. | ||
| We aim to keep serving those who like the library for closely following MD, while also leveraging the strong foundation built so far to offer new components, designs, and products. | ||
|
|
||
| We hope you like it. Happy building! |
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 './mui-core-v5.md?@mui/markdown'; | ||
|
|
||
| export default function Page() { | ||
| return <TopLayoutBlog docs={docs} />; | ||
| } |
Oops, something went wrong.