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

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

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.

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.

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,

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,

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?

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

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?

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

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

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

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.

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.

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,

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.

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.

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.

Totally.

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

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

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.

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

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

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.

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?

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.

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.

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.

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

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

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

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.

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.