DEV Community

Cover image for Should one need a UI Component library in 2022?
Sadeedpv
Sadeedpv

Posted on • Updated on

Should one need a UI Component library in 2022?

If you are looking for a component library for your next project, there are tons of options for you like Material UI, Chakra UI.etc. I have used CSS frameworks like Bootstrap, shoelace.js.etc. But, do you really need a CSS framework in 2022?

What do you think? πŸ‘‡πŸ‘‡

Discussion (18)

Collapse
suchintan profile image
SUCHINTAN DAS

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 ✌.

Collapse
sadeedpv profile image
Sadeedpv Author

Couldn't agree more πŸ™Œ

Collapse
supportic profile image
Supportic

If you stay true to your css structure it's far more easier designing everything by yourself. Most experience in structuring I gained by looking through code of other frameworks and adapt suitable improvments for me.

Collapse
suchintan profile image
SUCHINTAN DAS

Right Supportic. It takes time for developers to understand this but as someone dig deeper into web development they understand this fact πŸ‘.

Collapse
perssondennis profile image
Dennis Persson

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.

Collapse
sadeedpv profile image
Sadeedpv Author • Edited on

I do it all the time. Most of the time, when I install a component library, I do so for a single component or two πŸ˜„. Even though I am decent enough with css grid flexbox and layout system, I don't believe in my design skills yet. Most of the time, I do the layout myself, and use a prebuilt component library.

Collapse
gabrielpedroza profile image
Gabriel Pedroza

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.

Collapse
sadeedpv profile image
Sadeedpv Author

sass is a brilliant tool to use πŸš€.

Collapse
michaelmangial1 profile image
Michael Mangialardi

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!

Collapse
redbar0n profile image
Magne

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.

Collapse
sadeedpv profile image
Sadeedpv Author

I will definitely check this one out ✨

Collapse
unsungnovelty profile image
Nikhil • Edited on

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.

Collapse
mrzer0 profile image
Yan Naing (ရန်နိင်)

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.

Collapse
andrewbaisden profile image
Andrew Baisden

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.

Collapse
brense profile image
Rense Bakker

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.

Collapse
chismo950 profile image
chismo950

mui is very convinent

Collapse
lexlohr profile image
Alex Lohr

The larger and more diverse your team is, the better a fit are component frameworks, because they partially normalize the lack of design/styling skills.

Collapse
samoramabuya profile image
Samora Mabuya

If using any of these component libraries means reducing the development time immensely than go for it. Time is money, and clients don't care how you get the job done.