Unstyled Component Libraries Are A Game Changer 

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.

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

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)

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.

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.

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

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!

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.

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.

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

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.

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

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

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.

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.

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

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

I was just thinking about it, and you made a video, awesome!

Thanks for these videos man, I could just pick one of these and style them with tailwind.

Thank you so much for letting us know this.

This is perfect for me, thank you!

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

Love your work buddy 💜

Gosh, how much time trying to customize MaterialUI components. I should have known those libraries ealier. TYVM!!

I just thought the same thing! Thanks Kyle as always!

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!

Hi there Kyle! Great content as always! An off-topic question - I know you're using Windows, but I've never seen such smooth animations while expanding a window like that at 6:06. I have a laptop running Windows 10 which cannot be upgraded to Windows 11 sadly, are you running Windows 11 which adds this kind of animation?

thank you, simple and to the point :)

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.

Thanks a lot, you save my time. Before you create this video, I have been using only tailwind and react ans then think about how to build like dropdown or advance select just using those two tools

Angular Material has been doing that for years. You get the base functionality with Angular Material CDK (Component Dev Kit), without any styling. You can than either style that yourself, or use the full Angular Material with their opinionated styling. It really is the best of both worlds to implement a library that way.

thanks! very useful😃

I'm just curious of why all this isn't native html yet.

Great video!

Excellent information! I can see that Adobe library pairing really well with Tailwind.

I just love your channel.

At work I write components like this for the company's crm pwa . It can be challenging, but I rather like being challenged than doing the same thing over and over again. I enjoy doing this and everyone at the company understand it takes as long as it takes, so I don't need to feel stressed. It might take longer to write your own components like a datepicker or a calendar but it has lot's of benefits: - You only have features you acutally need so less unused code. - You can add features any time and even add features others don't have. - You can optimize your algorithms for your specific scenario to deliver the best user experience. - You are in control if and which libraries are used and that can be important for performance. - You know what you have and don't need to rely on bad documentations or stack overflow to make a simple feature work. - You don't have to rely on a third party to update the component when you want to progress to a higher version of your framework.

Cool video, thank you!

PrimeVue is also heading towards the direction of unstyled components which is pretty awesome.

What do you use for the video mixing, where you share your screen plus have a small round view of yourself talking? You were able to relocate the circle on the fly in this video, that was cool. ))

Absolutely agree - unstyled component libs are the way to go!

I love Radix! Been using it for over a year now, my only complaint is that particular components I could really use (combobox, carousel) are still in development or haven't even been started yet and I don't have the skillset to contribute them myself :/ But I'm still a diehard fan of what they're doing!

Every time I hear that guitar intro the Nimbasa City theme gets stuck in my head

I really like the Radix. I think, it is great for creating components with anything and faster.

ayo i was just reading a bunch on this topic and of course you just released a vid on it!

Thanks

Те, що я шукав! Дякую 🤝

I am in search of a date range picker which will work on mobile as well as desktop. Material UI one works but I have to install the complete library for it. It would have been great if we could install just the date picker. Now let me see if there unstyled libraries are of help

Is there a good option for unstyled image carousels and drag and drop sortables? I currently use Swiper as a carousel, which is very easy to use, even with mouse drags, but difficult to style. For drag and drop I use dnd-kit, also a very good library. However, I would like it better if a Ui library already had this integrated to simplify implementation.

Hello Kyle, I love your videos. They are always very informative. I want your suggestion on 2 points that I can't get my head around. First is about choosing a Web Framework, I'm kind of curious of every pros and cons of each web framework our there like Svelte, Solid, React, Vue. I know React, A little (solid, vue and svelte) but i want to have the best one in my skill set too i cant decide what should i master (atleast 2). Second is about styling, I cant decide about what to choose from Ui Libraries, Tailwind, Styled, Css Modules, or and simple plain css with css preprocessors. I heard Styled-components have their compile time so i cant decide what to master (atleast 2). You can say I'm free to choose what sould i built in with. But choosing the best and the cons of everything in mind doesnt get me to the point where i could choose what to do. I have touched all of these but never actually made something. I used MUI. But the thing about styling or custom requirement it becomes difficult to modify. I dont work under anyone who may assist me on how i'm doing so that I could know where i lack or something that i need to improve more. Can you please help me in this scenario? Thanks and Lots of Love.

The concept of creating custom hooks to manage the state of a component completly seperately from the view in genius. Especially in situations like these.

Kyle, you itemized options to use common libraries, DIY, or work for huge corps. Another option is to buy well-supported libraries. Kendo comes to mind but there are so many others. I'm too cheap to buy right now, prefer DIY like you, but I have bought licenses in the past and this is a valid option to trade money for time. As a colleague of mine says "FOSS is only free if your time is worthless". Of course that focuses on the beer and not liberty definition of free, but the point has a lot of merit. Also, buying good software helps to keep good developers doing good work. There's a lot to be said about that too. Best to ya.

I might work on unstyled primitive components as a side project for learning sake.

Thanks for the pragmatic videos.

This is so true. I have made things from the scratch much faster than trying to use already built components and getting them to fit.😅

you mentioned aria a ton of times, i will take some liberty and post a quote from mdn docs ARIA page: "Warning: Many of these widgets are fully supported in modern browsers. Developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists. For instance, native elements have built-in keyboard accessibility, roles and states. However, if you choose to use ARIA, you are responsible for mimicking the equivalent browser behavior in script." and also: "Note: There is a saying "No ARIA is better than bad ARIA." In WebAim's survey of over one million home pages, they found that Home pages with ARIA present averaged 41% more detected errors than those without ARIA. While ARIA is designed to make web pages more accessible, if used incorrectly, it can do more harm than good." i think we should disability test native components, and only if insufficient support is detected, then fallback to aria solutions.

I would like to see such "functionalities" in widgets/components libraries like DevExpress, Syncfusion, Telerik,....

been working with vueJS3, taking in to account that vue has been using TailwindCSS for some time now most of the components/packages have been remade to have default styme but with a config to overwrite them easily as for me I just made a js file to export a default object and reuse it where I need, I don't know if it's the best approach in JS but eh constants are constants in my book coming from PHP

Was waiting to see shadcdn/ui :D

I am looking for a searchable drop-down menu is there any component for it ? Also for ionic angular as well

Ah-ria vs

They should be the standard for FE oriented devs. I always left that Boostrap, MUI and similar libs are more meant for Backend and full stack devs to help them make decent UIs quickly. FE specialists should never use those libs imho.

A new guitar? Nice

Did created any tutorial for creating your own design system and how to distribute it or use it with any project ?

For anyone considering writing your own input components beyond basic text input (e.g., dates or, god forbid, rich text input), know that it's a long, painful road. I've gone down the path precisely because of the problem Kyle mentions, and you're going to run into so many gotchas-browsers handling input elements differently, known bugs within the browsers themselves that you'll have to work around somehow, dealing with unicode, accessibility, security, floating point precision, testing... you'll learn a lot, but it will cost you lots and lots of time.

What gets me about having so many options is that it's up to us, the dev/consumers, to find where each UI package shines, which helpful compound controls they add, and which ones they're missing. Until they remove their styling, each of us also needs to go through their CSS to see how they work, and that stuff isn't documented well or at all. It would be ideal if we could, for example, apply MUI styling on Adobe or Reach or Downshift controls. When it comes down to it the exact same W3C elements are being styled with the exact same W3C CSS, so why isn't it more interchangable, like PC hardware or after-market car parts? Anyway, Kyle, do you have any insight into this concept of mix/matching style libs on unstyled controls? Or control-level comparisons in control libs? Thanks man!

Daisyui is so good as well. It's really customizable too

Great topic! Can you please help me to find any unstyled accessible navbar?

Super nice😊😊

Cuanto sabe este hombre!!! Justo donde duele

Given that creators of good components are removing their styles, leaving us with libraries of unstyled components, the next thing I think of is : where are the complete libraries of CSS (SASS, LESS...) that have nothing but styling for every HTML control? New vid? Thanks for all you do, Kyle!

I love chakra + tailwind css

How well do these libraries work if the user has javascript disabled at the browser level? If accessibility is one of the main points of these libraries, do they fail gracefully and still function with javascript turned off or does the website completely take a dump on itself if javascript is disabled?

Hey Kyle, I just started learning Reactjs and I'm a little bit confused, should I go through the old documentation or the newer one? I'll be grateful if you make give some insights about this topic. 😄

It's unnerving how you waggle your head side to side constantly but NEVER break eye contact.

Does someone know a library like that to Angular? Search I only found someone saying that I could use Angular Material without importing the styles.

Kyle is awesome 👍

Customising Mantine is easy and works great

😭😭😭😭😭 I just finished an angular members' area /Project creation and ordering website for our users. I had to wrestle with material UI and then decided to just drop it and do everything custom. Along the way I was thinking, wish there was an unstyled library that I can just style how I want. But thought no way there is a thing like that. If I bothered googgling woulda saved me so much time. Anybody can recommend any for angular?

Hello, what about Shoelace (Framework-Independent Component-Based UX Library) vs these

which one is the best unstyled component library?

What are the best unstyled components libraries if you are not using any framework, but just html/css/javascript?

This libraries can be used in react native with nativewind?

I do care about the design and style of my site and I’m perfectly happy with the design for instance MUI provides. Not entirely sure why you would imply that those things are mutually exclusive. To me personally CSS equals hell, so taking that burden away from me is a big big advantage. In fact I would be interested in taking your approach in reverse: It would be cool though if we could easily style an unstyled component so that it looks like a MUI component.

Make sure to take a look at Shadcn UI

Finally ! i was hoping someone talk about the way actual CSS library are a mess to customize. And lets be clear, we never want the exact copy of the component we are seeing in the library documentation !

Cries in ' !important '

I would like to recommend Lion webcomponents for the ultimate vanilla experience.

its there any premade web components library?

Nice 👍

Are there any for angular?

Thank goodness...

This have actually been around in the Angular community with Angular CDK for years.

A good alternative is to just use styled libraries that allow you to customize the look very easily, like Skeleton for Svelte for example.

Do we have those but for basic html/css? I'm a beginner and I dont think I can skip to React without mastering js

Are there any unstyled components libraries that work with Vue too?

That was cool but you can use MUI and overide the default theme which I think is much better

Are there any that are RNW friendly? So tired of not making native apps. :(

What about for angular?

Would Angular CDK lib be considered this concept?