A component library (also sometimes referred to as UI library) is, as the name suggests, a collection of components often made for component-based frameworks, of which the most common ones are JavaScript-based frameworks (or libraries) such as React or Vue.js.
Component libraries have multiple purposes and there can be a big difference in which goals a component library aims to accomplish. Some of the primary goals of a component library are:
A common component library ususally covers all of these points, some examples of pretty well-rounded component libraries are:
The listed libraries are all open-source component libraries built on top of Google's Material UI design system and include a lot of common components such as a button, dropdown menu and tooltip. A common thing for these libraries is also that they have a way of customizing (theming) the styles of the components, often through a global object or via CSS variables.
But there are limitations to how much you can twist and tweak a component library and there can be times when you want to build something so far off, that it just doesn't make sense to use a library.
This is where a new subtype of component libraries come in handy; headless component libraries. You may have heard the term "headless" before - it's often used to describe a more "barebone" version of something, for example content management systems (CMS), where a headless CMS is mostly just the admin-part without a connected frontend. This is the same case for headless component libraries - just like with the previously mentioned libraries, their job is to encapsule complex logic and enhance accessibility, but a headless component library does not ship any styling, making that the responsibility of the developer. This makes headless component libraries ideal for developers or teams who want full control over styling (and sometimes structure) of their components, which is often a case for bigger companies who have their own brand guidelines and style guide.
There's a misconception that component libraries are only used because they are built on a design system and look pretty, but an equally important thing with component libraries is that there usually goes a lot of effort into making each component fully functional and accessible, which are sometimes a neglected thing when building components from scratch.
Even for teams who need full control over styling and structure, there are headless component libraries which take care of all the tough work, making the argument of using a component library so much stronger.
Our advise is that you should almost always consider using a component library, headless or not, unless you're building something very small which you are certain are not gonna be used by people who may have a disability, or if you're a larger team who have the resources and time to spent on in-house libraries.