Get Started with NextJS 14 & @shadcn UI — Course part 1

welcome everybody into this new course where we are going to create together a dashboard using NEX gs14 and shaten of course we are going to use other libraries but here the main library that we are going to use it's shaten UI so for those who don't know shatan UI it's a library that you can use actually to create Dynamic components dashboards playground forms etc etc so we can see here that we've got an example that with um chaten we can create this entire dashboard that we have here so of course I'm not going to create this dashboard that you got here that you can copy paste directly me I'm going to use chaan to create my own dashboard to get a different result at the end and we are going to combine this with tailn CSS and of course you can grab this dashboard into the comments into the description of the video where I'm 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 GS project and here if I open my terminal I arrive here and I got nothing else actually than nexs 14 with tyn CSS that that I already created so it's pretty easy if you want to create a new next GS application you got to type npx create 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 on installation so if I go on next GS we can see here that we've got the full um the full actually tutorial to install everything so here there is um the step to install um your application so me I installed it with typescript TN CSS and Es lint and then down here there is this command I didn't run yet and I'm going to run this command so npm shat CN UI latest 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 uh have some questions to fulfill so here I want to install shat CI to the project and here the first question that we've got it's the style so shat CI is giving you different style I'm going to take the default one the base color is going to be for me the neutral color um if I want to add the CSS variables for colors I don't think I think so yes I'm going to say yes and then it's going to install chaten then I will have here the dependency and stuff immediately if I come back to the project I get this components. gon that we got here with actually the configuration of shaten here so we've got here the schema which is on an URL then we've got the Tailwind config RSC and TS6 on true and we've got the alas 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 shaten will need that to work with tailwind and on my application right now I got nothing else than the starter pack of next GS okay 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 um we are going to install the components because shaten didn't install by default all the components what we're going to do is running 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 for theal UI with all the components inside this UI folder and of course the Liu that we saw so if you want to know every component that are available you can go here read got all the components basic components that we would retrieve in any um components Library the main difference with chaan UI is that it's not a um Library as I as we understand a library is it means that we didn't install shat CN 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 ends 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 buttons 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 common npx shii at latest add button so 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 homepage 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 Yan and yand Dev it's going to install entirely the project and after that we will be able to visualize our nexts shaten project directly um 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 local lost 3,000 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 G of shaten 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 shaten that has been added to the project okay 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 um change the style of the button so I'm going to zoom here I'm going to un Zoom I'm 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 change 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 um with icon for instance uh 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 shaten 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 old 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 got 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 shaten and to create at the end of 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 taming you can go here and shaten we can see here that shaten is using tyn CSS so I mean we are using tyn CSS basically with the application but here we can use also tailin CSS so here we can see that we will be able to actually work on the architecture of the whole application with TN CSS for the dark mode we got here um the option to install next them 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 um on the paragraph on the coat it's a whole package of style that is already um provided by the by the whole shatti anui package there is also the figma so if you do some design and you need to use the um basically the the the all the components and all the the team of shaten you can go directly here using uh 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 um go to the GitHub uh here and please add here a star to the package because um this project has been elected the best project on GitHub this year uh last year in 2023 and it's clearly an amazing project that will be very useful for lot of you a lot of frontend developers so please go here and add a star another library that I'm going to use it's nvo so you probably don't know nvo but nvo it's a it's a chart library that you can use to create very beautiful chart 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 D free and react so if you are not following this course with react you probably can find another options but but here this is the library that I'm going to use if you are using vgs and you would like to use shaten with vgs um you've got some libraries that are porting actually shaten to view so here we can see that we got a version that is applied for vgs to use exactly the same component and we've got exactly the same okay we've got exactly the same for zelt so if I look for Shi and zelt here we can see that Hunter bite Hunter has ported actually shaten Tov so if we look at it quickly we can see that we can also use it forv etc etc there will be a lot of um 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 shaten between nvo and between tawin CSS

Channel: Codewithguillaume

Views: 10,536

Keywords: course, free, code, startup, dev, shadcn, full course

Id: jdLsQEZ_H4o

Length: 11min 59sec (719 seconds)

Published: Sun Feb 04 2024