First, lets talk about hardships of dealing with UI.

Functionality

Lets say you need dropdown in a dropdown.
First, you need to implement that logically, without thinking about any UI aspect.

After implementing functionality, you will realize another problem arises:

Accessibility

Every user can use all functionalities.
There can be:
- Disabled users
- Keyboard only users,
- Users who use assistive technologies like screen reader.
Your dropdown component should support keyboard navigation.

This one is hard to do...

Responsiveness

You have to respect device diversity. Some users will be using mobile devices.

Maintainability (The O in SOLID)

Don't underestimate it! Its hard to do, since supporting all these functionalities with all accessibility features

Uniqueness

Don't you think that all MaterialUI just look the same? Or is this a "professional deformation?

Theming

For example, dark mode

Then, lets talk about how to ease these hardships.

TYPES OF UI LIBRARIES

Style Systems

These are libraries that only helps with styling, they don't provide behavioral, functional solutions.

Examples: DaisyUI, Bootstrap, TailwindUI

Style + Behavioral

MaterialUI, Mantine

Cons: They are mostly opinionated.
What if you need:
- Extra functionalities for a component
- Unique look for your components

Behavioral (Headless Components)

These are well tested on multiple browsers, platforms and devices.
You can render and style them however you like.

This isolation is important. Its as important as using a workshop environment like storybook.

In my earlier post, I mentioned about Sanity Headless CMS. It was isolating my concerns.

CSS Helpers

These only ease the implementation of CSS

Examples: TailwindCSS, Sass

Conclusion

There's no need to say that there's no silver bullet.
Now you know which is best for which situation, its better than picking blindly.

Thats being said, Im using tailwindCSS ( I am really addicted to it.) DaisyUI for styling sometimes, and HeadlessUI whenever I can.

At least, I advise you to use Headless Components. Since it comes without any drawbacks. Helps with accessibility for users, isolation for your precious brain.