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

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

and the date picker input type of date in the browser has actually it's starting to get better, React developer through and through, but

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 React implementation has 2 starters, Tailwind and vanilla.

the different, like, levels of them. So we're gonna go through headless, pretty good by default in the browser, but So base UI is Anywhere. Wherever it fits. Salad dressing It fits. On the did. On the you know, the fruits and vegetables in the door.

that JS really frustrating to me when somebody gives you a massive drop down and But Mhmm. And, like Oh, yeah. This thing is you try to swipe away a Toast message, and it doesn't work because it's not wired up for for swipe events?

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, because 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,

And sure enough, you could build these things yourself. Right? I mean but

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

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.

what are they? The logical properties, the ESLint margin, and the logical margin.

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

file triggers, previews.

that internationalizationable.

Yeah. So let's start with, the first one, headless, which essentially means that

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.

that's not exactly

Yeah.

That's a bit of a bummer that you can't filter it by by default. So if you have a nice filterable 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.

all of these sort of build upon each other, as they give you more opt in. And with something else, and it allows it to be server rendered.

usable as well as

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.

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.

Yeah. It always drives me crazy when you have to, like, pick something that's, like, 3 years ago, and there's no way styled starters,

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 an example is should triggers functions that should run.

Word.

when you build them yourself,

Yeah. And even too with that, auto completion.

reach for a library when doing these things because, again,

you were getting 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, 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? So I go with just the straight up Amazon Basics brand of rechargeable batteries, and I found performance to be

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

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

Right. Yeah.

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? another long time. And then today, requirements. So

to interact with these things. It provides the functionality and accessibility. It provides things like state. Right? So Yeah. Yeah. And in that same regard, there's no

how, you know, words and different messages work 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

for your country, and you're looking for Canada.

the JavaScript

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.

in a matter of minutes by simply NPM installing this thing, and this thing actually looks and, works really well.

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've been using those nonstop lately, like, the only things I've been using. So just having those considerations, it's not everybody

And 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

And then on the other side, you have

You might be thinking of, like, you have a drop down menu, could have selected items, is focused, is open,

to go up and down and hit enter Wes you're on a specific one. What happens when you hit a specific one? And when that functionality is not

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.

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,

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.

are one of the biggest ones

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

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, you can come correct and update me on that. But Okay. There's a ton of stuff here, and it's just nice.

which is a great word that you've written here,

because they need to be able to to handle

And if you hit escape,

Combo box, menuing, tooltips, So when you are picking a UI component, they need to be a couple of things. They need to be functional,

November

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

simply just, oh, I can get an amazing UI click together

you end up having almost always more considerations than you'd expect.

you save something in your website, and it says

was when it wasn't existing. That stuff is pain all the way down,

15th, 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 So that's headless. And

I think date especially date range pickers, like you mentioned, that infuriate me as well. Like, when when places have bad date range pickers,

across the world. Right? If you have something hard Node in your component, I always say close, Alright. That's it. End of the day. You can style it how you want, whatever.

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

and

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 what this component looks like. And I really like that because it's always a a difficult balance between, like,

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

and then there's Bootstrap, code

Adobe's

Amazon gives you 24 rechargeable batteries for, you know, $30 or so,

adaptability.

It's themed. The ability to theme it. You have your custom components in there. And

storage for coin cells.

and Daisy UI. So unstyled,

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

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, I've always said radix. I you know, just give me that and have it work. Let me style it.

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.

try the rechargeables.

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

Escapability, the functionality

to make up a much larger component that we use. And, also, it has all of the styling, so it looks like from what it looks like or or what the actual HTML looks like 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 changing the classes. Right? So Yeah. And often, these components will not just be a single component. They will be 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

And, where things go. Next thing you know, you're doing a manual diff by hand,

React ARIA and React ARIA components.

Flowbite Flowbite React, all of the ShadCn You'll be able to filter it and and whatever, and there's classes added to the selected items, internal state, data fetching. We'll talk about down downshift JS in just a sec, but that is a very common one 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, 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 how quickly you can get out of

Mhmm. Give me regular CSS. I want

and my dad looked at the picture. He's like, oh, wait till that fridge,

I have to wait for the battery daddy.

yeah, buddy.

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 doing my own custom design, at least not yet. You can tweak it and whatnot, but you just want some really nice starting styles.

that make all of that JavaScript unnecessary.

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, there, which is based on

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

I got this for Christmas, if you're not using the primitives, Okay.

Apparently, it has something to do with, Thomas Jefferson's daughter or something. So, yes, Totally. And then And Go ahead. Oh, no. And then next step is internationalizationable,

I have, I've done quite a bit of hunting in this space myself, and there's just

we now have a full blown API for for that type of thing. So maybe you don't need to be using 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,

Right? We have to what you're working on.

of how you like to do all of your components and how they work and collections of how they will work together.

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.

major imposter syndrome. Looking at all these in incredible speakers, ESLint Clark,

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

Yeah.

thing as well.

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,

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.

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

This will help you figure out Want some nice variables.

headless UI from Tailwind, Tailwind UI, Tailwind Catalyst, Yeah. Just announcing changes

based components and, man, yeah, cool stuff.

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.

you are using.

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,

I don't think I do, or I don't need to be using any of the 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.

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.

check them all out. There's probably a million others. Tweet us at syntax f m. We'd love to see what else, autocomplete will open up, and I'll hit escape to get rid of them.

Anthony Fu is gonna be there. Oh my gosh. I'm just, like, looking at the lineup, and I'm getting major,

what that is, let me know.

And Enerloop, I think it's called. Yeah. But you so you buy them frequently? Why are you buying rechargeable batteries frequently? in there as well where you can pass Forms are

that's one thing about having a lot of kids is you always need often people say, yeah. Okay. I I just want I don't I don't wanna make my own date picker

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

You are going to now group together all of these components that you need for your application, so I have this problem with my current website JS I'm using style components on my current website, the harder it is to sort of move these types of things. So it can be really frustrating, I bet.

Everything gets decanted into a on one side, you have more control.

adding combo box, multi select filtering.

and you can call that a I I like the the word UI kit. It's an implementation

support, Versus Node support, auto completion, prop unions, linting,

Because that's a great question.

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.

And I don't use I'm gonna take this functionality.

And and on the same regard, if you want, 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

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

I'm sick picking the battery daddy.

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.

it's a Deno runtime CSS in JS library that extracts the collocated styles to their own CSS files because often your your drop down will be very custom

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.

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.

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

man, I bought it because it was very cheap, and it charges 16 at once. That Wes, like, my

where your pop Vercel tooltips 2nd, 3rd. You know? Like, there's a there's a lot to that. Luckily, we have really good internationalization So this is one where I think a lot of you

I think these new CSS and JS libraries that are Deno runtime

organizers.

I haven't dug too deep, but if anyone knows of 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?

variables, and like, 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 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

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.

in CSS focusable inputs for this type of thing. Or I got into this weird situation where I popped up 2 Node, you know how sometimes it goes off the screen because you're you're hovering on the right hand.

No. Because just like you mentioned, kids. Right?

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.

man,

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

Daisy UI, Chakra,

islands, or maybe you don't need to be using, multiple months and show that, like, alright. I wanna start my vacation on April 8th, and I wanna go to 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 the unstyled

endless amounts to find here. And you know what? Every single time you think you've found them all, you'll stumble across table features,

a o k Apparently, they're they're enaloupe.

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.

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 the d's, the c's, Area.

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

Wes, do you have a sick pick prepared for us today? Because I do like UI components. So it's funny, Wes. This is this is kinda timely because I see this stuff pop up all the time.

something that's like, oh, here's a a fully featured

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,

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.

Fred Fred Schott from ASTRO, who's been on the show a number of times.

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.

their design system because that's the other thing is kinda interesting. So this is a I think this is a React

lots of tooling around these types of things makes authoring them

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

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? We also have the

CSS and JS features because now Wes I built it, I did. But now we have acrylic drawer, to the vanilla like, your dependencies. Like, if there's a bug in ShadCN JS probably the most popular one in this Totally.

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.

of and I'm trying to migrate it to React Vercel Components.

and I'm gonna put them all together into these premade components that function well and look really nicely. And you have, and just drag and drop them into your project, the old material UI they add all of those things. So you can immediately go in there and set all of your own color schemes Yeah. So some examples of this is the biggest one out there is React ARIA.

where it isn't pinned

Radix,

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

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

like a destructive and muted and accent,

I I think it's based on ShadCN. I'm not positive. So Melt UI folks, that it provides 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.

colors and defaults Mui,

from function components to whatever the next wave writing React components is.

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.

those types of things change.

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 is really the UI kit for the web. And

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,

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.

I never liked the thing that you do is you simply just download a zip file like it's 2007, You wanna do highlighting. You wanna use people's you want to be able to use the keyboard,

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.

and then they it would be so much better. And and there's also a reason why you don't see a lot of Svelte specific libraries.

If React was as easy it is in in, let's say, Svelte, right, because you have access to the DOM, sorting by multiple rows.

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 Material UI is now rebranded to MUI, styled starters.

delete every single class name

for that. You just need a JavaScript library for it. Right? And, the web components is the the answer there. Totally. Yeah. Yeah.

so many of these options are all in the the React space, and I think we're gonna start seeing Foundation Material UI. We sort of learned that, okay, is really, really powerful

are in themselves React ARIA are based on, and those are 2 extremely valuable libraries. Like, is there a Like, a really simple example is, 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.

if you update your code, it might not break

a lot of the times so let me give a couple examples, and I'll explain. These are Shad Sien, and it'll work.

React, ARIA,

Yeah.

And Alright. So I'm gonna be talking about what I think are, like, the 4 categories

Svelte? Yeah. You know what? I I think this is one of those things. If React My my dad we we took a picture. We got a new fridge recently,

Would we see more

Tailwind. Node ChatCN is not based on all of these things, but a lot of times, these types of starters

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

is that it is React based.

React ARIA open UI, which is working on and then forms alone. There's so many things. Grouped inputs, Wes people change Often, a lot of your components are going to be, oh, I took 6 of these different components, and I put them all together

that's there's nothing One of them is a date picker,

have that

I think these ones are tough because you can get into a situation here 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.

React ARIA Components using something, even even then, I kinda feel like I I would wanna pass it via variable.

I I think with these, you're pretty much accepting that you're not going to update them unless, of course, you're moving

it's up to you to figure out 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,

Yeah. Which React is a pain in the ass to work in web web components.

Yeah. It's it's funny how that It's so big. We have these types of things, and

But Yeah.

so good looking.

and all of the variables that they've introduced, They Yeah. So a Toast is those little things in the bottom right corner of your,

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.

accessible, took that and turned it into a UI

for even I used a couple of them on a recent project JS because 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

You are out of luck because unless you can, like, figure out if you start changing stuff

It's because, like, oh, ChatCN is is based on React because a lot of the Radix and I'm not going to spend 3 days

are built upon combo box, drop pnpm, essentially anything where you have an input 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.

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.

RADIX or or, I've trash talked a couple times on this just because not because it's bad, but because it

Yeah. And you can update, then you gotta figure out you gotta sort of figure out where where to update those pieces.

Svelte components, and it is, I believe, based on,

to anything else. Right? Where 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.

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

I'm gonna take this way of writing CSS, whether it's vanilla or open props or tailwind, with minimal or no HTML at all. And generally, they're just a bunch of hooks that you can use, that it it gives you. And that Wes, honestly, that that's from Ken c Dodds. That was one of the first, like,

worked better with web components

their own

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

Tailwind Catalyst,

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

made? Does that relate to my

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, 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 it's solid. I'm not trying to say a solid JS thing, but it's, like, very solid. Right? 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,

Times New Roman text to select the year. Cut cut cut cut cut cut. When it's like, alright.

and you just go, I have the CSS colocated with the components, but I just wanna find something that I can just replace the styled API 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 Headless UI is from the Tailwind folks.

Totally.

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

Radix UI, I don't know if this one this one sort of bridges the next one because

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

way with Radix UI.

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.

Oh, 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 our specific application.

Mhmm. Which I totally understand that as well. And you say, alright. You only have these knobs to turn and these But what happens when that theme updates?

replacement.

you are able to pass in a bunch of props like gap and and we'll have links to everything 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

I I'm I find myself reaching for [email protected]

like, feeling of stuff. You know? Sometimes you hit upon some older Google properties that have are still running that that feeling, portals in your application because a popover API will allow you to render wherever you want, but then It's not because Svelte is not big. It's because batteries. And it's actually kinda one thing I pride myself on widgets, It's quite a bit. And I love all the Tansac stuff because, They there's quite a bit to that type of thing. They handle keyboard events, current items, and we'll talk about that in just a sec. But some examples of unstyled

specifically here because

bursty effect when you clicked them.

like, why is there only 3 sizes of checkboxes So pigment CSS, m u I, base UI, shoelace, we talked about Bos layer Scott dev, jolly UI, draft UI, radix, Yeah.

all CSS via a specific prop. And sometimes I get it with, like, columns and

I want those knobs,

that isn't always a requirement because I'm working on usually, you know, customized layout customized,

CSS only style components and, like, full blown UI kits.

I want it to look good. I want it to function well, and I don't really care all that much about

It's it's kinda funny because it kinda killed 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 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

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

researching.

of generic looking admin tools or things like that.

they really truly are the UI of the web as long as you're finding good stuff.

Other ones, base UI, which is from like, I went down a rabbit hole researching this episode. So material UI, which I've This is from Devin Govett. He's behind Parcel JS. He's behind Lightning. He works at Adobe.

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 CSS

built into which is like first, 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

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.

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

possible options, UI libraries. But React Spectrum is Adobe's implementation

it was really cool that we got all this functionality for free,

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

of, like, font color to to the component. No. Let me put a class on it that defines the font color, or because

handles all the refs, all the event handlers for you. And often Wes you use them, it will just dump

website? Right? My website is gonna have different heights and widths and different

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 frequently,

trying to adjust the padding

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

Exactly. I I even think, like, the web component is 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.

over this type of thing with my own CSS.

better UI components, and they've done quite a bit of work already. There's there's quite a few things already in browsers,

it feels very creaky.

They bring the elements, and sometimes they have is the copy paste. Instead of Npm installing these components, And there is a ton of work that's gone into React ARIA on that specific thing. You know, like, the bigger the organization,

I also want the flexibility

let me just go and select it somewhere else and and apply the CSS to it. I don't want to have

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,

And I always I always hate that until somebody does a specific thing. You can make them updatable. So I was building 1 the other day where React functions Salt based. You know? So a lot of times,

Yeah. I don't I don't envy

UI kit

to reimplement they release version 10, 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.

you can do the CSS and their stuff looks really, really good. I don't even know if it's part of Google anymore.

We'll dig a little bit more into it. But the 3rd category that we have here are 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.

then you get much better consistency

scoped yeah. Right. And there there isn't a CSS variable. That could drive me nuts sometimes.

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

and anyone can correct me if I'm wrong here, is that the Material UI folks

I like that.

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.

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, No. Mhmm. No. Drives me crazy.

properties, like, oh, I wanna change the the font color, then they, like, implement that as, like, a prop And this just, like, drag, drop, hack it yourself.

Google's own, I always say radix. Wrong. Yeah. Okay. I say radix.

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

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 Pnpm installing something and not having enough Wes it Mhmm. Or building it yourself.

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 lots of the different options that you have,

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

I just want to slap the thing together.

if you narrow the amount of choices,

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

and hackers listening, 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.

yeah, there's something going on over there.

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

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.

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 that's this is what I'm calling unstyled.

more, but I also like that it provides 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

I understand the very low level, or you can go all in on something and and use all of it. So

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?

And then my understanding,

The thing like with with shoelace. Right? It's a basic drawer web component. Works on anything. But with shoelace,

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, So I'm trying to find something where I don't want to rewrite the whole thing because I just have these and it works so much better. I love it. Yeah. Yeah.

when you're building a component. I'm curious what your thoughts are is that would be a bad day

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

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.

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

functionality.

with an addition of having it also be accessible with CSS variables.

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

if you narrow the amount, especially with the design system,

They're primitive components or pieces.

library.

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

like, branded sites. Right? I'm not working on these kind My name is Scott.

then you have a lot more consistency.

how and where they're rendered, So I have every single coin cell you could ever imagine that is in there, and they would have have no styles. Right? Mhmm. Then your back to

that's where I I do think there there's a big opportunity for web components

you know, what do I what do I have to do to get it to be the

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.

Yeah. You can you can sort of dive in at any point along and intersperse them into we have, like, so many different things

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

and you want to use

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.

on YouTube. Check us out.

and full on UI kits or or design system.

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.

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, 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 Just gonna rattle through a bunch of the names here, better Wes you can you can tether your phone quite a bit for a very reasonable amount of of money.

And

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

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

We've been doing video tutorials. We've been doing little helpful helpers that go along with these tasty treat episodes, 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.

some really interesting things about UI components to me is that tweaked or whatever.

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

something that will help you either with the functionality or how it looks, 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

Sanity and sunny. Everything's melting. Who knows?

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 The Toast messages, They have a size prop that's 1, 2, or 3.

the next one we have here is, like, unstyled it is simply that every single website uses,

for components Yeah. Is definitely

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.

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

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, 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 and 10stack JS,

is really super good. And let me tell you. The data grid world

component for building autocomplete, ShadCN, produce some updates, with, like I don't wanna have to render out all the

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.

that 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 Yeah. Yeah. Totally color and size.

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 is my website size 1, 2, or 3? If it's not,

like, Tanner is you've we've had him on the show before. Tanner is a

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

steps there,

to make it Drop downs. Autocomplete. This is a really big one as well. If you are working on

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

very extremely functional.

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.

a long time ago, and I did

state what is selected and and get all of the keyboard shortcuts and event listeners and filtering and all of that pop it over.

I think the most important part about headless is that

I use that on where

it's it's a wild being able to sort and filter a table and have on the screen, 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,

So having something like this Wes, hey. It's a headless UI for building powerful tables and data grids 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 to learn more about this stuff, I'm gonna be speaking exactly on that topic

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. I did a, AG Grid sponsored level of tutorials

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,

it's a big world. In fact, there's a lot of paid products here. There's a lot of really intense libraries here,

what's needed with to make these types of things performant and

stuff along with that multiple selection. So downshift is is really cool I've I've looked into it before. They are the, like they're made by the, like, high end rechargeable.

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.

because you don't you don't have to some very, very minimal styles,

that reacts to

and hooks

it looks it doesn't look the way I want. Right? Like like, being able to separate the example I have here is the React Spectrum. So React Spectrum is really, And how many times have you been on a website for all of the different batteries that you have. And

React and Solid and Svelte and Vue 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, 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,

event listeners at build time. Oh, that's kinda you pick a drop down $8 worth of batteries to to the Valley Village down the street. So because often people say, yeah. I don't want to use a library because you don't need a Svelte specific library 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, totally get that. React is so big 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 We're getting a lot of these things added to HTML.

Yeah. There's there's quite a few. If you get into, like, enterprise 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

before TanStack existed. And that was like, at JS nation in Amsterdam.

because My wife will put salad dressing Yeah. Anywhere.

There's a lot here from, like, expanding a row to having 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 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, 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. I do I do wanna say that the shed c n stuff is because Yep. You have the component itself, and you can be in charge of if it needs to update or not. Or As the kids get And sometimes you want Yep. Yep. Yep.

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 you get in there. You change your your default colors. You change your default padding.

application, so he knows

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 And

and of UI

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.

different rows and and highlighted rows.

and they will give you props. They give you Scott, and then you have to bring your own HTML

extremely flexible

And the headless UI library gives you all of the functions 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.

most of the stuff we're talking about with Headless are doing child themes.

headless styled,

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.

and make this available for a autocomplete Wes you type in something and you wanna show possible suggestions, but it doesn't look like anything. It's up up to you to sort of bring the rest.

Next one is Downshift JS. This is a really good example of a

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

that's when it really starts to open your eyes to, oh, yeah.

a great option. Not only that, but it's but I also element,

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 Downshift JS is just a React, and it's just a combo box. Right? It's not like a full on,

a few videos on AG Grid

React specific.

that I

typing and selecting items and then needs to render out

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.

sorting individual rows, which columns are visible, Scott filtering,

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

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

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 we're gonna kind of go into each of those as well as talk about things to consider and go through And all of the hard stuff is crossing that boundary from the framework