New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[blog] Introducing MUI Base #33778
Merged
Merged
[blog] Introducing MUI Base #33778
Changes from all commits
Commits
Show all changes
29 commits
Select commit
Hold shift + click to select a range
dba2e55
Document outline
michaldudak f908780
First draft
michaldudak d7a4442
Prettier
michaldudak 70e2552
Enhance the introduction
michaldudak 70a4287
Punctuation
michaldudak c7b481d
Add an image and code sample
michaldudak 4cacd4e
Link to Base docs
michaldudak 3912381
Prettier
michaldudak fc89d62
Make the image prettier
michaldudak e91896e
Update docs/pages/blog/introducing-mui-base.md
michaldudak 7c72379
Apply suggestions from code review
michaldudak 44e4fcd
More corrections
michaldudak d679379
Merge remote-tracking branch 'upstream/master' into blog/introducing-…
michaldudak 4d9561d
add blog images and social card
danilo-leal 2d384a5
Update the title
michaldudak 45f0d76
Fix JSX
oliviertassinari a4a28ab
Apply suggestions from code review
michaldudak d674d92
Merge branch 'master' into blog/introducing-base
michaldudak 7905d8f
Add the Why MUI Base section
michaldudak 4991788
Apply suggestions from code review
michaldudak eb8bab8
Update docs/pages/blog/introducing-mui-base.md
michaldudak e70218f
Merge remote-tracking branch 'upstream/master' into blog/introducing-…
michaldudak c8f05ca
Update the publish date
michaldudak c163b9f
Add live demo and explain advantages of using Base
michaldudak 9c1cb08
Update docs/pages/blog/introducing-mui-base.md
michaldudak 6243a03
Add docs link
michaldudak feb9724
Update the publish date
michaldudak 5299fe1
Merge remote-tracking branch 'upstream/master' into blog/introducing-…
michaldudak b88ea82
Merge remote-tracking branch 'upstream/master' into blog/introducing-…
michaldudak File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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 './introducing-mui-base.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,116 @@ | ||
--- | ||
title: 'Introducing MUI Base: the headless alternative to Material UI' | ||
description: The MUI Base component library gives you complete control over the look and feel of your app. | ||
date: 2022-09-07T00:00:00.000Z | ||
authors: ['michaldudak', 'samuelsycamore'] | ||
tags: ['News', 'MUI Core'] | ||
card: true | ||
--- | ||
|
||
<img src="/static/blog/introducing-mui-base/hero-image.png" style="width: 692px; aspect-ratio: 132/61; margin-bottom: 24px;" alt="Demo components built with MUI Base, a newly introduced library of unstyled components and hooks" /> | ||
|
||
While Material UI is excellent for building sleek user interfaces that adhere closely to Material Design, it can become unwieldy when your design system diverges significantly from the defaults. | ||
We get it. | ||
We've all been there. | ||
|
||
That's why we're building an entirely new library of headless React UI components and hooks called **MUI Base**—to give you complete control over the look and feel of your user interface, with no defaults to override. | ||
|
||
MUI Base is easy to pick up if you're already familiar with Material UI, as the APIs are very similar—indeed, they were designed to be complementary to one another. | ||
Start from scratch with MUI Base, or use Material UI for rapid prototyping, and then switch to MUI Base when you need more customization options. | ||
|
||
## Why MUI Base? | ||
|
||
MUI Base was created to serve a different set of needs than those addressed by Material UI. | ||
Material UI shines at providing you with the means to quickly create user interfaces that look close to the Material Design specification. | ||
MUI Base, on the other hand, prioritizes customizability over the speed of development. | ||
This makes it better suited for public-facing projects where pixel-perfect implementation is crucial. | ||
|
||
So, why not use any of the headless libraries already present on the market instead? | ||
There are other alternatives like Headless UI, Radix UI, and React Aria, to name a few. | ||
MUI Base's significant advantage is that it takes the best parts from Material UI, which is a complete, mature library. | ||
michaldudak marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we expand here on why this is really important? For example we are sure that MUI Base already solves all the problems that were previously reported in the corresponding Material UI components. |
||
It is free from many of the issues that have been reported and fixed in Material UI. | ||
Also, many of the improvements to Material UI proposed by the community over the years are included in MUI Base. | ||
|
||
While they were created for different use cases, these two libraries share many common features and design patterns, and are intended to be complementary to one another within the MUI ecosystem. | ||
MUI Base's API will be familiar to you if you've used Material UI before, making it easy to migrate a project—or just a part of it—from one library to the other if needed. | ||
We aim to create [unstyled versions of all Material UI components](https://github.com/mui/material-ui/issues/27170) (that make sense to do so). | ||
|
||
## Components and hooks | ||
|
||
MUI Base offers two kinds of building blocks: unstyled components and hooks. | ||
|
||
Components are more straightforward to use of the two. | ||
Place a component on a page, add your own styles, and it's ready to go! | ||
It's important to note that you are not limited to the styling options available in Material UI. | ||
You can, of course, still use [MUI System](https://mui.com/system/](https://mui.com/system/getting-started/overview/), but if you prefer Emotion, Tailwind CSS, plain CSS, or any other styling engine, they are available too! | ||
Check out the [Working with Tailwind CSS guide](/base/guides/working-with-tailwind-css/) for an example of using this library. | ||
|
||
In contrast to Material UI, MUI Base's components do not have any default styles. | ||
They provide functionality and structure, while designers and developers are responsible for the visuals. | ||
|
||
Each unstyled component lets you modify or override its _slots_—smaller subcomponents representing the interior elements that comprise the component's DOM structure. | ||
For example, a `SwitchUnstyled` contains the root, thumb, input, and track slots. | ||
You can control props passed to each of these slots (including `className`) based on the component's state, and even replace the default slot components with your own. | ||
|
||
<img src="/static/blog/introducing-mui-base/switch-slots.png" style="width: 692px; aspect-ratio: 173/80; margin-bottom: 24px;" loading="lazy" alt="Depiction of SwitchUnstyled components' slots" /> | ||
|
||
See how it works on the live demo: | ||
|
||
<iframe src="https://codesandbox.io/embed/mui-base-switch-overview-frsm5f?fontsize=12&hidenavigation=1&module=%2Fsrc%2FMySwitch.tsx&theme=dark" | ||
style="width:100%; height:350px; border:0; border-radius: 10px; overflow:hidden; margin-bottom: 24px" | ||
title="MUI Base Switch overview" | ||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" | ||
></iframe> | ||
|
||
Hooks take this one step further by extracting the logic from the structure entirely, so you can build from scratch using any DOM elements you need. | ||
This requires more work to implement but gives you the most freedom to customize. | ||
|
||
Upon calling, a hook returns an object describing the component's state (i.e., whether the switch is turned on), along with methods that apply accessibility props and event handlers. | ||
oliviertassinari marked this conversation as resolved.
Show resolved
Hide resolved
|
||
You should spread these props on the components you've defined, as shown below: | ||
|
||
```tsx | ||
function MySwitch(props: UseSwitchParameters) { | ||
const { getInputProps, checked, disabled } = useSwitch(props); | ||
|
||
return ( | ||
<span className={clsx('root', { checked, disabled })}> | ||
<span className="thumb" /> | ||
<input className="input" {...getInputProps()} /> | ||
</span> | ||
); | ||
} | ||
``` | ||
|
||
## What's included | ||
|
||
The initial version of the library contains 17 components. | ||
Check out the [MUI Base documentation](/base/getting-started/overview/) for details. | ||
|
||
You can track our progress in adding new components—and comment to influence our priorities—in [this dedicated GitHub issue](https://github.com/mui/material-ui/issues/27170). | ||
|
||
The @mui/base package is released as an alpha. | ||
This means the component APIs are subject to change—especially as we receive feedback from the community about room for improvement. | ||
However, we believe the library is solid enough at this point to start building design systems with it. | ||
In fact, we're using MUI Base to create [Joy UI](/blog/first-look-at-joy/)—the next product we'll be launching in our line of Core component libraries that also includes Material UI. | ||
In the future, MUI Base will also be used as the foundation for Material UI components to provide a consistent developer experience across our entire suite of products. | ||
|
||
## Feedback needed | ||
|
||
Give MUI Base a try today by installing the package via npm: | ||
|
||
```sh | ||
npm install @mui/base | ||
``` | ||
|
||
or yarn: | ||
|
||
```sh | ||
yarn add @mui/base | ||
``` | ||
|
||
Chek out [the docs](/base/getting-started/overview/), play with the components, and be sure to let us know what you think! | ||
|
||
If you find any bugs or want to share ideas for improvements, please don't hesitate to open an issue in the [MUI Core repository on GitHub](https://github.com/mui/material-ui/issues/new/choose). | ||
Be sure to include "[base]" in the issue title to help us keep things organized. | ||
|
||
**Happy creating!** |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One thing that I experienced while reading the blog post was: OK, I'm sold, where do I find these components? It was a bit challenging, I was expecting to find something at the bottom, but didn't. Developers have to find this link:
This got me wondering if would make sense to turn this image into a link, as part of making it easier.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMO having a hero image link to the docs isn't something I'd expect as a reader. I'll add a link near the bottom of the page instead.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I'm not sure that I would expect it, but I did catch myself trying it out as "maybe" 😁.
Tailwind's blog has most of its images with a link, e.g. https://tailwindcss.com/blog/2022-08-17-tailwind-framer-motion-template-and-tailwind-jobs#tailwind-jobs, same goes for Bootstrap, e.g. https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/#css-grid.