Welcome everybody into this new course where we are going to create together a dashboard using Next.js 14 and ShadCN. Of course we are going to use other libraries but here the main library that we are going to use it's ShadCN UI. So for those who don't know ShadCN UI it's a library that you can use actually to create dynamic components, dashboards, playgrounds, forms etc etc.
So we can see here that we've got an example that with chatien we can create this entire dashboard that we have here So, of course i'm not going to create this dashboard that you get here that you can copy paste directly Me i'm going to use chatien to create my own dashboard to get a different result at the end And we are going to combine this with tailwind css And of course you can grab this dashboard into the comments into the description of the video where I'm going to give you the repository. All right. So the first step is to create a project which is totally empty, a Next.js project.
And here, if I open my terminal, I arrive here and I got nothing else actually than Next.js 14 with Tailwind CSS that I already created. So it's pretty easy if you want to create a new Next.js application. You got to type np- xcreate next app latest. Okay so me it's done.
What I want to do is to click here on get started and I'm going to go here on the top of installation. So if I go on Next.js we can see here that we've got the full actually tutorial to install everything. So here there is the step to install your application. So me I installed it with TypeScript, Tailwind CSS and ESLint.
And then down here there is this command that I didn't run yet and I'm going to run this command. So npm chat cn Ui later, so i'm going to click here on npm I'm going to get back to my project and i'm going to type enter and so from here I'm going to Have some questions to fulfill. So here I want to install chat cn ui to the project and Here the first question that we've got it's the style so chat CNUI is giving you different style I'm going to take the default one the base color. It's going to be for me the neutral color If I want to add the CSS variables for colors, I don't think so Yes, I'm going to say yes, and then it's going to install chat CN Then I will have here the dependency and stuff Immediately, if I come back to the project, I get this components.json that we got here with actually the configuration of chatcn here. So we've got here the schema, which is on a new URL.
Then we've got the tailwind config, RSC and TSX on true. And we've got the alias where we can go grab the utils and components. So let's take a look at components. I'm going to go here on components. And for now, it's empty.
But if I go on lib and utils, we can see that we've got some code that has been written. We're going to let it here because here, Chatien will need that to work with Tailwind. And on my application right now, I got nothing else than the starter pack of Next.js. OK, so if I go down here, I can see that I can add some fonts also. I'm not going to do it for now.
And we can see that we can extend the font family directly through Tailwind. And then here we've got the example of the folder structure just after we are going to install the components because chat cn didn't install by default all the components what we're going to do is Running a command every time to install the component we need and we will get access to the code after So here we will see that we will have a folder called UI with all the components inside this UI folder And of course the libutils that we saw So if you want to know every component that are available, you can go here. We've got all the components, basic components that we would retrieve in any components library. The main difference with ChatCN UI is that it's not a library as we understand a library is.
It means that we didn't install ChatCN with all the components. We have to install manually every component. It has a lot of advantages.
The first advantage is that it's going to take our project lighter and we will be able to get hands on the code. Okay so if I come down here we've got an example and we can add here the button. So here of course I'm going to use the button so I'm going just to copy paste this I'm going to get back I'm going to Open my terminal again and I'm going to run this command npx chatcnui add button I'm going to type enter and what's going to happen is that you can see here that on the UI folder I got the button.tsx and if I go to look at it look at this it's amazing we've got here all the code of the button so we can use directly the button inside our UI so I'm going to get back directly here on my home page and I'm just going to return here a div and it's going to be a hello div.
There we go and I'm going to run the project so I'm going to type yarn and yarn dev it's going to install entirely the project and after that we will be able to visualize our Next.js chat cn project directly inside the browser. So which is really cool is that we've got this button that we will be able to call everybody everywhere else sorry so here I'm going to type localhost 3000 and there we go so we got hello up here so I'm going to go down and we can see that I can import the button so I'm going to come back in here I'm going to close this and I got an empty project for now so what I'm going to do here is to type button and we can see that I can grab the button of next of chat cn and I can put it directly inside here and After here, I can put my button. So I got the click me option. And if I come back to it, we can see that we've got the button of Shatsien that has been added to the project. OK, so it's really cool.
Now, if I want to have some options, what we're going to do all along this course is to come back to the section of the component we are looking for. And here we can see that we've got different styling here. We've got the code. Again, that's what we saw and we can see that we've got for instance here variants.
So this variant here will help me actually to Change the style of the button. So I'm going to zoom here. I'm going to zoom going to zoom again There we go I'm going to come here and add my variant outline and we can see that my button Changed the style of my button changed. Of course, we can see here that we've got Other examples, so we can turn the button into a secondary, a destructive, outline, ghost, link, icon, with icon for instance. We've got a loading state so if we look at the code of the loading state which is cool is that we got this disabled and we've got also here an icon coming from Lucid React.
We're not obliged to use it but it will be very useful. So you understand that we install chatcn and now we are going to install every component every time we would need one. So this is the basic we are going to use to create the whole dashboard. So there's a lot of elements that we're going to use.
For instance here there is a calendar, we are going to use an avatar, there is an alert for instance etc etc. You're going to understand that I'm not going to use every component that is here. It's just a course to show you how to create your own application using ChatCN and to create at the end a dashboard that you will be able to use. So here I'm going to use some elements, not every of them. But which is cool is that every time you need an element, you can go to the components part and grab this element.
It's as easy as this. If you have some concerns about the timing, you can go here and ChatCN, we can see here that ChatCN is using Tailwind CSS. So, I mean, we are using TailorIncSS basically with the application, but here we can use also TailorIncSS. So here we can see that we will be able to actually work on the architecture of the whole application with TailorIncSS. For the dark mode, we got here the option to install next themes that we can use also.
We can use the CLI. So the CLI, we installed it. There is some typography options that we can look at. So here we got.
on the titles, on the paragraph, on the code. It's a whole package of style that is already provided by the whole ChatCN UI package. There is also the Figma, so if you do some design and you need to use basically all the components and all the team of ChatCN, you can go directly here using the Figma.
Okay, also if you are looking for some example, again you can go here on the top. And please, if you can, go to the GitHub here and please add here a star to the package because this project has been elected the best project on GitHub this year, last year in 2023. And it's clearly an amazing project that will be very useful for a lot of you. a lot of front-end developers so please go here and add a star.
Another library that I'm going to use it's Nivo. So you probably don't know Nivo but Nivo it's a chart library that you can use to create very beautiful charts. So let's give an example here we can see that we got different charts that we can use and if I click here we can see that it's going to display a lot of other elements such as here the grid that you can see on GitHub. I'm going to use this library to display some graph directly into my dashboard.
It's built on top of D3 and React. So if you are not following this course with React, you probably can find another option. But here this is the library that I'm going to use.
If you are using Vue.js and you would like to use chatien with Vue.js, you've got some libraries that are porting actually chatien to Vue. So here we can see that we got a version that is applied for Vue.js to use exactly the same component. And we've got exactly the same, okay, we've got exactly the same for svelte. So if I look for chatcn svelte, here we can see that Hunterbyte, Hunter, has ported actually chatcn to svelte.
So if we look at it quickly we can see that we can also use it for svelte etc etc. There will be a lot of libraries that will be adapted to the framework that you want to use. Okay, so we are ready to start this course.
Let's go, let's start to build our dashboard. We are going to jump, you understood, between chatcn, between Nivo, and between Tailwind CSS.