Unstyled Component Libraries Are A Game Changer

[@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)

[@PaulGerarts]

lion web components

[@TwoLeggedTriceratops]

Too bad a lot of those are for React only. These unstyled component creators could benefit in using Stencil/Lit to make it framework agnostic and future-proof.

[@vissaf]

react-table for headless tables

[@bugzpodder]

Zagjs, Reakit/Ariakit, @mui/base

[@shihou22]

shadcn/ui

[@BeeBeeEight]

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.

[@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.

[@Xe054]

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.

[@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

[@VimalKumar-ts7xn]

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

[@ChristofferLund]

Yeah seems weird to call out Mantine when it can both be a fully featured UI library or just a headless UI library.

[@WebDevSimplified]

I did not realize that. That is cool.

[@SenorScriptKitty]

I been using Mantine at work and its great, its so easy to make it look like the designs in Figma.

[@nanonkay5669]

Mantine was an absolute game changer for me. It's absolutely amazing. I'm so bummed out that there isn't nearly enough videos about it out there, it's a damn shame

[@JamesJosephFinn]

@@WebDevSimplified hey brother, great channel. For this training in particular, it would be helpful to see your perspective on bringing these libraries into a Wordpress environment. An example use case could be custom fields in a Woo checkout form. Consider it! Peace bro.

[@sasha777tube]

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

[@carolinadelaossa7383]

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!

[@Matrium0]

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.

[@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

[@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.

[@joaotextor4094]

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

[@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.

[@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.

[@MyBaBB]

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

[@jann2418]

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.

[@tonyg_nerd]

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.

[@snekface1707]

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!

[@ngaji_it]

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

[@nsrc9583]

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.

[@tonyg_nerd]

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!

[@joe-robin]

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

[@Art-y2k]

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

[@ekchills6948]

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

[@capt.potatohead]

I wonder why not many people talk about it!

[@EIsenah]

Good? yes Customizable? Not so much.

[@victorlongon]

​@@EIsenah you can use it without any styles if you want to

[@h3nry_t122]

@@EIsenah believe it or not. if you just use "btn" instead of "btn btn-primary" you can customise the button yourself 🤯.

[@daleryanaldover6545]

@@h3nry_t122 it really comes down to how daisyui do the html markup in their components, the first time I saw the source code of some of their components like navbar, it rekindled a burning flame in my chest, remembering all the past suffering I endured with pre-built components back in the day. So I decided, screw daisyui, I'll just make my own component library 😂

[@muhammadmusab6334]

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

[@QueeeeenZ]

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

[@TeaganAtwater]

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!

[@smileyface6837]

Haven't found a good carousel solution but for combobox my go-to is headless ui

[@Pazdkq]

@@smileyface6837 carousel is actually bad ux approach, you can google why

[@gaius_enceladus]

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

[@theisoj]

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

[@elamandeep]

Same

[@bignah4872]

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

[@theisoj]

Same thing!

[@IvanRandomDude]

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.

[@ruyvieira104]

Bootstrap is for getting shit done, mui for pretending you're making an Android app

[@twothreeoneoneseventwoonefour5]

Frontend is not only about writing pretty uis. Some frontend devs are there to make dynamic working uis, regardless of styling. Example: I am writing an interactive map project which is used internally inside the company. I don't need to write any styles myself. If I can make a decent ui without doing most of the work, it is a win. My main job is making sure that data visualizes interactively.

[@PatrikSticha]

That might have been true with bootstrap 3 or so, but ever since bootstrap 4 came out it actually turned out to be highly customizable library, great base for FE devs to start building the project. Can't agree that it's meant mainly for BE devs. It's really a quick way to introduce a build system into your project and customize it efficiently. I feel like good js library should always be divided into tree shakeable modules, therefore the appearance module (css) should be optional by design.

[@daleryanaldover6545]

@@PatrikSticha I think bootstrap 5 is the most lit, I've used 4.3 back then and there hasn't really ground breaking change from version 3. Version 5 was inspired from tailwind utility classes so bootstrap is much more easy to build custom prototypes.

[@PatrikSticha]

​@@daleryanaldover6545 Well I started somewhere around bs 3.3 and back then it was more about rewriting the default classes, ever sice bs 4 introduced default variables, the whole bootstrap became basically this huge customizable framework, which made it possible for you to make sites really unrecognizable from the default bootstrap theme, but keeping their tidy, flexible system. I really think the biggest progress in bootstrap was really introduced transitioning from version 3 to version 4. Version 5 of course brings some major improvement and event more possibilities to making more customizable environment, no doubt about it :)

[@Tom-xr4qy]

Mantine has a great styling possibility. Just read the documentation and you can completely restyle components in a valid way.

[@canaygun5234]

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

[@spidfair0]

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.

[@608_diesel]

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

[@ShaharHarshuv]

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.

[@danielzaiser]

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.

[@CivicYt]

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

[@Kraboobee]

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

[@JawsoneJason]

Ah-ria vs

[@francoisconsigny9106]

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 !

[@shivangrathore]

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

[@kevbonett]

Hmmm... so the custom checkbox example uses a element with a role="checkbox". WTF. 😢 This is why I generally hate libraries. So often they simply use the wrong markup, and set a really bad example. 1st rule of ARIA = don't use it if there's a native HTML element that does the job.

[@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.

[@martijn3151]

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.

[@diesunddas405]

A new guitar? Nice

[@michaelanthony4750]

Thanks for the pragmatic videos.

[@caerulemusic]

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

[@ANOLBEE]

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.😅

[@Qushaak]

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

[@kentmiggalen9756]

Thank you so much for letting us know this.

[@nabinsaud4688]

I love chakra + tailwind css

[@WTFAnyNameWorks]

This is perfect for me, thank you!

[@twiggy99]

As someone who just can't take to React no matter how many times trying with both small projects and enterprise level projects the amount of code needed here is just mind boggling. all that JavaScript to creat a button which has also now tightly copolued your view layer just still feels mimd blowing,the datetime picker code example is even worse. maybe 1 day it might click for me but all i see is down sides and those concerns only get deeper the more i learn and use react in real world projects

[@paragateoslo]

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

[@SarthakJain12]

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?

[@joesharp3580]

I just love your channel.

[@a_maxed_out_handle_of_30_chars]

thank you, simple and to the point :)

[@doenather1008]

Thanks

[@atanumojumdar]

Love your work buddy 💜

[@silviabaer]

Cool video, thank you!

[@nro337]

Great video!

[@markzuckerbread1865]

as someone who used antd in a commercial project at a company, having to force the components to fit the designers styles is a massive waste of time and I'll definitely consider these libraries the next time I'm working on a site with a strict design :)

[@casperon7]

Customising Mantine is easy and works great

[@LoneWolfCodingProfessional]

in order to create a components that custom first create a separate components first like creating all components at all once then select fonts color palletes must all be scss default page after that your components are more reusable you just import it to your app in class

[@JohnPKusumi]

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. ))

[@pkvpraveen]

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

[@neirenoir]

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

[@zainharoon7468]

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.

[@theclockworkcadaver7025]

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

[@mkammyd]

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

[@weirdwordcombo]

Finally UI component libraries using good software design principles. Indeed, what style components have, does not belong in a library at all.

[@smakosh]

Was waiting to see shadcdn/ui :D

[@MubashirullahD]

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

[@marloelefant7500]

The built-in HTML select box is actually the best option because it's the most performant, doesn't require JavaScript and it can be rendered according to the current output mode (e.g., audio interface, command-line interface). These custom JavaScript components and JavaScript-only websites are really an abomination.

[@ololosh40k28]

thanks! very useful😃

[@DeolisN7]

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

[@owenwexler7214]

Yeah, unstyled/headless component libraries are definitely the new wave. We want to style our own apps without wrestling with a UI library that wants things to look their way.

[@hamzaomenxx1299]

Make sure to take a look at Shadcn UI

[@viktorshcheplyagin9576]

short conclusion: prestyled components libraries are good if you decided to use a specific design system (e.g. Material, etc.) but in other cases - tailwind + headless-ui = one love

[@gs-443]

the main reason I always try to avoid component libraries is how hard is to style them!

[@daleryanaldover6545]

I resonate with this on a spiritual level. That is why Tailwindcss is godsend since it solved most problems I faced with these pre-built component frameworks. Combined with these new headless UIs, we are on to great DX.

[@nabzoku]

Cries in ' !important '

[@Binxalot]

How is this better than specifying the input type attribute to be date, and letting the browser handle the date picking? If you use it'll use the browser's built in date picker, it works on all major browsers and you don't even have to adjust for mobile, it just works and requires zero css or extra external libraries.

[@caradebreno]

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.

[@SXsoft99]

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

[@steckrein6322]

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.

[@tonyg_nerd]

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!

[@nsrc9583]

Thought I'd answer one part of your question because I've contributed to some open source browsers. You don't see that interchange because W3C standards don't say anything about implementation. That's up to the browsers. So what you end up with is a lot of different ways to do the same thing across browsers. And if you don't do it the way browser X requires, it won't render in browser X. Another thing is implementation turnaround time. Some browsers take a while to implement approved standards, others very quickly. Chrome tends to implement fast, Firefox takes some time, and Safari kind of just does whatever. Finally, some browsers are more willing to try new or proposed specs than others. Edge tends to hesitate with new specs until everyone else gets on board, and Chrome is almost always the pack’s leader. W3C intentionally never mentions anything about implementation because specifying implementation would stifle competition, and you'd almost certainly end up with one browser controlling the entire market (e.g., Internet Explorer from the late 90s to the early 2000s). We've learned that browser monopolies are not a good thing-once IE got control, Microsoft completely stopped working on it.

[@programming8840]

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

[@murodjonturgunov2328]

Kyle is awesome 👍

[@gonzalooviedo5435]

Cuanto sabe este hombre!!! Justo donde duele

[@nizarkhatri6237]

which one is the best unstyled component library?

[@sephiroth668]

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?

[@jerryf196]

Would Angular CDK lib be considered this concept?

[@DirkLuijk]

I believe so, yes. Would fit best in the component-based category I think.

[@kamalsomani285]

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

[@user-eh3ey7is5e]

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

[@postedactive]

Thank goodness...

[@leonvanrijswijk8409]

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

[@gorilla-san]

😭😭😭😭😭 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?

[@microspacer]

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