UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI

Welcome to Syntax. Today, we have a show on UI component libraries and frameworks. So if you're building a website or you're building an application and you want to use something that will help you either with the functionality or how it looks, we're gonna be talking all about the different UI components out there and breaking them down into, like, the different areas, because it seems like there's a there's a 1,000,000 different things you could do, and they they don't all overlap with each other. So we're gonna attempt to explain it, break it down, and and make some recommendations as to what you should be using. My name is Wes. I'm a developer from Canada. With me, as always, is Scott Tolinski. How are you doing today, Scott? Hey. Doing good, man.

We had a massive snowstorm. Right? Like, just we got, like, a foot and a half of snow. Nailed. Yeah. In, like, 2 days. Kids went sledding all day and a couple days off school. We had a long weekend the week before spring break, which is going to be another long time. And then today, Sanity and sunny. Everything's melting. Who knows? Denver is weird, man. Yeah. Crazy. You know, that snowstorm was so wild that it brought down a coax cable into my Yarn, ripped it right out of the the side of the house. That's crazy. That luckily wasn't your Internet.

Node. Yeah. We had we had fiber. And it's funny. I tried to get the, cable company to remove the coax cable when they installed the fiber, and they were like, you might want it. I'm like, no, please. I don't want it. I don't I don't want this extra cable coming to my house. They're like, yeah. You never know. You never know. Like like, someone chops your fiber, and they're gonna they're telling you it's gonna be a week before or whatever, you might wanna have a a backup Internet in place because

that would be a bad day having to wait. Yeah. I guess you could also, like, tether your phone as well. The the data plans in Canada are finally getting, like, better Wes you can you can tether your phone quite a bit for a very reasonable amount of of money.

Yep. Yep. Yep.

UI components. So it's funny, Wes. This is this is kinda timely because I see this stuff pop up all the time.

And some really interesting things about UI components to me is that you can get really locked in kind of tight to different systems with UI components if you aren't careful or maybe perhaps you end up with multiple different CSS frameworks or JavaScript frameworks in your app. So, there's a lot here, and it's definitely a world where you can get into both minimal or max maximal maximal.

Yeah. You can you can sort of dive in at any point along the very low level, or you can go all in on something and and use all of it. So

it's pretty crazy. Talking about going all in, we've been going all in on YouTube.

We've been doing video tutorials. We've been doing little helpful helpers that go along with these tasty treat episodes, as well as every single episode that we're doing from now on is going to be a video episode. So, if you want to say hi to us and, you know, see us in action as we're we're kinda typing away here on the screen. And and, hey, we're even gonna be show showing some code here eventually. So if that's the type of thing you're interested in, head on over to YouTube, and we're at syntax fm. So youtube.com@syntaxfm on YouTube. Check us out.

Alright. So I'm gonna be talking about what I think are, like, the 4 categories of UI libraries or frameworks. I'm just going to call them frameworks or libraries. I'm not going to have to specify that every time. We have headless ones, unstyled ones, styled starters, and full on UI kits or or design system.

And we're gonna kind of go into each of those as well as talk about things to consider and go through lots of the different options that you have, some of the more popular options that are out there. But before we get into any of that, let's talk about, like, a UI component and and what they need to do. So you're building an application, and you need some stuff that doesn't exist in the browser. You need something that will handle pop ups. You need something that's gonna handle a complex date picker. You're gonna need something that's gonna handle toast messages and complex form inputs and all of that type of stuff. Right? And it doesn't make sense in a lot of cases to build that stuff from scratch.

So when you are picking a UI component, they need to be a couple of things. They need to be functional, meaning how do they work? Is it a nice experience to develop with? Is it a nice experience for your actual user to use? Is it going to give you all of the features that you want? Like, a really simple example is, you pick a drop down for your country, and you're looking for Canada.

And that JS really frustrating to me when somebody gives you a massive drop down and you're not able to filter them. Like, I know I can hit c 3 times and get to it, but when you have those drop downs, that's just a select list that's huge.

That's a bit of a bummer that you can't filter it by by default. So if you have a nice filterable input where you can select multiple things, that makes a better experience for everybody all around, and you probably wanna reach for a UI component for that type of thing.

Yeah.

And sure enough, you could build these things yourself. Right? I mean but when you build them yourself, you end up having almost always more considerations than you'd expect.

Like you mentioned, that filtering you I can build this myself. Sure. Let me go ahead and do it. Hey.

The worst one of these is a calendar. I think at Node point, I was like, I'll take on a calendar. Sure. Why not? And then, like, a week later, you're like, why the hell did I build a calendar? What what was I thinking here? All of these UI components certainly can be bespokely built,

but that doesn't always mean that's the the right call for any given project. Yeah. It's edge cases all the way down with this type of stuff. Oh, what happens when you hit escape while you're clicking on something? Or I didn't think that somebody would use it in this specific case, or I didn't write any keyboard focusable inputs for this type of thing. Or I got into this weird situation where I popped up 2 Node, was when it wasn't existing. That stuff is pain all the way down, and we've we've built it. We've built a select box that you can select multiple things before. In fact, we're actually trying to add that to the to the browser because that makes sense to do. So that's one point, the functionality of how they work. The other aspect of it is is style. How do they look? Right? Mhmm. Do they have some default styles with them? Do they? Are they totally ready to go? You slap it in. It looks amazing. Works really well. And then there's accessibility.

They should be accessible. That's that's the biggest one that people forget with the the functionality part is that, yeah, you could build this Vercel, but are you really taking into account all of the possible edge cases where this thing needs to be accessible, where it needs to announce itself, where it needs to, handle focus states for you, where if you are have a a Node that's popped up open in you tab, is it going to focus an input that's on the page behind the modal? You know? Or you hit escape. Right? You want it to close on escape. I mean, there's so many people in the settings. Crazy.

Yeah. Yeah. We've talked about that. Right? Yeah.

Where We have I'll I'll say what it is because they hate when people reference stuff, and you're like, well, no. What are you talking when you have a modal open that has a form input in it so you you pop up something, has a form input in it, and you start typing.

Often, the autocomplete will open up, and you you say, ah, I wanna get rid of it. And for me, it's like my Node password and the browser autocomplete will open up, and I'll hit escape to get rid of them.

And if you hit escape, the actual escape key will fire as well, and it'll close the entire Node. And that drives me crazy. And I've asked on Twitter. I'm like, this is this is not okay. Right? And people like, no. Escape should always close the Node, Deno, no, escape should first clear any inputs and and focus the actual input. And then if you hit it again, then, yeah, like, there's so much to this type of stuff to make it both really, usable as well as accessible.

Totally. And then And Go ahead. Oh, no. And then next step is internationalizationable, which is a great word that you've written here, because they need to be able to to handle how, you know, words and different messages work across the world. Right? If you have something hard Node in your component, I always say close, that's not exactly that internationalizationable.

Right? You're not going to be able to replace that tech. So you Scott to be cognizant of what you need there if these things need to be able to work across different, well, not even just not even just language, but right to left, left to right, whatever. Yeah. And I don't know about US, but I've been using the what are they? The logical properties, the ESLint margin, and the logical margin.

I've been using those nonstop lately, like, the only things I've been using. So just having those considerations, it's not everybody reads top left to bottom right. That you know, that's actually just, you know, whatever countries do, but a handful of people read, in different directions. Yeah. Even things like, different types of calendars or something as simple as ordinals,

which is like first, 2nd, 3rd. You know? Like, there's a there's a lot to that. Luckily, we have really good internationalization APIs in the browser that take care of a lot of the stuff, but it needs to be considered when you're building these things. And then the last 1 we have here is just being able to handle variants. What happens when you need a bigger button? What happens when you need a pink button? What happens when you have a light and dark mode? What happens to shadows when you're in dark mode versus light mode? Like, there's a lot of things to think about there and components that are built from scratch with light and dark mode in mind or or theming in mind in general Damn. Are are really important.

What if you need more than light and dark mode like you just mentioned with theming? Right? Yeah. So many of these things are just built to work with light and dark, but sometimes you need more than that. I mean, oftentimes, you don't, but sometimes you do. Right? Yep. So let's go through just a couple UI components just so we can have them in our in our head as, like, what might these be? What might you want to use?

One of them is a date picker, and the date picker input type of date in the browser has actually it's starting to get better, but it's not always ideal, especially when, like, there's a like, people are always like, use a browser defaults, and there's a reason why people are not just using input type of date on a lot of these websites. And if you wanna span multiple months and show that, like, alright. I wanna start my vacation on April 8th, and I wanna go to June 15th. Right? You wanna be able to show which items are selected or if you wanna overlay like a dot, maybe something is booked on a specific property. You wanna show a dot that you cannot select it. There's there's really a lot of control over that type of thing. So a date picker is often one that people will reach for a u UI library.

I think date especially date range pickers, like you mentioned, are one of the biggest ones that infuriate me as well. Like, when when places have bad date range pickers, oh my. I'll I'll lose my mind on some of these websites. It's just like, I don't know what you were thinking with this. JS nobody using this? Has has nobody tried this whatsoever? Right. Yeah.

Yeah. It always drives me crazy when you have to, like, pick something that's, like, 3 years ago, and there's no way to select the year. Cut cut cut cut cut cut. When it's like, alright.

November 15th, but I wanna put 2016 in there. So you just select, like, November 16, and then you change the year.

Love love when you can be able to do that. Or if you have to go like, the older I get, the more angry I get at birthday date pickers because the drop down for your year is so far away. And I'm sometimes I'm sitting there clicking 12 times 30 thirty, however old I am, 34 or something like that. 36? Yeah. I'm 27. Yeah.

Drop downs. Autocomplete. This is a really big one as well. If you are working on a autocomplete Wes you type in something and you wanna show possible suggestions, You wanna do highlighting. You wanna use people's you want to be able to use the keyboard, to go up and down and hit enter Wes you're on a specific one. What happens when you hit a specific one? They there's quite a bit to that type of thing. They handle keyboard events, current items, internal state, data fetching. We'll talk about down downshift JS in just a sec, but that is a very common one because often your your drop down will be very custom to what you're working on.

Yeah. And even too with that, auto completion.

Like, having it be a fuzzy find instead of, like, a strict find. There's nothing worse than doing a find for something, and it's not finding it because it's either capitalized or not capitalized, or it's in the middle of the word instead of at the end. Like, it needs to be able to essentially work where if if you type in a a set of characters, it's not case dependent. It's not full word dependent. It's not, like, Wes it is in the sentence. Those types of things really drive me nuts.

Toast message. This is when actually, you you built did you build the to build the Toast for the syntax website, or do you use a library for that? I used a library for it, but I almost always built these because they're really fun and easy to build. So it's like a good example of, like, one of those things where you can quickly get a very nice Toast message going in no time.

And it it'll teach you quite a bit about, you know, whether it is state or event systems and stuff like that. But for the the syntax site, you know what? I think I've built enough Toast message systems that I was a little bit over it by the time. So we use one called Svelte French Toast, which is a great Node, and, it's just so easy. So some of these things are like, I almost now reach for a library when doing these things because, again, there's a good Toast message library for every single platform that you could possibly be writing for at this point. And they can just be as simple as dropping in the Toast component and then calling a function.

Alright. That's it. End of the day. You can style it how you want, whatever.

Yeah. So a Toast is those little things in the bottom right corner of your, you save something in your website, and it says success saved successfully. And there's there's actually quite a bit to it. You can make them auto dismissible. You can be you can make them not dismissible until somebody does a specific thing. You can make them updatable. So I was building 1 the other day where simply just update that one rather than clear the old one and and put the new one. Do they stack or not? Right? Like, if you have a bunch of ones that are need to be stacked together or grouped, So Toast is is certainly one. A drawer is another big one where you you wanna edit something and it slides out from the bottom.

Combo box, menuing, tooltips, and then forms alone. There's so many things. Grouped inputs, file triggers, previews.

Forms are pretty good by default in the browser, but there is a lot of UX that could be added when you reach for one of these libraries. So those are some of the more popular UI components. There's hundreds of them out there, but let's get into talking in just more about the different, like, levels of them. So we're gonna go through headless, unstyled, styled, and, like, full blown UI kits.

And all of these sort of build upon each other, as they give you more opt in. And on one side, you have more control.

And then on the other side, you have simply just, oh, I can get an amazing UI click together in a matter of minutes by simply NPM installing this thing, and this thing actually looks and, works really well.

Word.

Yeah. So let's start with, the first one, headless, which essentially means that you were getting the JavaScript code to interact with these things. It provides the functionality and accessibility. It provides things like state. Right? You might be thinking of, like, you have a drop down menu, could have selected items, is focused, is open, those types of things. Or perhaps you have, like, a drawer. It could be is dragging. This thing is moving. It's currently in action. Right? It's open. It's closed. It can provide triggers to open or close things. It can provide listeners and event systems where events are firing when something opens or when it's closed or when it's completed, those types of things. And it can even provide the accessibility aspect of this, the stuff that is actually not a ton of fun because you're like, oh, I built this thing. It works. Oh, no. Wait. I gotta add keyboard events. I have to have labeling. I have to have what's hidden, what's what's available to screen readers, what's not. Like, how is this thing accessible and usable for those of you who might not have either a mouse or a keyboard or even a screen?

Yeah. Just announcing changes when something updates. Like, sometimes, you need to announce something to the browser when it changes because that's not baked in by default or or the way that you build something, it doesn't it's not clear to a screen reader.

I think the most important part about headless is that it is simply functions and hooks with minimal or no HTML at all. And generally, they're just a bunch of hooks that you can use, and they will give you props. They give you Scott, and then you have to bring your own HTML and intersperse them into your divs, your inputs, your form tags, and you have to hook up and wire up all your event listeners. So you have an an input that has an on change event. You have a form that has a submit ESLint.

And the headless UI library gives you all of the functions and all of the state and all of the variables, and you simply go and render it on out. And that is really, really nice because often people say, yeah. I don't want to use a library because it looks it doesn't look the way I want. Right? Like like, being able to separate the functionality from what it looks like or or what the actual HTML looks like is really, really powerful because you don't you don't have to make it look. Or or sometimes you say, yeah. We already have this existing HTML from our our old one, but we need to wire it up with your JavaScript.

That's where headless comes in very, very handy.

Yeah. So some examples of this is the biggest one out there is React ARIA.

This is from Devin Govett. He's behind Parcel JS. He's behind Lightning. He works at Adobe.

And there is a ton of work that's gone into React ARIA to make it Scott I'm not gonna say, like, like, some of the React ARIA also has stuff that's built on top of it. So it's not dead simple, but it's extremely powerful. And a lot of the libraries that we're gonna be talking about today are just built on top of React ARIA because that is a low level Yarn thing to do. Yeah. You know what? React Area is oddly one of those ones that gives me a little anxiety looking at the docs because it's,

so much there. Another is radix or radix. How do you how do you pronounce this Node, Wes? Have you ever said this on the phone? But

I always say radix. Wrong. Yeah. Okay. I say radix.

I've always said radix. I you know, whatever. But Radix has a lot of things whether that is icons, colors, or themes, but it also has, hey, primitives. The kind of stuff that allows you to take a little bit more of a, micro view of these things without having to have a fully fleshed out system. But, yeah, Radix is or I mean, I'm saying it different every time now. Radix is one of those It is Radix. I looked it up. Okay. Radix is one of those ones that you can really you can really build your entire application on, because it there's so many blocks here, and there's so many nice things about it.

Next one is Downshift JS. This is a really good example of a extremely flexible component for building autocomplete, combo box, drop pnpm, essentially anything where you have an input that reacts to typing and selecting items and then needs to render out what is selected and and get all of the keyboard shortcuts and event listeners and filtering and all of that stuff along with that multiple selection. So downshift is is really cool that it it gives you. And that Wes, honestly, that that's from Ken c Dodds. That was one of the first, like, headless libraries that I saw, and I, like, really understood it because I had built I've probably used it 6 or 7 times now, and I've built some stuff that are totally different.

But it just has all of the the hard stuff done for you, And I just need to beep, boop, beep, put it into some divs, and I'm I'm I'm rocking.

Yeah. And to be clear that, some of these are just React. Right? React ARIA, obviously, just React. Redix Radix, obviously, just React.

Downshift JS is just a React, and it's just a combo box. Right? It's not like a full on, primitives building block set, like, something like Gradix JS. Next up, you have the tan stack stuff. So we have things like tan stack table or tan stack forms. I think these are really fantastic because they're not just React based. And the older and grumpier I get, the more I reach for things that are not React specific.

Why? Well, it's really helpful to be able to bring your tools to any type of project, whether that is Vue, React, Svelte, whatever. If you have a tool that works in all these different contexts, it's really easy to reason about that same tool in other contexts.

So having something like this Wes, hey. It's a headless UI for building powerful tables and data grids is really super good. And let me tell you. The data grid world for components Yeah. Is definitely it's a big world. In fact, there's a lot of paid products here. There's a lot of really intense libraries here, and 10stack JS, a great option. Not only that, but it's it's solid. I'm not trying to say a solid JS thing, but it's, like, very solid. Right?

I use that on it's it's a wild being able to sort and filter a table and have different rows and and highlighted rows.

It's quite a bit. And I love all the Tansac stuff because, like, Tanner is you've we've had him on the show before. Tanner is a React developer through and through, but a lot of the stuff that he initially built with React, he's like, you know what? I can pull this just a little bit back and make this available for React and Solid and Svelte and Vue because most of the stuff we're talking about with Headless are event listeners and triggers functions that should run.

And all of the hard stuff is crossing that boundary from the framework to the vanilla JS world, the Dom event listener world. And it's really nice because, like, if you were to look at a lot of these React libraries, I think the reason why they're always React is because, yeah, part of it is Scott, and there's there's not a great, like, cross platform state thing. They wanna just use React state for it. But the other thing is just is it's reps and stuff hooking up to Dom Node, having event listeners, and that stuff is the same across the board. So

I love seeing that. And I I just wanna even go back to even just the straight up the 10 sec table bit here for tables. Tables are another component that I frequently, trick myself into believing that I can make a really great table. In fact, I yeah. I have, like, I this is another thing I've done several times, Rob. I'll build my own table library. But when you look at the and you might be tricking yourself into thinking that too. But when you look at the 10 stack table features, that's when it really starts to open your eyes to, oh, yeah.

There's a lot here from, like, expanding a row to having sorting individual rows, which columns are visible, Scott filtering, sorting by multiple rows.

Man, it's like Wes all want those that functionality. We're used to having that functionality either, like, Excel or Notion or whatever.

And when you start to build that stuff out Vercel, yeah, I can build a sortable table. You can Scott. You can click on it. But then I can build a filterable table. But can I build a sortable filterable table with multiple steps there, like complex filtering or anything like that? It just gets it gets heavy really quick, and it it becomes something you have to maintain Wes this just becomes a system you have to learn. And, again, since it's headless and works with anything, you could just bring it from place to place.

Yeah. There's there's quite a few. If you get into, like, enterprise widgets, there's quite a few companies in that space that simply just like, yeah. We get it. You you need a very actually, it looks like Tanner himself has a g grid, which is a, like, a paid version of it. Yeah. Like, he works on an extremely data heavy application, so he knows that what's needed with to make these types of things performant and very extremely functional.

Yeah. I did a, AG Grid sponsored level of tutorials a long time ago, and I did a few videos on AG Grid before TanStack existed. And that was like, wow. This is a whole world. When you need a lot of lot of data in a big table, it becomes a completely different problem than you might be used to having.

So that's headless. And the next one we have here is, like, unstyled because when you use headless, you still gotta bring the divs yourself, and you still gotta hook up the event listeners Vercel. And you still gotta render out all the spans and the divs and and all of that type of stuff. And often people say, yeah. Okay. I I just want I don't I don't wanna make my own date picker with, like I don't wanna have to render out all the days, and I don't wanna have to put divs and everything. Like, just give me give me the markup as well, and I'll put some CSS on it.

So that's this is what I'm calling unstyled.

They're primitive components or pieces.

They bring the elements, and sometimes they have some very, very minimal styles, handles all the refs, all the event handlers for you. And often Wes you use them, it will just dump Times New Roman text on the screen, and it'll work.

You'll be able to filter it and and whatever, and there's classes added to the selected items, but it doesn't look like anything. It's up up to you to sort of bring the rest.

Yeah. And let me tell you. This is my favorite class of these things. If I'm picking tools, it's almost always going to be from this class of things. Why? Because I do like that it provides more, but I also like that it provides less. I don't want your CSS library included in things most of the time. Why? I'm almost always bringing my own CSS. Now that isn't always a requirement because I'm working on usually, you know, customized layout customized, like, branded sites. Right? I'm not working on these kind of generic looking admin tools or things like that.

And sometimes you want something that just gives you everything, and you don't have to think about it, and it just works.

But most of the time for me, I want something that I can make look how I want it to look while at the same time, I don't have to worry about just about anything. Right? I just can get these things to work. And even on top of that, this is something that, again, I mentioned JS the older and grumpier I get, the more I want my things to just work with everything.

I I'm I find myself reaching for [email protected] way more often than not. These things have, like, no CSS. They work in anything because they're web components. Well, at least they work in things that work well with web components. There is even React support if you're reactive and you need the virtual dom stuff.

So, you know, I find it tools like this to be, like, really the sweet spot for me. Just give me as if the thing was an HTML element, just give me that and have it work. Let me style it.

Not like the not the checkbox style of HTML, but more like the input style of HTML Wes I can make it look however I want it to look.

Yeah. And often, these components will not just be a single component. They will be a component with all of the pieces that go along with it. So if you have a table component, they'll give you a table root, header, row, row cell, and they basically just reimplement all of the parts, and they all sort of come together. And that's beautiful because you still have a lot of control over how and where they're rendered, but it does come with all of the like we said, everything is sort of wired up for you. It off often will have variant support in there as well where you can pass like, an example is should the modal box close when you hit escape. Right? Like, that would be an option that you could pass to these components. So they'll have the ability to have a set number of default props on there that you can set and unset, and that's really good because you don't have to recreate all of those yourself. And I'm with Scott as well as I love this sort of area, and not everything we're gonna be talking about sort of fits cleanly into one of these categories. A lot of them sort of overlap with each other, but I do like having full control over this type of thing with my own CSS.

Yeah. And and let me even just shout out too. Like, one of the harder to build types of components that, again, I I find myself building a lot is a drawer.

The thing like with with shoelace. Right? It's a basic drawer web component. Works on anything. But with shoelace, it comes in here. Now you let's say you have a drawer. This drawer could fly in from any direction. It will close. There's close buttons. You can rig up your own events to close it. You have access to the JavaScript if you wanted to do that. You can quickly and easily add, like, dragging functionality to it, anything like that. So you can build the thing that you Node, it's it's really not that hard to build, but it takes you no time at all with something like this. You drop in. You import the 1 component that you want. Next thing you know, you got it. Mhmm. I just thought of a a really good example that you said when you said where it can go and you can drag it and whatnot.

The Toast messages, how many times have you been on a website and you try to swipe away a Toast message, and it doesn't work because it's not wired up for for swipe events? And we're we're so used to, like, native apps and and being on your on your phone or on on Mac OS and be able to, like, get that get that thing out of here. You know? You just swipe it.

And when that functionality is not built into a website, you go, ah, that's not as nice as as what I'm used to. And, like, that's not easy building that, like, swipe away functionality.

So Yeah. Yeah. And in that same regard, there's no UI kit for the web beyond HTML elements. And there is that project Open UI, Open Hyphen UI .org, that is kind of doing a lot of this research into, you know, these types of UI elements. But, yeah, what we have in HTML is really the UI kit for the web. And that's where I I do think there there's a big opportunity for web components specifically here because they really truly are the UI of the web as long as you're finding good stuff.

Exactly. I I even think, like, the web component is maybe even the polyfill for a lot of the things that Open UI is working on. So Open UI is a standards organization that is researching.

Okay.

We Node, obviously, more. There's a reason why we have all of these things. We need more control over it. Peep nobody uses input type of date because it's frustrating as hell. It doesn't do everything we need it to do. So they're trying to figure out how do we get a better better UI components, and they've done quite a bit of work already. There's there's quite a few things already in browsers, and we'll talk about that in just a sec. But some examples of unstyled JS, obviously, shoelace is a really big one. You can it's Wes components. You can use it with pretty much everything, which is the best. React area components.

So React area has something in every single one of these, which is really cool. You can go in at any point. So React area components are just React area, but it does a little bit more of the work for you, but it's totally unstyled.

Headless UI is from the Tailwind folks.

Radix UI, I don't know if this one this one sort of bridges the next one because if you're not using the primitives, you are able to pass in a bunch of props like gap and color and size.

And I always I always hate that when you're building a component. I'm curious what your thoughts are is Wes people change CSS properties, like, oh, I wanna change the the font color, then they, like, implement that as, like, a prop of, like, font color to to the component. No. Let me put a class on it that defines the font color, or let me just go and select it somewhere else and and apply the CSS to it. I don't want to have to reimplement all CSS via a specific prop. And sometimes I get it with, like, columns and

and rows and whatever, but Wes do you think about that? Yeah. You know what? It's something also too that you you get in the web components world because of the whole shadow DOM thing where styles can be, like, really tightly scoped. And we've seen this in the media chrome package is what we use for our video element. And, obviously, a concept of, like, props is is not really the same as it is in React. I don't like this. It's in React world specifically or anything that it doesn't allow me to set these things. The way I like it the most is, 1, is having it be accessible via classes and CSS is is the best with an addition of having it also be accessible with CSS variables.

If I can set a handful of CSS variables, like, oh, the accent color for this is equal to my accent color, that's fine with me. That then it updates to the whole thing. I don't need it as props. I'd much rather have it be, you know, web standards like a CSS variable setting if I'm doing it that way. But even then can get a little pain in the ass if those, variables haven't been exposed. Like, let's say you haven't really tightly scoped yeah. Right. And there there isn't a CSS variable. That could drive me nuts sometimes.

But yeah. Yeah. I that that's frustrating because there's I guess there's 3 levels there. Is it a prop? Is it a variable that you thought of, and now I have to figure out what that variable is to change? Or is it just straight up CSS that I can pop Sanity classes on or, select it with a selector? And I like the the very last one that I said. Like, I'm just looking at the the Radix UI. And to be clear, you can do the CSS way with Radix UI.

Shad c Node does that. But, like, I'm looking at the checkbox example.

They have a size prop that's 1, 2, or 3.

Mhmm. And, like like, why is there only 3 sizes of checkboxes

made? Does that relate to my website? Right? My website is gonna have different heights and widths and different requirements. So is my website size 1, 2, or 3? If it's not, you know, what do I what do I have to do to get it to be the within the dimensions of everything I'm doing? And if I can't, then I can't use it. It probably is computed based on font size,

but, yeah, it is. But just let me let me pass a font size. Yeah. I don't I I'm probably like, I I'm probably making some people mad here. I know. Yeah. Yeah. So it's like, it is it is relative to your application. Yeah.

I understand where if you narrow the amount, especially with the design system, if you narrow the amount of choices, then you get much better consistency Mhmm. Which I totally understand that as well. And you say, alright. You only have these knobs to turn and these possible options, then you have a lot more consistency.

But even even then, I kinda feel like I I would wanna pass it via variable.

Here's what I want, Wes. Yeah. I want the knobs.

I want those knobs, but I also I also want the flexibility to bypass those knobs. Yeah. You know? Let me go straight to the dome here and figure out exactly, you know, the way I want this to be tweaked or whatever.

But if I want it to just be simple, give me this the simple option as well.

I like that.

Other ones, base UI, which is from like, I went down a rabbit hole researching this episode. So material UI, which I've I've trash talked a couple times on this just because not because it's bad, but because it the old material UI that every single website uses, it feels very creaky.

Material UI is now rebranded to MUI, and their stuff looks really, really good. I don't even know if it's part of Google anymore.

Well, Material UI, I don't know if Material UI was ever part of Google. Material design was the Google design standard that they've released this. This is our design system.

And then my understanding, and anyone can correct me if I'm wrong here, is that the Material UI folks took that and turned it into a UI library.

Oh, okay.

It's it's kinda funny because it kinda killed Google's own, like, feeling of stuff. You know? Sometimes you hit upon some older Google properties that have are still running that that feeling, and you just go,

every crappy website uses this. Anyways Yeah. Well, we'll even be sorry. Before we even do that, can we take another detour here? What is going on at Google with their design stuff? Like, that new that okay. I you know, that new login page is atrocious. It's awful. But, like, I it feels like every other day, I'm something I'm seeing something that has, like, absolutely zero attention to detail in their design. I don't, like, I don't know if if it's just that they have a lot of products and a lot of stuff to keep track of, but, yeah, there's something going on over there.

Yeah. I don't I don't envy the people that have to to work on that type of design stuff because it's I guarantee a lot of it is just like, well, I don't know who or where that has been set, but I'm not going to spend 3 days trying to adjust the padding on that specific thing. You know, like, the bigger the organization, the harder it is to sort of move these types of things. So it can be really frustrating, I bet.

Totally.

So base UI is the unstyled components from Material UI. So you get the divs, you get the accessibility, you get all the functionality in the state, but it doesn't come with any of the, like it doesn't look like it, which I think we've sort of learned that from early bootstrap Foundation Material UI. We sort of learned that, okay, it was really cool that we got all this functionality for free, but nobody also changed what it looked like. And then the entire web started looking exactly the same, and all the buttons had that little bursty effect when you clicked them.

I got kinda sick of it. Yeah. I you know, I like that effect so much when it first came out. Me too. Because I I'm really soft spot for it, but it is looking a little creaky like you mentioned. And this base UI does not look creaky. I think it looks great. Yeah. Yeah. They're they're doing quite a bit of stuff. Even a little later, they have this new thing called pigment CSS, which Yeah. It's kind of like a

CSS only style components replacement.

We'll dig a little bit more into it. But the 3rd category that we have here are styled starters.

So this is one where I think a lot of you hackers listening, even I used a couple of them on a recent project JS because I just want to slap the thing together.

I want it to look good. I want it to function well, and I don't really care all that much about doing my own custom design, at least not yet. You can tweak it and whatnot, but you just want some really nice starting styles.

Want some nice variables.

You want extendable components, and that's the sort of third category that I called styled starters. And Node kind of cool trend I'm starting to see in this space is the copy paste. Instead of Npm installing these components, the thing that you do is you simply just download a zip file like it's 2007, and just drag and drop them into your project, and you have all of the code that's in there. So it's not something that you're like, oh, let me take this base and extend it. It simply JS just like, oh, here's a template. Let me start hacking on what this component looks like. And I really like that because it's always a a difficult balance between, like, Pnpm installing something and not having enough Wes it Mhmm. Or building it yourself.

And this just, like, drag, drop, hack it yourself.

You don't have to update them in the future. You simply just put them into your your project, and you're up and running.

Yeah. Totally. And that that I'd like that a lot too, especially because I'm the type of person that wants control. I wanna take control of that template.

But having that template to start is great. And there's also a lot of these that give this to you via, like, a CLI tool. You just say, hey. Go get me this component right now Yeah. Thing. Next thing you know, it's in my put it in my project. Yeah. Love that. Sick.

I think these ones are tough because you can get into a situation here where you have a thing that relies on a thing that relies on a thing that relies on a CSS library that also relies on a post process or who knows what. And you can get into a system where something in that chain has changed. Right? React has now changed how they do things. Now you're responsible for how this library is doing. You've brought that code in. You have to refactor it now. Or perhaps the CSS framework that it relies on has now changed, and you have to now be responsible Yeah. For how that CSS framework has changed. So it's just important to know when you're bringing in any of these styled starters or anything that relies on many other things, like, what are you now responsible for? You always talk about that that Kanye West tweet where it's like, now I'm responsible for this water bottle or whatever that was. You yeah. Yeah. That's that's me with, styled starters. It's like, alright. Now I'm responsible for all this CSS then that I can take care of. Yeah. Because

a lot of the times so let me give a couple examples, and I'll explain. These are Shad Sien, Tailwind Catalyst, React ARIA Components has 2 starters, Tailwind and vanilla.

And you had another one here, Melt UI. There's we're not including them all in here, but just a couple Oh, yeah. Of the more popular ones. Sorry. In Melt UI JS I only put it in here. It's a Svelte specific one, and I like this a lot. It's just high quality

accessible, Svelte components, and it is, I believe, based on, I I think it's based on ShadCN. I'm not positive. So Melt UI folks, you can come correct and update me on that. But Okay. There's a ton of stuff here, and it's just nice.

Salt based. You know? So a lot of times, ShadCN JS probably the most popular one in this Totally.

Area.

They are built upon Radix, React, ARIA, Tailwind. Node ChatCN is not based on all of these things, but a lot of times, these types of starters are in themselves built on top of the the 2 previous categories that we talked about, and they will use an external toast library. They'll use something from Radix UI, and they'll they'll simply when you install them, it also installs those dependencies as well. So they are not reimplementing their own React ARIA or their own Toast library that has Toast functionality in it. They are simply just say, okay. Well, I'm gonna take these libraries.

I'm gonna take this functionality.

I'm gonna take this way of writing CSS, whether it's vanilla or open props or tailwind, and I'm gonna put them all together into these premade components that function well and look really nicely. And you have, I don't know, 30 or 40 different components of anything you might you you have an accordion and a context menu and a right click and a drawer and a toast and a a radio group and a a date picker, all of those types of things. And that's really cool. So you just pop them into your project, and you can get up and running. But like Scott says, then you're responsible for it. Right? Like, you can say, okay. What happens when I update it? I always had this problem with with WordPress themes.

I never liked doing child themes.

Right? Like, where you, like, kind of extend it. I just give me the theme. I'm gonna gut the thing myself. I'm gonna edit the stuff directly.

But what happens when that theme updates? You are out of luck because unless you can, like, figure out if you start changing stuff and then they produce some updates, it's up to you to figure out

where things go. Next thing you know, you're doing a manual diff by hand, trying to copy and paste things from the new version into yours if you want the new version stuff. But, you know, it it it can also be a a really nice thing to just have that where it isn't pinned to anything else. Right? Where if you update your code, it might not break because Yep. You have the component itself, and you can be in charge of if it needs to update or not. Or I I think with these, you're pretty much accepting that you're not going to update them unless, of course, you're moving from function components to whatever the next wave writing React components is.

Yeah. And you can update, like, your dependencies. Like, if there's a bug in RADIX or or, React ARIA on how they handle the escape key when something is focused, then, yeah, you can just update that. But if they have a, like, a breaking change, they release version 10, then you gotta figure out you gotta sort of figure out where where to update those pieces.

Yeah. I do I do wanna say that the shed c n stuff is so good looking.

Awesome. I think at times, it can feel a tad generic Wes I'm, like, on a website. I can say, oh, this is obviously using ShadCN.

But Yeah.

It it looks great. I mean, don't get me wrong. When I say that, I I mean, it it looks sincerely good. And so if you need something that looks good, it almost feels like this is the the modern bootstrap in that sort of way where, like, if you're an engineer, you have no design chops, man, just throw this in here, and your stuff's going to look good. So hey. Why not do it? And it's

it's, like, a it's like the right amount of of base as well. It's a really simple base that looks awesome.

And you get in there. You change your your default colors. You change your default padding.

You set all of your settings. Okay. All of a sudden starting to look a lot different, and then you can sort of tweak it from there starting to add your your own elements to it. So

I'm yeah. Been big big fan of it. I used it in the the last project. That's why I'm most familiar with this one. Yeah. I do want what what is the process for overriding and, like, completely changing en mass things beyond just colors and border radius? Because if you do their, like, customize, it's like, oh, you can change the font and the border radius and the main color. But, like, what is the process for, like, totally skinning this thing, or is that just not something you do?

Yeah. So the way that you do it is you first, you go into your your tailwind config, and they give you ShadCN will give you a tailwind config that has all of the ShadCn colors and defaults and all of the variables that they've introduced, like a destructive and muted and accent, they add all of those things. So you can immediately go in there and set all of your own color schemes and and spacing and and whatnot for the values that you want. Like, a a very simple example is is what does your padding and where are your break points hitting. And then you go into each of the different components that you're using, and you simply just start changing the classes. Right? So that's there's nothing in Shad cn that is hidden. That's the nice thing. There's nothing in the node modules where we're like, I wish I could change that. Right? You could go into your Shad c n component, delete every single class name that is in there, and they would have have no styles. Right? Mhmm. Then your back to would work. Yeah. Then you're back to section 2. So you're probably not doing that. You're saying, alright. I'm I'm using this for for layouts and for cards and whatnot, and then I'm gonna go ahead and start tweaking it. Node I think the idea is as you're building an application, you tweak every single component that you're using Mhmm. To Scott have the look and feel and eventually build a design system or UI kit.

Yeah. I think the only bummer for me about Chad c n, because I think it's fantastic, is that it is React based.

Yeah. If it was web component based, boy, howdy.

Yeah.

Yeah. It's it's funny how so many of these options are all in the the React space, and I think we're gonna start seeing those types of things change.

It's because, like, oh, ChatCN is is based on React because a lot of the Radix and React ARIA are based on, and those are 2 extremely valuable libraries. Like, is there a React ARIA for

Svelte? Yeah. You know what? I I think this is one of those things. If React worked better with web components Yeah. Which React is a pain in the ass to work in web web components.

If React was as easy it is in in, let's say, Svelte, right, because you have access to the DOM, Would we see more web component based things in React? Yeah. Maybe. I think so. Yeah. I because it did to me, that is like, again, it it was never a huge concern of mine before, but now all of a sudden, I'm like, man, I kinda want my tools to work everywhere.

Yeah. Yeah. Totally totally get that. React is so big that It's so big. We have these types of things, and it would be so much better. And and there's also a reason why you don't see a lot of Svelte specific libraries.

It's not because Svelte is not big. It's because you don't need a Svelte specific library for that. You just need a JavaScript library for it. Right? And, the web components is the the answer there. Totally. Yeah. Yeah.

Last 1 we have here is UI kits design systems. A design system is a lot more than this. I I realize that. But in the context of, like, okay.

You are going to now group together all of these components that you need for your application, and you can call that a I I like the the word UI kit. It's an implementation of how you like to do all of your components and how they work and collections of how they will work together.

Often, a lot of your components are going to be, oh, I took 6 of these different components, and I put them all together to make up a much larger component that we use. And, also, it has all of the styling, so it looks like our specific application.

It's themed. The ability to theme it. You have your custom components in there. And the example I have here is the React Spectrum. So React Spectrum is Adobe's React implementation of their design system because that's the other thing is your apps are maybe not all in React, and you have a design system. So it needs to be implemented in native Bos, and it also needs to be implemented in in React and maybe in a couple other UI libraries. But React Spectrum is Adobe's implementation there, which is based on React ARIA and React ARIA components.

I can't believe we're an hour in already. Deno my gosh. There's so much stuff here. It it is a when you said you went deep into this world, I was like, yeah, buddy.

I have, I've done quite a bit of hunting in this space myself, and there's just endless amounts to find here. And you know what? Every single time you think you've found them all, you'll stumble across something that's like, oh, here's a a fully featured UI kit that has a 1000000000 components and is perfect. And you're just like, how how could I possibly missed all of this stuff?

So if we missed your favorite one, there's there's a ton here. I'll rattle through a bunch of them in just a sec, but, let's let's just end it off with a bunch of things to consider.

Escapability, how quickly you can get out of using something, adaptability.

If you need to make something that does not exist, how easy is it to do that type of thing? Like I said, you're probably gonna have specific use cases for your application, and there's gonna be a component that doesn't exist. How easy is it to make one that sort of looks like and functions like the rest of the components in their framework. We talked about that. Does it only work with React or does it work with all of them? TypeScript support, Versus Node support, auto completion, prop unions, linting, lots of tooling around these types of things makes authoring them

way easier. Word. Yeah. The adaptability is a big one because every single time you pick up one of these things, especially if the they're styled specific way, you are buying into the way that thing looks. And if you cannot add on to it in an easy way, next thing you're gonna do is have 1 component that sticks out like a sore thumb, just because it wasn't included in that initial batch. So you don't want that.

Standard space is something I've not seen a lot in this space.

We're getting a lot of these things added to HTML.

Right? We have open UI, which is working on adding combo box, multi select filtering.

They already have added the popover API. It's now in all the browsers. It's amazing. If you need to do a pop up, we now have a full blown API for for that type of thing. So maybe you don't need to be using islands, or maybe you don't need to be using, portals in your application because a popover API will allow you to render wherever you want, but then pop it over.

Yeah.

And and on the same regard, if you want, to learn more about this stuff, I'm gonna be speaking exactly on that topic at JS nation in Amsterdam.

Man, this this conference is is crazy good, June 13th through 17th. If you look at the Very good question. Lineup for this, it's absolutely wild. Mister Doob from 3 j s.

Anthony Fu is gonna be there. Oh my gosh. I'm just, like, looking at the lineup, and I'm getting major, major imposter syndrome. Looking at all these in incredible speakers, ESLint Clark, Fred Fred Schott from ASTRO, who's been on the show a number of times.

Yeah. I'll be speaking exactly on this, which is, hey. What are these things now that you don't need JavaScript for? So that that's the the concept.

Just gonna rattle through a bunch of the names here, and we'll have links to everything in the show notes, so you can Scott of do a little bit more exploring because I know that people are saying screaming at us being like, you didn't mention ours. The one that I love, pigment CSS, which is from the Mui folks, it's a Deno runtime CSS in JS library that extracts the collocated styles to their own CSS files at build time. Oh, that's kinda kinda interesting. So this is a I think this is a React thing as well.

I think these new CSS and JS libraries that are Deno runtime that it seems to be a big thing that's popping up. The thing I don't like is that most of them are JavaScript object based, including this one. But I hate yeah. Don't like that either.

Mhmm. Give me regular CSS. I want so I have this problem with my current website JS I'm using style components on my current website, and I'm trying to migrate it to React Vercel Components.

And I don't use any.

I don't think I do, or I don't need to be using any of the CSS and JS features because now Wes I built it, I did. But now we have variables, and we have, like, so many different things in CSS that make all of that JavaScript unnecessary.

So I'm trying to find something where I don't want to rewrite the whole thing because I just have these I have the CSS colocated with the components, but I just wanna find something that I can just replace the styled API with something else, and it allows it to be server rendered.

I haven't dug too deep, but if anyone knows of what that is, let me know.

So pigment CSS, m u I, base UI, shoelace, we talked about Bos layer Scott dev, jolly UI, draft UI, radix, Mui, headless UI from Tailwind, Tailwind UI, Tailwind Catalyst, ShadCN, Daisy UI, Chakra, Flowbite Flowbite React, floating UI was actually kind of interesting. This is something we didn't really talk about, which is a, like, a helper library for these UIs. And floating UI helps you with if you have a tooltip that you're implementing Vercel, you know how sometimes it goes off the screen because you're you're hovering on the right hand.

This will help you figure out where your pop Vercel tooltips and flips should go. Like should it flip up or flip down depending on how much space there is? So it's kind of a cool library I hadn't seen before. Mantine and Daisy UI. So check them all out. There's probably a million others. Tweet us at syntax f m. We'd love to see what else, you are using.

Yeah. What's your favorite one, and why do you like it? Because, again, this is a wide, wide world. And like you said, I'm sure there's a whole bunch of them. You Node, it's funny because, at one point, you would have said, alright. What are these kind of systems that exist? And you'd be like, alright. Well, there's Foundation, which is just a handful of CSS classes, and then there's Bootstrap, which is just a big old style sheet of CSS classes. And, like, that's what we have for the the UI component kind of world here. And it's amazing how far this stuff has come now where we have these full and interactivity based components and, man, yeah, cool stuff.

Alright. Well, that's it. If let's get into sick picks, the part of the show where we talk about things that we like.

Wes, do you have a sick pick prepared for us today?

Yeah. Let me let me grab it. One sec. K.

I'm sick picking the battery daddy.

Oh, yeah. This thing is I got this for Christmas, and it's a battery organizer for all of the different batteries that you have. And that's one thing about having a lot of kids is you always need batteries. And it's actually kinda one thing I pride myself on versus what I had when I was growing up. When I was growing up, we were sneaking batteries, and I feel like batteries are cheaper these days than Way cheaper. When I was growing up. Because And rechargeable batteries are better. Yes. We got every every single kind of battery that you could ever possibly imagine. Mhmm. We don't we don't do the rechargeable things because what happens is my kids put them in a toy, and that toy gets donated. And I just sent $8 worth of batteries to to the Valley Village down the street. So we have I got all kinds of in in in here, and it's just a really nice way to organize them. The only thing I'm not a big fan of is I wish there was a little bit more storage for coin cells.

So I have every single coin cell you could ever imagine because I've run into way too many situations where I need a diff a random coin sell. And I have them all in here, but I wish I had a little bit better organization for coin sales. But other than that, the double a's, the triple a's, the d's, the c's, the I have some weird lithium flashlight ones in there. Big fan of it. It's called Battery Daddy. You can find it. I think my wife got this at Costco for me. There's lots of options out there for different battery organize organizers.

Yeah. I did put the battery daddy on my Christmas list when I saw you have that on your your story for as I was And did you get it? Is what I need. Node. I put it on for next year's. Oh, for next year. Right on. Yeah.

I have to wait for the battery daddy.

I do I do do the rechargeable batteries. I put on in the show notes here a link to what I buy for the rechargeable batteries.

Amazon gives you 24 rechargeable batteries for, you know, $30 or so, which I I end up buying these somewhat frequently, these big old big old packs of rechargeable batteries whenever you need them. The 24 pack of triple a's is $20.

So I go with just the straight up Amazon Basics brand of rechargeable batteries, and I found performance to be a o k Apparently, they're they're enaloupe.

I've I've looked into it before. They are the, like they're made by the, like, high end rechargeable.

Yeah.

And Enerloop, I think it's called. Yeah. But you so you buy them frequently? Why are you buying rechargeable batteries frequently?

Because that's a great question.

No. Because just like you mentioned, kids. Right? As the kids get older, they have gotten way more things that require batteries. Oh, they're just in things. Yeah. They're just in things. So next thing you know, you know, Courtney buys some automatic LED candles. Alright. That's a whole bunch of batteries. You got a couple batteries per candle. Then next thing you know, I've used up the whole pack. So, alright, gotta order another one. So I never wanna be in a situation where I don't have a rechargeable battery ready to go. The locks on our house each take 4 rechargeable batteries. It's just stuff like that. Oh, yeah. Each thing you know Node that for that. Yeah. We have our locks are are takes 4 double a's.

And probably 3, 4 times a year, you replace them. That's a that's a good use case for it. So maybe I will get this. But what about a charger? What what do you have? It's just a I use this one that's like a it is like just one of the cheap drop shipped Amazon ones that's in a weird configuration that is like a circle where all the batteries are pointing inwards for some reason. Oh. And I'll I'll link it up in the show notes. The, man, I bought it because it was very cheap, and it charges 16 at once. That Wes, like, my my qualifications. It needs to charge a whole bunch of them at once. It needs to be super cheap because I don't care about it.

Yeah. Yeah. But this is the one You convinced me. I think I'm gonna

try the rechargeables.

Yeah. I I I just I have this thing kind of always plugged in, whatever. I always have some cooking ready to go. I'm going to sick pick a lazy Susan for our fridge. And I did Google to make sure that lazy Susan was not an offensive term in 2024.

Apparently, it has something to do with, Thomas Jefferson's daughter or something. So, yes, a lazy susan is just that little spinning turntable. You could just call it a turntable too. But we have one of these acrylic ones for our fridge.

And, man, I didn't know I needed this. You know, you Scott condiments or different things and you you're pulling stuff out to get the stuff in the back of the fridge. We just pull in these little acrylic turntables in the fridge. Next thing you know, got easy access to everything. You don't have to pull a bunch of stuff out. I'm a fridge systems guy. Oh. When when the groceries come in, I'm putting them in the fridge because I don't want my system to get messed up. I have a perfect system, and I like it the way it is.

My my dad we we took a picture. We got a new fridge recently, and my dad looked at the picture. He's like, oh, wait till that fridge, system or whatever. Wait till that fridge gets used a little bit. Your your, perfect system's gonna go out the door. I'm like, no. It's not. My system is is going to stay. I

I will keep it that way. Drives me crazy when people don't use the system.

My wife will put salad dressing Yeah. Anywhere.

Anywhere. Wherever it fits. Salad dressing It fits. On the did. On the you know, the fruits and vegetables in the door.

No. Mhmm. No. Drives me crazy.

Yep. Did you get the the egg dispenser? I sick picked that, like, a year ago, and I had the egg dispenser. Yeah? Yeah. Oh. Yeah. Yeah. So good. Love the egg dispenser.

We also have the soda dispenser, which is it's just like the same thing as the egg. It just roll out. It's not fancy. They roll forward as you know. Forward. We have those stocked with the LaCroix.

We Scott another little tray for the kids' yogurts and stuff. Yeah. We got tray city going on inside of our fridge, and it really helps. Yeah. Yeah. My my wife went nuts with these acrylic trays from Costco or Amazon or wherever. Yeah. Those things are nice. To help. Yeah. We we used I did that in our, snack drawer. I went nuclear 1 weekend. I was like, alright. We're getting rid of all the boxes.

Everything gets decanted into a acrylic drawer, and it works so much better. I love it. Yeah. Yeah.

Small life upgrade makes big impact over time. Cool. Well, that's it, for the they're the UI components of my fridge.

We'll bring it all together. Love it. Yep. Alright. Well, we will catch you on Friday here for our next supper club. Peace.