Next.js 14 Theming with Shadcn UI - Shadcn UI Tutorial

hi guys welcome back to another video on NEX js14 app directory so in this video I will be talking about theming light mod dark mod in next gs14 so I'll be using one of the most popular Tailwind CSS Library called shade CN UI and it is very popular and it is not a typical UI library that gives you the components only in fact it creates the component of react in your code in your folder structure which you can see that how things are working and which you can modify as well and override the design of all of these components which provides by shares s and UI so I will be creating a new nexs 14 project from scratch and uh this is not a video on theming only and uh you can follow this tutorial to know about the shade CN UI as well if you want to use uh shade CN UI components for further UI designing building the layout of your website okay so Main focus is the theming so let's get started I've opened up an empty folder in vs code and I'll be creating a new next js14 project and first of all let me verify I have the node variant 20 in my system so I'll be using the npx create next app at latest dot I don't want to create a new folder in fact I want to create all of the nextg 14 files directly in this empty folder so I'll hit enter so it's going to create and download all the dependencies of nextjs 14 project so I'm going to go with the TP script es lent yes Tailwind CSS yes um I don't want to create the source folder in this project let's go with the app router no all right so it is going to create next js14 project if I open up the package.json file you will see that it is creating the nextjs 14.01 all right so once it is getting installed we are going to go into the documentation we can go to the installation we can click on the next.js and this is what we have already done we have created a new nextjs project by enabling the typescript Tailwind CSS and the es lent enabled all right next what we need to do we need to initialize over shade CN UI by running this command so I'm going to copy this command using an npm you can copy with the Yar bun or PNP and uh it's getting installed currently meanwhile if I show you my playlist on nextjs 14 tutorials app directory you will find the videos on pretty much every topic that you would need to become a good nextjs developer using an app directory it includes Project based videos complete authorization authentication system including the forget reset password feature as well using next Au and using the clerk authentication system how to protect routes types scripting building weather apps building e-commerce app building blog applications Redux context API the stand SEO and I can actually show show you the complete nextjs 13 tutorial playlist and you will find everything from Basics to Advanced uh including the best practices including the connection with mongod DB so you can explore this playlist if you want to learn pretty much everything about the next JS 13 or next year 14 other than this follow my channel on WhatsApp I've given the link of it in the description of this video and also follow me on the LinkedIn as well for getting updates from my professional account so project is created first of all I'm going to open up the app directory go to the page. TSX and I don't need any of these internal divs within the main element okay so for now let's add home inside it all right and uh I'm going to open up the layout. TSX and I don't need the default fonts here so I'm just going to remove all the configurations related to the fonts and uh I'm also going to remove this class name as well okay so now I'm going to run the project npm run Dev in my terminal and um I'm going to go into the browser and uh let's refresh this and it should show this home text at the center of the page all right so this is how it's looking and uh now I'm going to open up this next JS shade CN UI page which I've already opened so this is what I'm going to be implementing you can see that the same kind of theming is already implemented in their own website like on the top I can click on the light mode you can see and I can click on the system so whatever the theming is set in my operating system it will fetch that particular value from there okay so first of all I'm going to copy this npm command npx for the shade CN uh let the project running I'm going to open up another terminal for that particular stuff so I'm going to paste it over here hit enter so it's going to ask me few questions first of all we are using typescript yes we will go with the default we are going to go with the default um base color we are having the global. CSS so we need to verify the paths of these files so our global. CSS file exist in the app /g global. CSS file yes I'm going to hit enter if you are using the Source directory nextjs you might want to write the SRC /a/ global. CSS okay but for now I'm going to hit enter and uh let's go with the yes for now um so we have the Tailwind do uh config.js located at the Tailwind do but you can see that the location is correct uh but we have we are using the Tailwind doc config.js file so I'm going to write the Tailwind doc config dots over here so I'll hit enter and uh it's asking me that uh where I will be creating my components folder it will be in the home directory for this project so I'll hit enter and um I'll go with the same library and the utils folder I'll hit enter and yes I'll be using the server components and uh I will be creating the component.js file as well so let's go with the Y so it's going to initialize the project uh based upon the configuration I've said using the shade CN UI okay let's stop the project for now uh so it has actually initialized it you can see that it has created these this component folder it has created the lib utils dots file and it has created components. JS and you can see that I provided the Tailwind doc config.sys file based upon the shade CN UI it has removed everything that was earlier written over here and uh this is the root which is basically the light mode and then it has created the colors for the dark mode automatically and which we can modify as well based upon our needs but by default we can go with the default settings it has set if I go to the Tailwind doc config dots file you can see that it has modified this file as well by adding the different configurations theming settings uh one thing more uh we might be using the JS files as well if yes we will be adding uh Js over here. jsx MDX whatever the files that you would need you can add over here all right so I'll just be copy pasting it over here as well all right so let's save it let's go let's try to run the project to verify if everything is working fine and this is where we are going to start designing our project and Implement theming using shade CN so let's go over here let's refresh and uh I think it's already working fine and it's using the light Theme by default because of it's using the this root over here all right so now it's time to go further and uh we are going to add some components so I'm going to go to the documentation let's go down we will not be using the fonts uh for this purpose for uh the theming so let me show you how we can add different components on the left side you can see that there are a lot of these components so it's giving an example that if you want to use the button I can copy this command with the npm and run it in my terminal so let's paste it over here hit enter and it's going to create the UI folder within the component and it's going to add the component button. TSX and this is why it is very famous library because it gives you the code which you can modify and you can analyze that how it is working from here all right and uh it is using the variants as well and this is is why it will automatically be handled through theming okay so we don't need to modify it for now so we have used this button and which we can use it over here so I'm going to use this button from here so let's add the button from the components UI button so let's save it let's go and you can see that we have to add some content inside it so I'm going to to be adding the content so let's say the button and this button let's save it and now you can see that the hover effect the content over here is already set the margin padding is already set all right so this is how we can create different component but first of all I need to set up the layout the header which will be having the drop- down like this uh which will show the light dark and the system okay so what I'm going to do is I'm I'm going to go to this do mode option from the documentation I'm going to go to the uh nextjs and I'm going to install this next themes okay so let's add it in the terminal so it has been added and after this I need to create a theme provider and theme provider will be wrapping all the application so first of all I will be creating a new file within the components folder so I'm going to name it theme provider. TSX okay so this is going to be a client component so because it's using the use client so I'm going to copy the code from here and I'm going to paste it over here all right so after this it is asking to wrap everything within this theme provider in your layout file so I'm going to open up the layout. TSX and uh here I will be wrapping everything but first of all let me add some kind of design for it so I will be adding a div so inside this div um first of all I'm going to cut the children and paste it inside this div and uh I'm going to wrap everything in this theme provider which I have created from the components all right so let's cut this let's paste it over here so this have been wrapped now I need to create a nav bar nav bar will be showing at the top of this UI and that will contain the logo as well as that drop down for the theming so I'm going to create a new file within the components folder and I'm going to name it navb bar. TSX okay so I will be copy pasting few stuff inside it this is simple the simple component so first of all I will be using the rafc so this has has been created and uh I will be adding different UI elements over here so let's add the div and inside this div I will be adding adding the UL element and inside it let's add the div and uh here we can have the link from the next link href equals to this one and inside this we can have Li and then the home okay so just like this I and let me remove it and fix it let's add another div and uh before adding any component for the toggling stuff um I'm going to open up this uh UL actually and I'm going to style it a bit so I will be adding the flex justify between and margin to the y- AIS to 10 and item Center okay and uh we can have a class name over here as well so I will be adding the flex Gap 10 okay so this has been added let's open up the layout file as well and uh I will be adding few uh design over here as well so I will be going in this div so let's add the class name MX Auto Max W 5xl text 2 XEL Gap 2 and margin bottom 10 so this has been added um if I go to the documentation you will see that theme provider also suggesting to add these attributes so I'm going to copy all of these and I'm going to paste it over here so these four attributes are required okay and we have created this nav bar and we need to show the nav bar above these children so I'm going to come over here so I will be adding the nav bar which I have added so let's add over here all right so I'm going to go and you can see that it's showing the home and um it on the right side uh I need to show the uh that drop down for the theming okay so let's go over here and here you can see that it's showing this drop down which we need to use and uh this is the code it is actually providing to us okay and I need to create a file and inside that file I will be copy pasting this code so let's copy this code and I'm going to create a new component So within the components I'm going to create uh dood toggle. TSX hit enter and I'm going to paste everything over here and it require the drop- down menu component which is given by this shade CN as well so I'm going to go over here and uh we have to have the drop- down menu and this is how we can install it just copy paste the command from here add it over here and uh hit enter so it's going to install the drop down component automatically uh within the UI folder within the components and this is what it has automatically created we don't need to do anything all right so let's let's close it and in the dark mode toggle you can see that the error is gone okay we don't need to modify it you can also change uh the text from here if you want but I don't want to do that for now so let's save it and I'm going to go to the navb bar. TSX and here I will be using that dark mod component which I have just created so it's not picking that up let's try to see so this is the dark it is actually the mod toggle over here okay so I'm going to write the mod toggle all right so this has been added now let's go over here and you can see that it has automatically picking up the system UI the system theme which I have set and I can click on the light you can see that it's looking so cool and it has automatically started working as expected and everything in including if you are using the shade CN component the component will behave according to the theming but if you are using your custom UI or another library for the UI um still you can modify the colors of these I'm just going to show you how you can do that so I'm going to open up this page and I'm going to remove this button I don't need that all right and uh to make it look nicer what I'm going to do is I'm going to use the table uh this one uh the data table okay and the data table is looking like this um this is an awesome component so in order to install that I need to run this command so I'm just going to write npm hit enter so it's going to add a new component within this UI folder okay so it has added over here it will be adding right here and if I go to the documentation we have these prerequisites these are the prerequisites this is what we need to install so I'm going to install this prerequisite as well now I'll be creating a new file over here and I'm going to name it table component. TSX okay and inside it if I go up this is the code which I will be pasting over there so let's copy this code and paste it over here all right it's going to give us few errors these are the components it it require checkbox input and the table is something which we have already installed you can see over here the table. TSX okay so we can get the commands for it let's go and get the checkbox one this is the checkbox let's copy this checkbox element and I'm going to hit enter it's going to install next one is the input so let's go down where is the input this is the input component let's copy this one as well and paste it over here and it's going to add the components for these checkboxes the inputs uh you can see you don't need to uh write all these yourself now let's close down and if we go to the table component you will see that it is not showing any kind of error all right and obviously we can modifi that this is the benefit of shade CN um I'm going to open up this page and this is where I will be using that one one so what's the name of that let's go and check this out so we have the table component and uh we will be naming it data table okay this this is the data table demo which we need to import so I will be writing the data table this is where it's coming from okay so let's save it it should show the table in our UI all right guys so you can see that it's showing an awesome UI for that table and uh all these sorting options and these drop downs are already showing over here and if I go to the light mode you can see that it is automatically handling uh this light mode over here all right so this is looking pretty cool um let's remove pedding 24 so it covers the whole view all right and we can switch to the dark mode or the system settings um which is the doc on my system all right so how cool is that that with few steps we can implement the theming using shade CN UI all right so that's pretty much it for this video if you want to learn more stuff in nextjs 14 I've already created a lot of videos on Project based tutorials in nextjs 14 nextjs 13 using an app directory check out my channel and check out the links I've given in the description of this video and it will really appreciate me uh to create more videos If you subscribe my channel and like this video I will be creating a new video on theming using the daisy UI and uh I will be creating few more Project based videos in upcoming days in next js14 app directory thank you so much for watching guys see you in the next video

Channel: Programming with Umair

Views: 3,409

Keywords: next js 14 shadcn ui, next js 14 tutorial, shadcn ui, react, nextjs, nextjs 14 features, next js 14 update, theming using shadcn ui, next js 14 theming, light dark mode in next js 14, configure shadcn ui in nextjs 14, how to theme in next js 14, nextjs 14 app directory, whats new in nextjs 14

Id: lgq8TOhNFl0

Length: 20min 45sec (1245 seconds)

Published: Mon Nov 13 2023