Unstyled Component Libraries Are A Game Changer

It may seem counterintuitive to use unstyled components, especially after so much time has been spent developing libraries like Bootstrap, but unstyled components are one of my favorite things to happen to frontend development. The reason these libraries are so amazing is because they make it so easy to create custom styled components that look exactly like you want them to while also containing all the complex accessibility and functionality that is difficult to create on your own.

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
01:31 - The problem with styled component libraries
03:55 - Low level component libraries
07:50 - Unstyled component libraries
10:47 - How to best use these libraries

#UnstyledComponents #WDS #CSS

[Thassalocracy]

I like that some of those libraries mentioned are accessibility first. Too many frameworks are singularly focused on the visual presentation that they forget sometimes their users probably can't even see their fancy colors or smoothly curved buttons. I especially like the one by Adobe, you can see that they really made the components as accessible as possible. Thanks Kyle, for introducing them to us.

[mustaquenadim]

1. React Aria
2. Downshift
3. Base UI
4. Radix
5. Headless UI
6. Reach UI

Suggested from audiences:
7. Lion (Unstyled web component)
8. React Table (Headless table)

[Xe]

I've ran into the problem of not being able to customize my components to my liking so many times. Thanks for covering a hidden topic that I don't see many people talk about.

[bobdinitto]

Awesome, Kyle, these libraries look like a great way to save time and get just the styling we want. I'm already building a component library so this will fit right in. Thanks for this I always get new ideas from your videos.

[vissaf]

These headless alternatives are pretty great. Especially for something like tables and datepickers. Using your own markup and the library's logic. It's the best of both worlds imo

[carolinadelaossa]

I was just struggling with this yesterday. I have a very small personal project with very particular styling, and I was debating whether I made my components from scratch or use a CSS library and re-style it's components (which I also hate doing). Your video came up at the perfect time for me haha thank you so much!

[juanalbertoboada]

And finally it is coming! I have been thinking about this for so much time...I have gone thru many projects requiring these kinds of libraries.

[spidfair]

Thank you for shedding light on this topic. I've been looking up the libraries you mentioned (and others) and I will definitely give them a try, but I'm little concerned regarding their bundle size. It looks like using even the simplest hook/component increases code by a few 10KBs. I would expect them to be more lightweight.

[sashatube]

Well...I'm one of the people who just created my own customized ui library (select, checkbox, datepicker, calendar etc.) and added in all the accessibility features. It was in fact a pain in the neck. However, in the end I got exactly what I was looking for and I learned a lot more than I bargained for. It took me a little less than a year...smh.

[perfect.stealth]

I’ve always been an advocate of never styling components because they are used in so many different sites which results in backwards development, wasting time on overriding styles and remove classes

[eliamzg]

This would have saved me so much trouble two years ago 😂 this hits a sweet spot between efficiency and customization, love it. Will check them out, maybe replace some of my own components with these.

[canaygun]

Very useful! Thanks for the video. It does sound nice to build a design system around one of those unstyled component libraries.

[Daijyobanai]

It's amazing that no-one popularized this before, theming and changing existing themes is a proper PITA.

However, a checkbox should use the semantic input type and not button. One of the things I don't like about modern web is the constant re-writing of the standards by people who don't know better. And in a video that mentions accessibility several times over, then goes on to use an example that breaks WCAG/accessibility rules.

[BearDigitalStudios]

Thanks for this Kyle. I'm going to look at this when I start my next project

[eheyise]

I love all ur lessons, they are broken down everything detail to simple 👍👍

[VimalKumar-tsxn]

btw mantine also allows to keep all the functionality of the component while, allowing to use the unstyled components
you just neeed to pass the unstyled prop to the component and style it using the style api

[wolffparkinson]

It would be worth checking shadcn/ui. It is radix ui + tailwindcss. Components aka primitives can be copy pasted to the components directory just like radixui

[snekface]

You are the single best source I use for learning react. You've taught me so much, and I truly appreciate every one of your videos!

[MyBaBB]

Thanks, I am Ready to jump right in to Libraries now. Finally...It took along time to get here.

[twocsies]

There are some libraries that allow you to pass in replacements for components like Input or Text, which allows for default styling but also updating the styles.