Headless UI vs Radix UI React/Vue Primitives | The Compared EP 3

how's it going everyone welcome back to this video today we're going to be looking at radix ui primitive components versus headless ui components by tailwind labs i've created a quick list on exactly how i'll be comparing headless ui and radix so i'll just kind of write everything down as i go i think it's important to address what a headless or primitive component library is a primitive component library is essentially a unstyled component library that gives you advanced types of components with lots of styling capabilities all installed by default as i mentioned which is kind of what a headless means but it prevents you from having to do much javascript work on your end while also keeping them accessible to screen readers the second part is actually quite important because when you create your own components they may not be accessible to everyone with the correct aria attributes react aria also tries to fix this problem but i think headless ui and radix ui take a good modern approach to it which i think you'll see throughout the video how they do it so now that you know what primitive component libraries are let's just get into the setup process for them so i'll first start out with headless ui which is a library made by tailwind labs of course the creators of tail and css now if you want to install anything by going to the headless ui website you can click on any of the components that they have and they have their small installation instructions right here of course npm install very basic just one package everything all in one which is nice let's head over to radix ui the cool website they have here but we're more interested in the primitives right here it tells you a quick getting started section so there is specific portions of the components in different parts of the library so you can install those specific parts that you need and what this does is reduces your overall bundle size which is nice and i think that um headless ui since it has very little components compared to radius 2i which i'll also get into in the next point um it doesn't actually it might not even need to have that kind of feature and radius ui with its abundant of components has a bit of a more advanced setup process you have to install a lot more packages i think headless ui gets the point for this one but might not be for the reason you're thinking okay so now back to the component quantity you can see i can really count on my fingers how many components there are within headless ui there's not that many but they also do include components review as well which i don't think radix ui does i think it's just for uh react what hello site ui does is it essentially puts down the very core components that are required which uh are fully accessible by default radius ui on the other hand has a lot more components than headless ui you can see like i can scroll for a long time but what it does differently is that it includes parts that you may uh you can style by yourself but it kind of makes it a little simpler um to do it through radix ui so for example the avatar like what is an avatar it's just a circle with a background image usually or it's just an image with around the corners that has a square crop on it the point goes to radix ui for component quantity the next bar as i mentioned is component quality so we'll take two similar components within radius ui and headless ui and just give a good comparison on how they're implemented for example let's take a look at uh an accordion so you can create your own components through these libraries of course a very basic example let's just hit let's just compare the basic examples here so you can see we have the accordion root we have the each accordion item they have their own header and the header also acts as a trigger and then there's content down below so pretty simple in terms of hierarchical structure now headless ui has a very very easy structure for this you would essentially use disclosure dot button as part of the trigger functionality which also has the heading built in so no duplicates right there and dot panel only issue is is that when it comes to customization maybe you want to set the trigger as possibly just the button or something or maybe you want to make the trigger the entire title let's do a different example maybe that might help us compare a little bit more let's head to the tabs i think taps are pretty useful okay so they have a list and then they have the tab panels attach the tabs in so in this case i think rakes you on hills who are pretty similar they don't really add or remove that much in terms of simplicity they both kind of win on that section now let's take a look at documentation when you scroll down you'll see all of these on the end you'll see how they're implemented and you'll see also styled examples as well and a link to tailwind ui to see how those styles can be achieved on race ui you can also show the code go to a full code sandbox to take a look and they also have the same kind of stuff an anatomy api reference and examples of course their examples are a lot more limited right so in the traditional component library you're looking at different types of interactions uh different types of examples and headless ui i think blows race ui out of the water for examples because race ui usually only comes with one or two examples i think that if it included more examples for different types of use cases it might be a better option and maybe maybe a good use case would probably be a custom animation libraries which they do kind of address throughout so for example if you want to do like a force the force attribute i can't remember where it was force mount yeah so force mount is for react springs but what would be nice if they created a quick example showing how react spring integrates with radix ui because lots of tab libraries are have their own little animations usually on the tabs themselves but what if you want to animate the content between tabs and i'll show you a quick example actually i did this on my website mykelgen8.com this was me using radix ui with react spring so i click on a tab and it has that small little animation now those i i couldn't use force mount for and i had to do a bit more of an advanced solution with the transition properties and react spring so there would have been nice if there was a good example there in radix ui and they also have lots more um detail such as in their introduction section getting started styling animation stuff like that but for individual components i think would be nice to show different types of use cases a bit more so let's just give that to headless ui now let's take a look at the community so let's have a look let's go ahead over to the github page uh the community is very progressive on radix ui you have 5.5 000 stars on this one and the headless ui has 16 000 stars so you'll see that headless ui since it's backed by tailwind laps has a lot more stars especially and on top of that headless ui covers another framework um such as review whereas radix ui only covers react race ui has been forced to kind of go in the path of tailwind and what you'll notice with race ui does is they don't just build primitives they also build design systems so this is their color design system of what they have whereas tailwind uses the tailwind design system right because they've already built a product called tail and css and it works out then rakes ui also has icons right whereas on tailwind you can use tabler icons if you want to in terms of how many people are participating headless ui has 60 contributors and it's a it's a lot more than rayox ui this one goes to headless ui i think the big problem with headless ui of course is the first point the component quantity is greater than radix ui you can cover more used cases and in terms of components quality or in terms of in terms of how much you can do with specific components and they and the reduction of the bundle size i honestly prefer radix ui whereas for a headless ui i feel like the big use case spread is using tailwind ui components which is the proprietary product of tailwind labs this is tailwind ui and i think that this is probably um the big push with headless ui to get customers to go to tailwind labs it would be a lot more uh beginner friendly to choose headless ui over ray xui if you did like this video be sure to hit the subscribe button and also drop a like down below as well as comment on what you'd like to see next and we'll see you in the next video

Channel: Raheel Junaid

Views: 15,870

Keywords:

Id: BtdwOdtg03c

Length: 7min 14sec (434 seconds)

Published: Mon Aug 08 2022