Unstyled Component Libraries: A Game Changer

Tell me you’ve run into this problem before. You need to add some custom functionality, such as a select tool or a date picker, so you’re finding a component that does that online, and that’s certainly the best way to do that because building a date picker from scratch takes a ton of work and a ton of accessibility to go with, so going with something prebuilt is definitely the way to go. BUT, as soon as you implement it on your site, you realize that its working great, but it doesn’t look like the rest of my site. You have a very specific design to follow, so you try to tweek it and tweek it and tweek it, and it never looks right. But that’s how they are, as all these components are designed to generally look very good, but you want to be specific with your design. Up until now, there has been no simple way to solve this problem, so what you have to do is be a little bit off. UNSTYLED COMPONENT LYBRARIES, on the other hand, have become a new craze.

These libraries provide all the basic functionality of the components without imposing any specific styling. it allows you to have more control over the visual styling of your website.

Problem With Styled Component Libraries

If you have been using component libraries, you must be familiar with Bootstap, Material UI, Chakra UI, Mantine, etc., or some single-based components such as React Select. If you just want to make a simple website with some basic UI or you don't really care about UI much, these components are really good to use, and some components like Chakra UI even provide some customizations baked into it, but as soon as you try to go off those styles or make strong customizations, this takes even more work and energy than building them from scratch.

The reason is not that the code to make a custom select box is too much, but to manage its accessibility so that it is accessible to everyone that visits your site is very difficult, which is why you use these libraries.

So up until now, we only had a bunch of options:

Option 1.

To code it on your own Obviously, this is a very terrible option. You really don't want to do that.

Option 2.

To use these style component libraries

Option 3.

To work for a billion-dollar company that has tons of developers and tons of engineers to make their own custom components. and it doesn't matter how much time and money they spend.

Developers' Choice

For us normal developers, option 1 sucks, option 3 is impossible. so we go with option 2, that compromises the styling

But now, with these unstyled component libraries, you can get the best of both worlds.

Some React-Based Libraries

React Aria

React ARIA is a React library of Hooks that provides accessible UI components to implement in your design system. It is developed by Adobe itself, so there's a great company of designers and Photoshop tools that backs this library.

If we follow up on the code, the react aria uses props for all the functionality and accessibility, like what happens on click, and the data in more complex examples such as form buttons and all that, so you don't have to take care of all this yourself, and the cherry on top is that it does not contain any kind of styling. like you can style it however you like using tailwind or whatever.

Downshift

This is also a hook-based library and very similar to React Aria. It handles only three things:

• Comboboxes

• Select

• Multiple Selection

The library provides a few options. The first option is to use a collection of React hooks. Each hook provides the necessary stateful logic to make the relevant component functional and accessible.

The Downshift component, which can also be used to create accessible comboboxes and select components and provides the logic in the form of a render prop, is the second alternative.

Base UI

This library is from Material UI. It is just built on top of Material UI. Cherry on top, they have this hook-based use along with the component API. Again, the component API does not have any styles applied to it and has all the HTML baked into it. You can do all the computations with no compromise on accessibility.

Moving towards the code, you have hooks made in the code with props and all that, so you can use it more kind of hooks; you don't have to write the HTML for them all.

Radix

Now, this is a personal recommendation. It has tons of different options. I kind of liked it personally. This is again just plain HTML with no styling, giving you the freedom to style it as you want without worrying about conflicting with the existing styles.

Now, in my opinion, libraries like these that have no styling but are not quite as low-level as Hooks. This is kind of a sweet spot I like to live in, as there is not as much work as using these low-level hooks as in the Downshift or React Aria libraries. It's just that you don't have much control over the HTML rendering.

Headless

This library does the same work as Radix and is really popular. This one is kind of built around Tailwind CSS. The people who made Tailwind CSS made this library, so developers that use tailwind CSS, this is a really easy one to slot into tailwind

How to Best Use These Libraries

As far as I think, the best way to use these components is by making custom components like custom checkboxes or custom select lists. If you're working on a small project, this probably is not the best idea, but if you really care about design, it will be best to have your own custom component library rather than relying on Bootstrap or Material UI. This can be great if you are working on a medium- to large-scale project. If you have to make changes to your design, you just have to make changes in that custom component and not the whole file, step by step.