Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Installing ShadCN UI
Loading...
Loading...
Complete source code available till this point of lesson is available at
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 Now, there might be some users that prefer to have the light or the dark theme, but then for this specific application, they want to be able to manually
00:00:09 set it.
00:00:10 For that, we'll have to add a theme toggle.
00:00:13 But before we go ahead and add it, we'll first need to do a couple of other things, like add a navigation bar at the top,
00:00:20 and then the toggle will be there.
00:00:21 And second, to implement this toggle, we'll need a dropdown.
00:00:25 There are many ways of creating a dropdown, be that creating it from scratch or using it from some styling framework.
00:00:32 In this course, we'll be using ShadZN, a component library containing beautifully designed components that you can copy and paste into your apps.
00:00:40 What sets ShadZN apart from other styling frameworks, like Material UI, is that you get only what you want.
00:00:47 With Shazien, you install or have the code for things you want.
00:00:52 Nothing else.
00:00:53 Like, let's say you want to have a drop-down.
00:00:55 You search for drop-down menu right here, and you'll see the code only for that component.
00:01:01 Nothing else.
00:01:02 No code for sidebar, alert, or accordion, car, drawer.
00:01:07 You only get what you need.
00:01:09 This is very unlike Material UI or others, with which, even if you want just a couple of components, you need to get the rest of the components on top
00:01:18 of it, even though you might end up not using it in your app.
00:01:21 So, let's go ahead and install ShadCN so we can start adding its components.
00:01:26 First things first, we'll have to run mpx shadcn add-latest init.
00:01:31 So, back in the code, I'll open up the terminal.
00:01:34 That's the second one, as you can see here.
00:01:37 The current one already has the code running, and I'll run mpx.shadzian.addlatest init.
00:01:43 It's going to ask us whether we want to install the Shadzian CLI, so press Y for yes.
00:01:49 And now we'll have to answer a couple of questions.
00:01:52 It's going to ask you which style you prefer.
00:01:54 In this case, I'll say New York.
00:01:57 Which color you prefer?
00:01:58 I'll go for slate.
00:02:00 Would you like to use CSS variables for theming?
00:02:03 I'll go with no.
00:02:05 And that's it.
00:02:06 It'll update your Tailwind config and the globals.css.
00:02:09 Success!
00:02:10 The project is initialized.
00:02:12 After successful installation, ChatCN will create a few files.
00:02:16 The components.json file, which handles the configuration part of ShadCN, where it tells it which config you're using, and whether to use CSS variables
00:02:26 or not.
00:02:26 Every time you add a new component through ShadCN, it'll first check this file, and depending on the configuration, it'll create component code.
00:02:34 Next, there's also tailwind.config.ts, which ShadCN modified to include things like border radiuses, and, well, that's more or less it.
00:02:45 It also included Tailwind CSS Animate, which is a special plugin for Tailwind CSS.
00:02:50 Finally, it also created a new lib.utils file, where it has a helper to manage different class names based on condition without using the template strings.
00:03:01 I'll explain it later.
00:03:03 But for now, let me show you how we can start using ShadCN's first component, which we'll need.
00:03:08 That's going to be a drop-down menu.
00:03:10 We can install it by running mpx shadcn add latest add drop-down menu.
00:03:15 So just go to your free terminal, paste that command and press enter.
00:03:21 It'll check the registry, install the dependencies, and in a matter of seconds, it'll create a new file called drop-down-menu.tsx.
00:03:30 It created it within the components and then UI folder.
00:03:33 And you can see the full code for our drop-down menu.
00:03:37 There's a lot of code, but don't worry about it because you don't actually have to make any changes right here.
00:03:43 You can just use it.
00:03:44 Like if you go to the app, you can then see how the usage would work.
00:03:50 For example, you have to get all of these imports, paste them at the top.
00:03:55 and then you have to copy the usage, paste it below the H1, save it, and as soon as you do that, you can see Open, and there it is.
00:04:04 You actually have a fully functional drop-down, which is fully tested, works perfectly on light and dark mode, different screen sizes,
00:04:12 and so on.
00:04:12 it is super simple to add new components.
00:04:15 For now, I'll delete this, just so we can start focusing on creating the navbar, and then we'll use this dropdown later on exactly where it should be used.
00:04:25 So, let's do that next.
