Skip to content

Commit 7e9bf56

Browse files
[blog] Consistent Base UI terminology (#45342)
Co-authored-by: Olivier Tassinari <[email protected]>
1 parent e298810 commit 7e9bf56

File tree

3 files changed

+19
-19
lines changed

3 files changed

+19
-19
lines changed

docs/pages/blog/introducing-base-ui.md

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
11
---
2-
title: 'Introducing Base UI: the headless alternative to Material UI'
3-
description: The Base UI component library gives you complete control over the look and feel of your app.
2+
title: 'Introducing MUI Base: the headless alternative to Material UI'
3+
description: The MUI Base component library gives you complete control over the look and feel of your app.
44
date: 2022-09-07T00:00:00.000Z
55
authors: ['michaldudak', 'samuelsycamore']
66
tags: ['Base UI', 'Product']
77
manualCard: true
88
---
99

10-
<a href="https://mui.com/base-ui/"><img src="/static/blog/introducing-base-ui/hero-image.png" alt="Demo components built with Base UI, a newly introduced library of unstyled components and hooks" width="2400" height="1000" /></a>
10+
<a href="https://mui.com/base-ui/getting-started/"><img src="/static/blog/introducing-base-ui/hero-image.png" alt="Demo components built with MUI Base, a newly introduced library of unstyled components and hooks" width="2400" height="1000" /></a>
1111

1212
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.
1313
We get it.
1414
We've all been there.
1515

16-
That's why we're building an entirely new library of headless React UI components and hooks called **Base UI**—to give you complete control over the look and feel of your user interface, with no defaults to override.
16+
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.
1717

18-
Base UI 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.
19-
Start from scratch with Base UI, or use Material UI for rapid prototyping, and then switch to Base UI when you need more customization options.
18+
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.
19+
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.
2020

21-
## Why Base UI?
21+
## Why MUI Base?
2222

23-
Base UI was created to serve a different set of needs than those addressed by Material UI.
23+
MUI Base was created to serve a different set of needs than those addressed by Material UI.
2424
Material UI shines at providing you with the means to quickly create user interfaces that look close to the Material Design specification.
25-
Base UI, on the other hand, prioritizes customizability over the speed of development.
25+
MUI Base, on the other hand, prioritizes customizability over the speed of development.
2626
This makes it better suited for public-facing projects where pixel-perfect implementation is crucial.
2727

2828
So, why not use any of the headless libraries already present on the market instead?
2929
There are other alternatives like Headless UI, Radix Primitives, and React Aria, to name a few.
30-
Base UI's significant advantage is that it takes the best parts from Material UI, which is a complete, mature library.
30+
MUI Base's significant advantage is that it takes the best parts from Material UI, which is a complete, mature library.
3131
It is free from many of the issues that have been reported and fixed in Material UI.
32-
Also, many of the improvements to Material UI proposed by the community over the years are included in Base UI.
32+
Also, many of the improvements to Material UI proposed by the community over the years are included in MUI Base.
3333

3434
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.
35-
Base UI'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.
35+
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.
3636
We aim to create [unstyled versions of all Material UI components](https://github.com/mui/base-ui/issues/10) (that make sense to do so).
3737

3838
## Components and hooks
3939

40-
Base UI offers two kinds of building blocks: unstyled components and hooks.
40+
MUI Base offers two kinds of building blocks: unstyled components and hooks.
4141

4242
Components are more straightforward to use of the two.
4343
Place a component on a page, add your own styles, and it's ready to go!
4444
It's important to note that you are not limited to the styling options available in Material UI.
4545
You can, of course, still use [MUI System](https://mui.com/system/getting-started/), but if you prefer Emotion, Tailwind CSS, plain CSS, or any other styling engine, they are available too!
4646
Check out the [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind-css/) for an example of using this library.
4747

48-
In contrast to Material UI, Base UI's components do not have any default styles.
48+
In contrast to Material UI, MUI Base's components do not have any default styles.
4949
They provide functionality and structure, while designers and developers are responsible for the visuals.
5050

5151
Each unstyled component lets you modify or override its _slots_—smaller subcomponents representing the interior elements that comprise the component's DOM structure.
@@ -56,7 +56,7 @@ You can control props passed to each of these slots (including `className`) base
5656

5757
See how it works on the live demo:
5858

59-
<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="Base UI Switch overview" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
59+
<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"
6060
></iframe>
6161
6262
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.
@@ -81,19 +81,19 @@ function MySwitch(props: UseSwitchParameters) {
8181
## What's included
8282

8383
The initial version of the library contains 17 components.
84-
Check out the [Base UI documentation](/base-ui/getting-started/) for details.
84+
Check out the [MUI Base documentation](/base-ui/getting-started/) for details.
8585

8686
You can track our progress in adding new components—and comment to influence our priorities—in [this dedicated GitHub issue](https://github.com/mui/base-ui/issues/10).
8787

8888
The `@mui/base` package is released as an alpha.
8989
This means the component APIs are subject to change—especially as we receive feedback from the community about room for improvement.
9090
However, we believe the library is solid enough at this point to start building design systems with it.
91-
In fact, we're using Base UI 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.
92-
In the future, Base UI will also be used as the foundation for Material UI components to provide a consistent developer experience across our entire suite of products.
91+
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.
92+
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.
9393

9494
## Feedback needed
9595

96-
Give Base UI a try today by running one of the following commands:
96+
Give MUI Base a try today by running one of the following commands:
9797

9898
<codeblock storageKey="package-manager">
9999

Loading
Loading

0 commit comments

Comments
 (0)