Posted on Sep 10 • Originally published at builder.io on Sep 10 UI Component libraries can get you up and running on a new project pretty fast. However, if you’re building a product that has a bespoke design, trying to customize the look and feel of these libraries is a grueling task and might lead to unmaintainable code.There are many UI libraries (or, as some call them, UI frameworks) to choose from, and of course, there are different libraries for different front-end frameworks. You might think that coming up on the end of 2023 the industry may have settled on one or two solutions, but it is far from reality.The truth is, as with anything in software and the web and something that I say often, that it depends…The above tweet (X?) by Ryan Florence got me thinking about this subject – not about who is to blame, because that does no good, but more about the reasons why and how we got into this situation.In this post, I’m going to give a brief overview of the styling solutions that have led us to the current ecosystem, and we’ll look at some of the more common and popular UI libraries out there.(Boot) Strap in, we’re going on a ride.Back in the day, web designers were hand-writing CSS, which, trust me, was a journey full of twists (for more on this, see CSS The Good Parts). Then the 2000s hit, bringing with them CSS frameworks like Blueprint, 960 Grid System, YUI Grids, and YAML (probably not the YAML you’re thinking of). These frameworks introduced responsive grids and clean UI elements, changing the game.Just when we thought we'd seen it all, giants like Twitter Bootstrap, Foundation, and Bulma entered the scene. They made development quick and ensured consistent styling, but the flip side? Websites began feeling a bit too...uniform.Recognizing this, the community pivoted, introducing methodologies like BEM to inject some uniqueness and modular style.Bottom line? CSS frameworks shifted from solely addressing layout needs to offering comprehensive UI toolkits. But alongside this, methodologies emerged, pushing for more tailored and modular styles.With the emergence of JavaScript frameworks such as Angular, React, and Vue, developers needed a more granular approach to correspond with these new component models.What is one of CSS’s top features (the “C” in CSS, that is the Cascade) became an issue for these new frameworks.As such, a new breed of solution was born — CSS in JS. Mostly prevalent in the React ecosystem, libraries such as Styled Components and Emotion allowed scoping styles to components and in so, got rid of the cascade problem.One key concept that got championed by Web Developer and Designer, Brad Frost, was “atomic design”.The gist of this concept allows developers and designers to think in this new “componentized” world. The idea is that you should think about a component as a sum of atomic design pieces.A button, for example, is an atom, a card that holds an image, or some text, and a button - is a molecule. A page, which is consistent with several of these “molecules”, is an organism.The culmination of the concept has boiled down to CSS frameworks such as Tailwind CSS.💡 If you want to learn some neat tricks in Tailwind, check out some Tailwind CSS Tips and Tricks Worth Knowing.You may ask yourself: “Do I really need a UI framework?” The answer might just be NO.Josh Commeau wrote a very good article on the subject titled: “You don’t need a UI framework”.Like I’ve said, and I’ll probably keep stating over and over again in any software-related subject - it depends.💡 Check out “Why Do We Need UI Component Libraries? with Alon Valadji” for a deeper dive.I once thought that building a design system with Styled Components and Tailwind was the way to go. However, It’s not necessarily the case anymore.Nowadays, there are many options that might fit your needs, get you started quicker, perhaps avoid the need for a designer at all, or lay a foundation for a complete bespoke design system.At this point in time, I’d imagine there’d be some sort of Web Component standard that would be usable regardless of your frontend tech stack. However, there’s still no one solution that fits all.Web Components were initially introduced with the promise of providing a convenient way to create reusable and customizable HTML elements, developed much faster without waiting for the full spec and implementation process.However, they have faced several challenges that have hindered their widespread adoption in UI development. One of the main issues is the complexity introduced by JavaScript frameworks, which has led to overengineered build processes and dependency graphs.Additionally, web components have struggled with browser compatibility and standardization. As a result, developers have turned to alternative solutions like React, Angular, and Vue, which offer more straightforward and familiar approaches to building UI components.Despite the initial promise, web components have not yet become the go-to solution for UI development that they were once envisioned to be.If we can’t use web components, though, what solutions are available to us?Theo Brown, a known YouTuber and tech influencer, recently broke down the different types of UI libraries in one of his videos. I think he did quite a good job in categorizing these into these types:Here are some key considerations for what makes a good UI framework:In summary, a good UI framework balances consistency and flexibility while optimizing for performance, accessibility, and device support. Great documentation, an active community, and intuitive design are also key. Following established UX principles and heuristics throughout helps ensure quality results.The React ecosystem probably has the most UI libraries out there, due to the size of its ecosystem and popularity. As I am more familiar with this world, the list here is longer than other frameworks and is not by any means a complete list of ALL React component libraries.Component libraries:Headless:Hybrid approaches:Being someone who’s a bit unfamiliar with the Vue ecosystem, one thing that I noticed is that a lot of the libraries out there have documentation in Chinese and not in English.I don’t know about you, but my Mandarin is… How’d I put this? Non-existent. Seems like even if a library has excellent docs, you wouldn’t necessarily know it.Component libraries:The last time I used Angular in production was about 7 years ago, which is now called Angular.js. However, the framework is starting to have somewhat of a renaissance with signals being introduced and still a whole lot of enterprise companies using it.Component libraries:One thing that I really like about Svelte, is the fact that it has a lot of built-ins for handling things like styles and animations. For styling, you simply have a style tag in your component file where your CSS lives and it is scoped only to that component. On top of that, having motion models that can easily handle tween and spring animations is quite great DX.Headless:Component libraries:Being the newest framework on the list, the Qwik ecosystem is still new. As such, the options here are slim. However, one thing you could do is leverage the React ecosystem inside your Qwik app and use component libraries from there.There are also other community implementations in the works for Vue, Angular, and Svelte that would open up those ecosystems as well.Headless:As I’ve mentioned above, web components were meant to be the savior of the frontend world, but have failed to deliver. However, some companies have found success with them when it comes to UI web components. One of these companies is SalesForce with their Lightning Web Components.Other than that, I’ve only heard of one component library which I think is worth mentioning:New agnostic libraries that aren’t necessarily built with Web components, but rather with CSS tooling have been popping up lately as well. Here are two interesting newcomers:While on the subject of framework-agnostic solutions, did you know that with Builder’s Headless Visual CMS you can let your designers use your own components inside a drag-and-drop UI?Whatever stack you’re using, with whichever component library, you can register component code that developers have written and use them to compose pages in a visual way.As can be inferred from this lengthy post, there is an abundance of options to choose from.Choosing the right solution for you and/or your team can be either a hell of a productivity booster or a huge foot gun.I myself have experienced the effect of a bad choices that were made. In my case, it was Material UI that made it almost impossible to get the functionality that our product team desired. We had to either completely rewrite components and even use a forked version of MUI, just to get to what we wanted.Be wary of your choices.Hopefully, this post has given you a good enough overview of what’s out there now, and got you seriously thinking wether you need a library or wether it’s a good enough investment to roll out your own. Not only for the sake of your product team, but for the sake of your users.Just remember, your users don’t care what solution you use, like they don’t care if you’re using Tailwind.Use what is right for what you’re building and the requirements of the project. Visually build with your componentsBuilder.io is a visual editor that connects to any site or app and lets you drag and drop with your components.Try it out Learn moreTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Bruce Simiyu - Aug 21 Salah Eddine Lalami - Sep 8 Sarthak Kaushik - Aug 20 Vidit Goel - Aug 24 Drag and drop to build visually with your components! Once suspended, builderio will not be able to comment or publish posts until their suspension is removed. Once unsuspended, builderio will be able to comment and publish posts again. Once unpublished, all posts by builderio will become hidden and only accessible to themselves. If builderio is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Yoav Ganbar. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag builderio: builderio consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging builderio will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.