Introduction to Shadcn/ui
How to do my gorgeous friends on the internet. I'm so excited today. We're finally going to talk about Shadcn. That's the package name and the guy's name, actually.
So we're going to take a look at how we can use it the next 13, how we can add different components and theming as well, and dark mode and light mode, all the good jazz. So hope you're excited. You want to see it? I'll show you now.
What does this button do?
Initializing Shadcn in Next.js 13
So let's get started, shall we? I have a new installation of Next.js 13 here. So yeah, we get to basically install these reusable components straight into our app and we can customize them as well.
So that's the nice thing about Shadcn is that they have a CLI and then you can just import the button that you need or the input that you need, et cetera. You need to be a tad bit careful here what you select. So we'll use TypeScript for sure. We'll keep the default style here. You can have a look at these if you prefer another base color. We'll keep Slate. Our global CSS is in our app folder, so we're going to keep that.
Would you like to use CSS variables for colors? We're going to hit yes, because this also applies to theming as well. So you could either use CSS utility classes with a prefix of dark, or you could use these variables that they added. So if we have a look here at theming, as you can see, this is like just something standard. You can do in Tailwind, add the BG, the dark prefix, and then that's going to apply when you're in dark mode.
It's going to ask you also to give the Tailwind config JS file, but since we used TypeScript with our next JS, we're going to have to hit tab here and modify this to TS like that.
Import alias, this is where your components are going to get imported to. Utils, don't worry about that. Just hit enter a couple of more times and that's it. This is going to do some merging of classes here for you, basically, that's all it does. Anyway, let's close that and that should be it. NPM run dev, we are good to go.
Setting Up a Navigation Component
And as you can see, actually, if we have a look here in the page, you're going to see that they use dark mode here as well. So they're using it on an SVG, which is quite clever, because then you can just invert the color of the SVG. Anyway, so we'll keep that just as a reference so I can show you how it works on utility classes as well.
But let's create a quick nav here and add that toggle button. So we're going to head over to, yeah, let's just do it here in components, make a new one called nav.tsx. Cool, I'm going to copy this over because essentially what I did was I took this bit here, just this image, and I copied it over in my nav layout.
So for that, it's just a use client component here. We have the image imported and then just a nav with a UL, and then we have the image there. And this can be some toggle button here and hit save. Cool, so let's pop that in. We'll go here into our homepage, banish, destroy everything, clear everything out. There you go.
I'm going to pop it in here. You could do it in your layouts if you want, but for this one, let's just pop it in here to keep it nice and easy to see everything. So there we go, Vercel and a toggle button right there.
Let's start adding some text and maybe a button as well. So head over here and the main tag, create a section for this. So let's add some padding here, a flex, a flex of col, and a gap of eight, because I'm going to keep adding some text here.
Rather than doing a normal button, we can import the button from Shadcn. So how can we do that? Let's close this up. You're going to run the command, npx shadcn, I forgot it. I forgot it, I'm not going to lie. Yeah, let's search it up, button, button, where is it? Here we go. Okay, so you just add and button, shadcn at latest.
So let's go back, pop that sucker in, and then as you can see in our folder structure here, look, I made a new folder called UI and I added that button there. So yes, good start. So now we can go here, add a div, and we'll just create the two new buttons and I'm going to import it like that. Alright, let's go back to our view here and we're going to say learn more. And then we'll add another one right below, we'll keep it the same. We'll say enroll now.
Oh, what did I do? I added this here. Let me just copy and move that down here. My apologies, get rid of that, boom.
Cool, there we go. That's what I was looking for. So we got our buttons, we got our text. Now what I want to do is just align these in the middle. So I can do items, center like that. Cool, and text align, text center as well because I want to get that paragraph to show up nicely in the middle. There we go, nice.
Understanding Shadcn Theming
Let's start adding some sizes as well. So we can go here and say class name and we'll do something big, text for Excel or something. There you go, just so we have it like that, nice. Maybe a font bold to it like that. And then for my P tag, we'll do a class name of text to Excel maybe like that, that looks good. And then we can do a text of muted, for example.
Ooh, where is that coming from? Or we can do a text of primary, hit save and look at that. So this is what you're using essentially for theming. If we head over to themes here, as you can see, I can quickly go here and customize it and select any theme I want. So boom, boom, boom.
So essentially Shadcn is generating you all these different shades of colors and background colors that you can use throughout your app. And the cool thing is once you add it throughout your project, you can just quickly go here and choose maybe a different color like that. And then you can quickly go and customize and copy the code. So as you can see, those are all the different variables. So you have the background for background color, foreground for your text, and then a couple of other ones. But the nice thing is the buttons that you import and your cards that you import already have it style for you. So you don't even need to do anything there.
Here for our text, we're gonna use a muted one like that. And as you can see, that's kind of for a background. So what we can do is do foreground, align these buttons as well, item center, justify center, boom, boom, boom, that's all nice and done. I don't like this extra space. So let's get rid of that and maybe make this a bit smaller, maybe 12 or something like that.
Implementing Dark Mode with Next-Themes
So let's add dark mode, head over to dark mode here. And we're gonna need to run this command, npm install next themes. So let's head over, close this up, install that. And then what we're gonna need to do is create a provider. So we're gonna copy this over from here.
And so we can head over to our layout, import it here, theme provider like that. And then we'll just wrap our children here in that provider. There's two more options that we can pass down here. One is called attribute and that's gonna be class. So we're essentially saying we wanna toggle this theme using classes. So add class and also the default theme here is gonna be system. So if on Windows or on Mac, if you have it set to always be on dark mode, this is gonna do that, cool.
And then we finally have the button here. So again, we can just go to code or you can install it manually. Let's just copy it manually. We'll go here, go to the UI, new file, and I'll call this toggle-mode.tsx. There we go. Let's make a bit more space and then pop this in and hit save.
But as you can see, it's missing one component here. It's missing the dropdown menu. So we can head over here and install dropdown menu like that. And that's that.
And now what we can do, as you can see, it's all set up here for us. It uses two icons that's imported from, I think they're using something else. No, Lucid React. Okay, cool. And then you're just using a bit of state here to select the right text here for you. Okay, now that we have that, we can pop it into our nav. So let's go into our nav and import it right here. Remove this toggle button text and say, toggle mode toggle. I think that's what it's named. Save, cool. Let's head over here and have a look. Does it work? I don't see it. Why not? Oh, I need to run my server. NPM run dev.
Look at that. Do we already have dark mode? Isn't that crazy? So let's have a look. Switch the light. Boom, done.
How Theming and Dark Mode Interact
Okay, so let's have a look at what's going on here. So by default, if we head over to our tailwind config, again, you're gonna see that all of these different variables were set up for us. So as you can see with the buttons, for example, we haven't really done anything. And if I go to the button again, I can pick a different style easily. So I can do a variant here, and maybe I want this to be like a secondary button. So boom, secondary, done. But when I change it to dark mode, it still looks good. So that's the amazing thing about this.
But we haven't added the text color, right? So where does it get that from? Like how does it know to switch to white here? Well, if we head over to our global CSS, you're gonna see that on the body, it automatically set up a BG background and it texts the foreground for you.
Now, what if I wanna pick a different style? So actually let's pick this red one down here, rows. We'll do rows. We'll do copy code, copy that. And all you need to do is head over to your global CSS, layer base, and get rid of that and paste this new one in. And when you head back, boom, look at that. It applied a theme already for you.
Let me also show you how I added this form to the website. So we are, again, I've just copied the example pretty much, but I'll walk you through it. We'll head over to user form here. And this uses essentially React use hook form. No, it's just React hook form, not use. We're using use too much. It's not okay.
And then I install through the CLI, shadcn form and shadcn input. Okay, so we're importing all of this. And down here, essentially we're creating a form schema to define what types, this is our validation, right? And we're creating a Z object here using Zod and saying, hey, the name should be a type of string. And also it shouldn't have more than five characters. And if it does, you can output an error message for that.
The cool thing about Zod is you can output two error messages depending on the situation. For example, here on the email, as you can see I'm outputting five if the characters are not long enough like that. But if there's more than five, it's just not a valid email. So that's super cool.
And then here on the form where you're calling use form, we're essentially just inferring the type of the form schema that we made up here. All right, so you're passing that in here and you can also get that on submit. So you can infer that as well. And the values here are the values that you get from the form. And look at that, you get the nice auto complete because you're inferring everything. Nice.
And then down here, you're spreading your props into this form that's from Shadcn. And down here, we're just attaching again the on submit to it. And here we're running this special render prop here where we get to create our labels and controls and all of that. And you can just customize this after. So if you wanna do dev add like that, the old name that I had, it's now developed by add. We upgraded, bitch.
Final Thoughts and Recap
Yeah, that's it. How cool is that? And then I just made a couple more form fields here. I made another one and that's it. And yeah, look at that. How easy it is to add components, style them up any way you want and create a team around it.
And again, please have a look at the themes here. You can create your own as well. So this is entirely customizable. I mean, you can just head over to the, where is it? Where is the goddamn thing? To the style, here we go. Global styles, right? You can just head here and change these colors up if you wanna do a different one.
But yeah, that's it. Hope you enjoyed this episode. I love to make it. Super fun. Highly recommend Shadcn. Drop a like, drop a sub, all the good stuff. Anyway, see ya.
