[blog] Introducing MUI Base

[michaldudak]

Here grows the blog post with the MUI Base announcement.

Preview: https://deploy-preview-33778--material-ui.netlify.app/blog/introducing-mui-base/

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against b88ea82

[samuelsycamore]

This is a great introduction to MUI Base @michaldudak! I especially like how you describe components and slots here—very well put.

I have just a couple big-picture notes:

1. Is there a way that we can describe, exactly, what MUI Base is in a sentence or two? The introduction makes a lot of implications about what it is, but we never really get one singular concise description of it. We could draw from the Overview page in the docs for this.
2. The introduction offers some hints at the primary pain point that MUI Base aims to address. How can we translate this into a headline and tagline that will resonate with our target audience? (And who is the target audience here?)
3. The conclusion needs (no more than) one specific call to action for the reader. What is the one thing we want them to do after reading this post? Try out MUI Base and give feedback? Show us what you're building? Help us prioritize the roadmap for adding new components? I think we should pick one of these.

[michaldudak]

How can we translate this into a headline and tagline that will resonate with our target audience? (And who is the target audience here?)

The target audience is the developers who have used and know Material UI and need to build something more custom. Could the tagline be "easily build custom design systems with MUI-powered components"? TBH I'm open for ideas here :)

The conclusion needs (no more than) one specific call to action for the reader.

I think the most important part is getting feedback. But do you think we should drop the other two? Or just move them somewhere else?

Generally, if you see any room for improvement, feel free to edit this PR directly.

[oliviertassinari]

It looks great.

As a side note, I felt that it was quick to read. I wonder if our audience wouldn't want to have access to more details, hence my question: Would it make sense to give more depth of content for this blog post? For benchmark: https://twitter.com/colmtuite/status/1339227861505466369, https://tailwindcss.com/blog/headless-ui-unstyled-accessible-ui-components, https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html. Ideas for more content:

• A live demo, e.g. inlined in an iframe with codesandbox
• Why not use react-aria, radix-ui, etc.? Maybe the answer is along the line: it would be a major BCs for our users that are used to Material UI, and looking for scaling their design system from there:
• Other ideas for what developers might want to know?

[michaldudak]

I've added a "Why MUI Base" section that (hopefully) explains when the library should be used. I'd appreciate if @samuelsycamore could take a look at it.

As for having more in-depth content - I'd rather point to the docs than explain the concepts here. It will be more future-proof (the documentation is more "live" and frequently updated).

[mnajdova]

Left just two small comments. It looks 🤩

[mnajdova]

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.

[oliviertassinari]

It looks great 👍

[oliviertassinari]

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.

Suggested change

	<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" />
	<a href="/base/getting-started/installation/">
	<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" />
	</a>

[michaldudak]

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.

[oliviertassinari]

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.

[michaldudak]

@mui/core Can I please have a green check mark if everything's OK? :)

[samuelsycamore]

LGTM!

[danilo-leal]

Looking awesome!