Material UI --> Base UI

[mkoskim]

Material UI (MUI)

What is MUI?

Material UI:

https://mui.com/material-ui/

MUI (Material UI) is an industry-standard React UI framework.

Why I started using MUI?

MUI is shipped with nice set of icons and I wanted to use them.

https://mui.com/material-ui/material-icons/

To use them, you need to include @mui/material-icons to your project. It is dependent on @mui/material, which is dependent on Emotion packages. So, if you want Material icons, you get the Material UI as a side effect.

Problem

MUI is great, yes, but it is also made for certain purposes. Compared to general web applications, MaweJS is quite simple in many fronts and complex in others, and it does not have to work in mobile phones. MUI works best if you are fine with the components and look'n'feel as they are.

Tailoring MUI is not easy. You will spend countless hours to figure out, if it is better to make the tailoring inside CSS, themes, styled elements or so. You need to be very familiar with the MUI class names and the way it outputs HTML elements.

My Need

What I tried to achieve with MUI was "container aware" UI elements. That means, that a button or input knows that it is added to a toolbar, and it will size it so that it does not break toolbars. Making this happen with MUI was ridiculously difficult. MUI assumes that you give properties to the element (like size, or with sx, or with theme, or with style, or with CSS) that the element knows how it should look.

Base-UI

Base-UI:

https://base-ui.com/

Base-UI is one of the unstyled UI libraries, like Radix. It means that it implements only the component functions, not their styles. Thus I can put styles in CSS files, and I can achieve the result I was wishing for - get components that are aware of their container. That way a button in a tool bar and button in dialog actions area can have different look.

What it really means?

Material UI comes with ready-made styles. Base-UI does not. That means that are the styling needs to be done.

Material UI comes with ready-made icons. Base-UI does not. That means that icons need to be brought in as SVG images by hand.

On the other hand, Base-UI comes with cleaner solution for popup-like elements (menus, tooltips, dialogs and so on). It also decreases the number of packages and dependencies considerably, and speeds up building times.