Should one need a UI Component library in 2022?

In my preference we actually don't need any css frameworks in today's date. The reason being that we have a lot of websites in today's date which provides prebuild elements with html and css which a developer can use to hack through some repetitive process. And in terms of performance always CSS would always beat all others 👨‍💻.

And let you assure you that a engineer needs a good sense of design knowledge and working with CSS would improve it in time . So future developers would be able to make amazing looking websites in a quick and clean way ✌.

CSS frameworks are a matter of scaling. Huge project with plenty of people involved absolutely need it. A portfolio maintained by a single person definitely don't need it.

Still, there are a lot of reasons to use it even when you don't need it. Most people are decent, but not good, at CSS. Writing custom CSS therefore quickly escalates to a mess. Sticking to a UI library can very often save you from that.

Anyhow, if you only plan to use a single or a few components from a library, you're probably better off without it, IF you know how to write the compontent so it works well.

It depends on the person really. I personally use a css pre-processor (sass) to write my code and since I've recently started to create projects using nextjs, I don't really want to overload the js files if I use something like tailwind so using sass modules is ideal afaik in that specific scenario.

Is this for your company and not a side project? If so, does your company have a design system?

Assuming your answering is "yes" to both of these questions, then there are several things to unpack.

First, what is Material UI (and the like)? Material UI is a very generic design system that encapsulates behavior of common UI components with the look and feel of Google's Material Design.

Since your company has it's own look and feel in a design system, you don't want to use Material UI for the purpose of getting its look and feel via its components.

Rather, you are interested in using something like Material UI as a quicker way to have UI components with certain behaviors already implemented, saving you time from writing the components from scratch.

In other words, you want headless or unstyled UI components.

It seems that the design system community has begun to realize the use of a headless UI library, and so, we've seen things like Headless UI and MUI Base.

I believe this is a positive moment, and it would be a great idea to leverage these libraries, skinning them with your own design system's theme (preferrably with design tokens).

Second, once it has been established that unstyled libraries are useful to leverage (or styled libraries with all the styles manually removed), the next question is: how do you leverage them?

My recommendation is to create a separate library with your own design system's UI components (and assets), and then you can wrap the "base", unstyled UI components, encapusulating your own styles and default behavior as needed (as well as any normalization of the prop signature to match the lingo of your company's design system).

Third, if you exporting UI components that are wrappers around "base" ones, then you also have the liberty to cherry-pick from multiple UI libraries, taking the best of the bunch.

Hope that helps!

Yes. tamagui.dev is the best of all worlds: fully cross platform, compiles out CSS with media queries on web, gives a RadixUI style of ARIA compliant base components to build on, provides some components you can use wholesale, or customize at will, using a Tailwind inspired API.

Component based libraries are for the 80% use cases. Like a normal open source website page or projects which are trivial enough that it doesn't need a highly customised website.

The rest still needs CSS or Tailwind CSS which is utility class based.

It's a mix of both. Never one sided.

I usually write my own css for most of my personal/individual projects. Because using frameworks and component libraries make me feel strict. Additionally, they provides tons of code which I don't use.

But for those projects which need to be handled by multiple developers, I prefer using frameworks or libraries.

Personally, I prefer to write plain CSS however there can be use cases for having a CSS framework. Like if you are working in a company that wants to enforce HTML and CSS standards across a project. It is far easier to adhere to the principles and classes in a CSS framework than it is to get all your developers to follow the exact same style.

CSS frameworks nay, component libraries yay! Most component libraries today include some way of doing CSS-in-js. For example Mui components ship with an sx prop that you can use.

mui is very convinent