Adding shadcn, Tailwind & Radix

[00:00:00]
>> Brian Holt: So I was kind of slow on the uptake of buying fully into Tailwind. It's just like I spent so long getting good at CSS that jumping into this whole different styling system felt like it was throwing away a lot of the skills that I, you know, literally fought years to get. Like I'm so good at floats now, it's ridiculous, which is not to be proud of. It's more just like a shared trauma experience. But Tailwind is one like everybody uses Tailwind now, right?

[00:00:32]
And it's great. I like Tailwind and specifically Shad CN. Like Shad CN, I don't know if this is controversial or mean to say, but it's like the new Bootstrap. I don't know if you remember, like, God, this would be like probably like 10 years ago, yeah, like 10 years ago where every website looked like Bootstrap. Every website used Twitter Bootstrap, and they all started just looking exactly the same, like the same rounded corners, the same components.

[00:01:02]
And I feel like we've like went super far away from the people like, no, it's going to look nothing like Bootstrap. I want to be unique again. And then we've kind of looped back around because time is a flat circle. Like everything looks like Shad CN now, right? Everything looks like Vercel.com now. And you have Shad CN UI to thank for that. That being said, it's actually a really nice design system.

[00:01:25]
I think I'm being a bit facetious because Twitter Bootstrap was fully just like holistically copy and paste this entire input in here and do nothing to it, maybe minimal theming, whereas Shad CN is actually more of like a design system that has like design tokens and you can modify it to fit your needs. So yeah, I'm exaggerating, but it is funny that everything's starting to look like Vercel.com again.

[00:01:49]
So it's based, Shad CN UI is based on Radix, which is in and of itself, they're both component libraries. Shad CN builds on top of Radix. This is actually from the WorkOS docs. So Radix is made by WorkOS, which is perfectly awesome. I was at their conference last week. It's an awesome enterprise kind of auth sort of thing. You could definitely use that in this course instead of Neon Auth. That would be a perfectly acceptable way of doing this as well.

[00:02:17]
But Radix is like a component library and it's very oriented towards having like good accessible, kind of like unstyled, but still well put together inputs. And Shad CN UI takes those Radix components, some of them, some of them builds themselves, and it reships them with like a basic kind of design opinion enforced on top of them, right? So Shad CN UI builds on top of Radix. That's I just wanted you to understand the hierarchy.

[00:02:45]
If you like all of the components, but you don't like the styling of it, you would just use Radix directly. Maybe state it differently, if you're using React and you're using UIs, you probably should use Radix, just generally speaking. They're really good. You can put your own design system on top of it. It's a choice to use Shad CN on top of that if you want to, if you like the styles that comes with it.

[00:03:13]
But I can't think of why I would build a project these days and not use Radix. Because it's really good. And building for accessibility and usability is hard. It takes a lot of time, and the folks at WorkOS think a lot about that, you know, comparing Radix to other headless UI libraries, like, for example, RQUI or Headless UI. What do you think Radix is your preferred one? The truest answer to that is it's the one that I know the best.

[00:03:47]
I've not used the other two, so I really couldn't comment too deeply on them. But it's just like I see it everywhere now, and there's a really rich ecosystem around Radix as well, so like, even if it's not built into the Radix itself, there's usually someone else who's made like the drag and drop for Radix or something like that. I don't know about drag and drop, but like something like that as well.

[00:04:10]
It's popular. It's probably maybe you stated differently is what I do. There's a link I got, so go to the Tailwind docs if you're trying to go there. I need to go fix that link. Yeah, so both in turn are built off of Tailwind. Mark, I assume there's a Tailwind course, right? Mr. Steve Kinney. Oh, of course, Mr. Kinney himself. So if you need to learn more about Tailwind, Steve's like, I greatly admire Steve as a teacher.

[00:04:38]
Go take his course. But the idea here is you have these atomic little classes instead of writing like all the CSS which is very hard to maintain. Again, from decades of shared trauma with that, yes, it is very hard. I remember when I was at LinkedIn, we shipped like 3 megabytes of CSS because it was just an unmaintainable mess, which is no one's fault indirectly, but it was also collectively all of our fault.

[00:05:04]
So Tailwind kind of alleviates that by like, if you delete the component, you're inherently deleting all the CSS that was going to come with it, right? So all these are built on top of Tailwind itself. So that's why you see like, well, we're not going to write any CSS today, you and I. I did write a little bit for you. Yeah, if you've never used it before, it's pretty abrasive in the fact that it feels really anti-pattern.

[00:05:33]
It feels like writing like CSS or style tags on every one of your individual components. But the idea is essentially that you can self-contain your design system into your React system, and so they become coupled because inherently they kind of are. So if you delete a component, all the styling that would come with it goes with it. If you're building these things kind of correctly, you'd be building a component library and using the component library, and you wouldn't be writing much Tailwind itself outside of your component library.

[00:06:10]
That's the idea. It's aspirational and it frequently doesn't work that way. Yeah, it's just, it's one of a critical mass of UI developers. I think it's just because you kind of have to do that full arc of like, oh this sucks to write this, then you kind of realize like, oh, if I write this well, then a bunch of things just kind of work for free. So that's at least that's been my own villain arc with Tailwind.

[00:06:32]
Yeah, when it's well done, it's delightful to work with. This is a fun fact for me. Shad CN is a person. I didn't realize that when I started working with this, I was like, oh, he just named the UI library after himself. Yeah, he works at Vercel, which is probably not surprising to a lot of you. It's a, yeah, it's an opinionated set of, Shad CN UI is an opinionated set of styles and components, and it's a CLI that you can just say like, hey, add the button type to me, for me, and it'll go download that, install that into your project.

[00:07:05]
It's nice to work with. I have a version here, but let's just do latest, because that's actually probably what we really want to do. Yeah, we're going to do Shad CN at latest, not this number here. So we're going to go into our project here. Npx and we'll just copy and paste all of this. Except I'm going to put instead of 3.3.1, I'm going to put latest. You say yes. You can pick whatever color you want.

[00:07:43]
What did I pick in here? I want slate. I don't know. I don't think it really matters. I mean, it actually deeply matters because how your site's going to look, but for the purposes of learning in this course, it does not matter. Cool. So we're going to add 2 things here. We're going to add a navigation menu and we're going to add a button. So this will take care of adding a bunch of things like CSS helpers and all that kind of stuff.

[00:08:26]
We don't have to worry too much about it. So again, at latest. Add Shad CN navigation menu. And like, I love that this just kind of works, like if you go back and look at our project here, and we look at our source, like these just start showing up. Yeah, it is annoying that they do this. So you do want to drop these import star as React because that's just taken care of already for us. And some of these you might have to modify.

[00:08:59]
Npm run lint. I ran into this earlier. Yeah, you can see this actually does get like a, have some issues with our formatter, right, because it's putting code directly into your codebase. I'll show you how to fix this in just a second. But we're going to do Shad CN and we're going to put button as well, and we'll do this all at once. OK. So I think if we do run lint again, yeah, we have 6 errors and a warning.

[00:09:41]
I believe if you just do fix. Npm run lint fix and unsafe. And then now if you run lint again, yeah, it just fixed it. Now you might be asking me, Brian, what did to fix and my true answer to that is I don't care because it passes now. More, but like it just like it'll reorganize some things, it'll fix some of the spacing, like a bunch of stuff like that. So it's like stuff that you really don't have to care about.

[00:10:09]
I generally don't modify the Shad CN components directly unless I have some specific thing that I want to propagate to the entire site. I'll usually go pull in like the button class to like a nav button and then I'll modify it there. But in as much as possible, I like leaving these kind of mostly untouched. But the reason why they put them into your codebase is so that you can modify them as you need to, right?

[00:10:41]
It's nice that you're not pulling it in from some third party library and it's unmodifiable, right? Now it's actually in your codebase, it's trackable, it's modifiable. Yeah, I like the pattern that they've adopted here. OK, so we have a navigation menu, we have a navigation button. We are going to go create navbar. Nav-bar.tsx. OK. Now, again, you might be, let's see, and we want this in your components, not the UI directory.

[00:11:19]
Yeah, so you have a UI directory that has all these things from Shad CN, and then outside of this, I'm going to put my nav-bar.tsx, and I'm going to just, we're going to code one of these components by hand together just so we can kind of see what that's like with Shad CN. But none of this should actually really surprise you. It might be surprising that it's not actually that different.