Unstyled Component Libraries Are A Game Changer
VloĆŸit
- Äas pĆidĂĄn 10. 06. 2024
- 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:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
â±ïž 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
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)
lion web components
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.
react-table for headless tables
Zagjs, Reakit/Ariakit, @mui/base
shadcn/ui
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 đđ
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.
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.
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
Yeah seems weird to call out Mantine when it can both be a fully featured UI library or just a headless UI library.
I did not realize that. That is cool.
I been using Mantine at work and its great, its so easy to make it look like the designs in Figma.
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
@@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.
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!
Same thing!
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!
Gosh, how much time trying to customize MaterialUI components. I should have known those libraries ealier.
TYVM!!
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 đ
I just thought the same thing! Thanks Kyle as always!
Same
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?
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.
thank you, simple and to the point :)
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.
I'm just curious of why all this isn't native html yet.
thanks! very usefulđ
Great video!
I just love your channel.
Excellent information! I can see that Adobe library pairing really well with Tailwind.
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!
Every time I hear that guitar intro the Nimbasa City theme gets stuck in my head
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!
Haven't found a good carousel solution but for combobox my go-to is headless ui
@@smileyface6837 carousel is actually bad ux approach, you can google why
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.
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.
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.đ
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
I am looking for a searchable drop-down menu is there any component for it ? Also for ionic angular as well
Was waiting to see shadcdn/ui :D
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.
Bootstrap is for getting shit done, mui for pretending you're making an Android app
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.
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.
@@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.
â@@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 :)
Did created any tutorial for creating your own design system and how to distribute it or use it with any project ?
A new guitar? Nice
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!
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.
Great topic! Can you please help me to find any unstyled accessible navbar?
Daisyui is so good as well. It's really customizable too
I wonder why not many people talk about it!
Good? yes
Customizable? Not so much.
â@@kamehameha38 you can use it without any styles if you want to
@@kamehameha38 believe it or not. if you just use "btn" instead of "btn btn-primary" you can customise the button yourself đ€Ż.
@@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 đ
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. đ
The new one for sure. Definitely spend some time on their tic-tac-toe tutorial.
You should start with the newest one, it contains a very good guide of 80% of the features that you will use the most with react. When you finish it you can go back to the old one to delve into more complex topics
Have you learned ES6? Things will go smooth if so. Better to learn one topic per day to avoid confusion. Basics -Routing-Hooks -Requests--Advanced
@@ggff2269 Yeah I learned everything I need to learn to react, it felt different at the beginning but I can say I started to understand the basics and how things work in react.
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?
This libraries can be used in react native with nativewind?
What are the best unstyled components libraries if you are not using any framework, but just html/css/javascript?
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 '
its there any premade web components library?
I would like to recommend Lion webcomponents for the ultimate vanilla experience.
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.
And for react ?
@@samking618 Not very familiar with the React ecosystem.
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
you can skip
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?
I believe so, yes. Would fit best in the component-based category I think.