How to Setup Shadcn UI + Themes in NextJs 14

in this video we're going to learn how to implement chat CN UI library in NEX js14 specifically the app router we're going to look at the components the CLI tool that allows you to install and copy these components into your app we're going to build this dashboard together this is an example um dashboard from shaten and then we're going to implement the light and dark theme just as you see here and at the end we're going to also extend it to bring in more theming options to shat CN using CSS variables that allows you to really customize these components to your own specific project so let's get into it we're going to build this from scratch together so let's go to this next TS I'm going to include the link to this template in the description this is a next typescript starter kit you can use this template create a new repository and then clone it down so let's call this next Shad CN I'm going to call this a starter and then we're going to create this repository this is going to copy that template and then create a new repository which we can clone down so we can use that template yourself so we're starting from the same point that we can then clone this I'm going to bring this into my uh local Dev here and get clone into that library and we just change the folders okay let's open up the dev tools let's run pnpm I to install all the dependencies I'm using pmpm you can use any other package manager that you like so that's the first step of um installing our starter kit so let's run the development server to test everything is working opening up Local Host Port 3000 okay good so we have our starter application here let's go to chaten and see how we would go about installing shat CN so in the documentation page you can see this installation you can choose nextjs as a framework the first step is to create an xjs app we've already done that so we're going to go to the next step which is running this init command from shat CN to initialize um shaten and create some files inside of our project that allows us to use chaten now a little introduction or a little note about chaten this is not a library in that it's not an npm package you install it's just a bunch of components you can copy and paste to your code the only thing that would get installed once you run the init command is radx UI or radex UI which is a component library that exposes some primitive components and chaten is built on top of that but chaten on its own it's not a component Library so going back to the installation for nextjs we have to run this command once you click on this copy you can select the package manager that you have let me stop the dev server again going to close this off for a second and paste this so if you run the init command this is going to ask us a few question about how we want to set up shats in so there's two different styles you can set up so let me just go to one of these components for example the card you can see each one of these components have two Styles one is the New York and the other one is a default default has more padding and it's a bit bulkier New York is a bit smaller or they're a bit different so you can pick and choose whatever style that you want and whatever style that you choose here cannot be changed later I choose New York you can then choose a base color for your gray uh there's different Grays in tailon CSS our project is working with typescript and ton CSS um and I you can choose whatever uh you want I like the shade of the zinc gray and it's asking whether or not we want to use CSS variables for colors now later on I'm going to explain how theming Works in chat CN but mainly just to touch on it from a high level now there's two ways you can use or Implement theming One is using CSS variables the other one is using T CSS utility classes if youve been working with t CSS you know things like background and then changing the background when you have the dark variant is using tailin CSS utility classes whereas CSS variables is that you would Define these type of colors instead of the zinc 950 you would Define this as BG background as you can see here and text foreground and then inside of your CSS you would Define these colors with CSS variables and then you can switch them up depending on whether you are on a light theme or a dark theme and later on even maybe a different color because it gives us more flexibility we're going to use CSS variables in this case to implement theming and we're going to see this in action later on so let's click yes and as I mentioned this is going to go ahead and install the dependencies and initialize the component. Json let's go to our code component. Json is how shaten understands our project structure and some aliases for how we want to import component and and whatnot and the style that we picked which is done automatically once you run the script now going back to the installation so we ran the init command we answer the questions now quick note about fonts shaten or these components are using the inter font that comes out of the box when you install um nextjs so if you go to app to layout by default we using the same inter font but you can change it if you want can import a different font and then you just set a CSS variable for it and then use it here I do have a video on the channel where I talk about this new font package and how you can use it with or without telent I'm going to include the link in the cart or the description so you can watch that video but basically here you have an option to change the default font and then you would pass uh the new variable to your Tailwind config as well this is a little note about the structure of the app so the components that we copy from chaten if you use the CLI or the command line tool it is going to uh copy them inside of a UI folder in your component so right now it has created this components folder for me and inside of it is going to once we copy a component like a button it's going to create this UI folder inside of it and then create the rest or to copy the components there now the other thing that chatan also did was this lip and utils inside of it this is a CN function that allows us to merge T classes because to a lot of these components you can pass in your own classes this function allows you to merge them safely with the classes that has been set from chaten and that's pretty much it so we can go ahead and add a any of these components that we can see here to our application so let's for example go to the button page here you can see a preview and you can copy the code here and down here you can use the CLI tool or the command line tool to copy this automatically inside of your application so let me just copy this select the pmpm and see how this works let me clear this out let me close this up so I'm going to copy this command which is shat C nuui latest add button so it's really the add command if you're using npx it will be npx the name of the package and then the add we ran the init command to initialize shatan and now we run the add command and then we pass in the component name so if I enter here is going to just copy the specific button component inside the UI folder of the components so let's go to our components folder and see this in action let me just make this a bit bigger now you can see I have this UI folder and the button inside of it now when you run this add command um you if you don't pass in any component name there so if we just pass in the same ad command without any component name this is going to actually ask you what components you want to install so if you already know what components you want to install for example for a dashboard we can go through the list of the components that we need and instead of having to copy this command one by one for every component you can just run the add command don't pass any components and then you have a list of all the components here that you can just go ahead and select with a space you would select or unselect and then you would move up and down with the arrow keys and once you're done with your selection so for example I need the card let's say I also need the drop- down menu I know I need the input and then I hit enter and this is going to go ahead and install all the three components so it's a bit faster than copying one by one and that's how you would add these components inside of your app so let's go to our UI and you can see all those components are now added to my UI folder and that's the easiest way to add this component to your app now one note about the CSS variables that was set up here let me just close this off so we have more space so inside of our project if you go to Telvin config.txt the colors or utility classes from telin now we're going to have a primary color a secondary color a destructive color and whatnot and inside of our CSS or Global CSS here you can see that we have already set some of these CSS variables so we have the root this is for the light theme and then we also have by default the Dark theme supported as well now we're going to see this in action and the built-in support for light and dark theme once we copy a component so let's go to our app actually and inside of our page and let's bring in a component here let's go to the the card let's go to the code and let's just bring in this card component from here let's go back inside of this section maybe down here we just paste in this card and then we have to import uh this components let's see if we have all of them so let's copy and then here I'm going to paste in these components now we need the label we don't have and also the select so we can install this by running the ad and then adding the label and the select so let's select these two components I'm going to come down get the label and also the select component hit enter to install this components now once that's done let's restart the dev server I think I'm missing this opening thingy here so let's save this up and if I go to the app now and restart wec our card component let's give this a margin top of 12 so it has a little room there now I want to show you the built-in support for the light and dark theme using the CSS variables that we have already copied so if I come here inside of my root layout and pass a class name of dark and say save my app turns into a dark mode and the component automatically supports this because inside of our telin config what we have defined or what what's copied as part of the process is that this dark mode is set to class now and then inside of our Global CSS this is where we're actually switching our CSS classes or css variables depending if we are inside of a dark class so when we have this dark class on the HTML which is the parent of all these components it gets applied so those CSS variables are going to get picked up and automatically we have this light and dark theme now we can take this further by implementing a theme switcher using the next themes package so if you scroll up here under dark mode it actually explains that you can go ahead and install the next themes package so let's go ahead and actually do this together so PM PM again and then we're going to extend this to also include other themes uh which you can see here under the theming in Jen okay so that's done let's go ahead and create a theme provider so inside of our components folder I'm going to create a theme provider. TSX I'm going to copy this code now I do have a video on the channel for for adding light and dark theme to the app router in nextjs 13 or 14 for that matter they're the same so if you're not comfortable with using the next themes package I'm going to link in the cart or description somewhere for you to watch that video now sometimes even though you have installed the package vs code might give you some hard time for types declarations uh now what you can do is that uh hit command shift p to open the command pallet from your vs code and type in typescript there I have it as the first and here instead of using the vs code version of typescript you need to select to use the workspace version of typescript and sometimes doing this would just resolve the problem so the first step we installed the next themes package we created this themes provider now what we can do is to wrap our entire children inside of our root layout with this themes provider now this is a client component that uses react context to share uh the theme State a common question that I often get on the channel is if you're now wrapping our entire application in our root layout with a client component does this turn or app into a client component and the answer is no you can interv and Inter leave client and server components without changing uh your server components and the way that it works is that you can pass server components as children to client components as we doing here we passing in this children so this is going to be the parent of our server component so imagine that there's going to be holes or slots for your server components to be plugged in inside of your client component and the only thing that you cannot do or if you do it would turn your server components into client components is that if you import a server component into a client component once you cross that boundary that's marked with this used client you become a client component and if you're for example running an asynchronous function you would throw error but sometimes you're not running any asynchronous function you just import a component um inside of a client component just becomes a client component it's good to know that so we have done that part as well so let's go down and now we need to add a more toggle so let's go ahead and get the code from here I'm going to create another component well let's move this theme provider inside of a component instead of the UI cuz this is not really a UI component component and then inside of my component I'm going to create a theme toggle. TSX let's also copy the code here do we have all the components seems like if we do let's just rename this to theme Tuggle so let's go back inside of our page and now I can just maybe bring it in here just to show you how it will work so theme toggle and now if I refresh and go back to our app ation if I refresh we see this button added here if you click on it it's going to open up a drop down you can select a dark theme this is now just setting a dark class same thing that I did inside of my layout so actually I can go here and remove this dark class so what next theme does is just to set this class for you so on the HTML you can see now we have this dark class set if I change this to light light it changes the class to light and then changes it back to dark and the system just picks up whatever the user has set inside of their system so let's recap what we have done so far so we have initialized or installed chat CN inside of our next CHS app if you have copied some components over some UI components as well as some theme related components if you have installed the next themes package that allows us to set a class or share our theme State globally inside of our app and set a class inside of our HTML class tag so that the CSS variables that already comes built in from chat CN that supports the light and dark theme is going to actually work with this toggling button that we saw now if you want to extend uh themes inside chats Yen you can so on the documentation page there's this theming section where it talks about the same concept that we talked already um about using utility classes or or using CSS variables we have selected to use CSS variables now all there's left for you to do really to change the theme of your application is to change the values that you are pasting in here for each of these CSS variables it does Define what CSS variables they are using or you can see them right here they can change the values here and then you would have a new theme so we have one for the dark and one for the regular now going back to the themes here for example you can see there are different themes that you can select different colors that comes built in so it provides you with some of these values already so you can go ahead and say I want the orange one I want my border radius to be one and the light the mode to be light so I'm going to copy this code it is going to give me uh what I need for my light and dark theme for these CSS varibles so I'm going to copy them from here and let's just remove this base layer and change it so now going back inside of my app I have now turned this into that theme and you can see the Border radius actually also changed so if I go to light it supports the light version of this new theme or the dark version of it now you might as well want to add a theme here and you can all you need to do really is to go to your theme provider in your root layout and now you can here add an array of themes so let's say we want to add this orange and once you overwrite this you have to also provide the light and dark if you are still intending to support that so I'm going to add this orange to my themes light and dark now going back inside of my theme toggle this is where we actually having these drop- down items so this is the light dark that you can see here now what I can do here is bring in this themes this Ed theme hook actually gives me back all of my themes so what I can do here is that I can say I'm going to get the themes map over every theme and for each one we want to render one of these guys so let's copy them here and then here let's just show the theme and set the theme to that actual theme and then let's also pass a key be again that theme so vs code is not screaming at us let's now remove that and save this now refreshing our app now if you can see the Orange is now added here now what we can do here going back to our Global CSS if I just undo what I did here and bring in the base layer that we had already let's just go ahead and add a class here so we want to say if we have the orange class set let's go to shaten and copy this code for example and paste it in here now what next theme is going to do once we select let's say orange is that it is going to just set this class orange inside of our HTML tag so going back here you can see HTML now has a class of Orange right this gets picked up by tailwind and because we have this class now CSS variables are changing and switching now this is one way of applying themes you can have the light and dark and then um just choose which theme you want to provide for your clients or actually allow them to select different themes that they want uh but basically it's just changing or switching up the values of the CSS variables to accomplish these themes because your components or the components that come from shaty and UI are already built in or configured to use these CSS variables for their styling instead of um tnd utility classes so this is really all you need to know to use shaten inside nextjs but to create that dashboard that I show in the beginning if you go to shat CN there's this examples page over here where you can see different components already built in here for example a mail component or a mail client a dashboard some cards EX samples and whatnot and the dashboard that I showed in the beginning is just this one you can find the code for this on the GitHub repository so you can just click on this GitHub and go through this UI now here inside of the apps there a bit small I'm going to make it a bit bigger on the app you can see there's this examples folder where you can just copy this dashboard this is the page and then you have the components related to it to implement the same dashboard that you have seen in the beginning of this video so let me copy these components and we will see how this is working together so inside of our page let's just actually get rid of this and copy this page instead let me also bring in the necessary components over here let me close everything out and this if I go back to our application and refresh there we go so we have all the components now showing up so let's actually go inside the code and see what we did here so we replace the content of our page with this page that came in straight out of chat CN GitHub which uses different components for these cards to render this nice dashboard you have uh selection for accounts a main Navar uh a user drop down I've also added this theme Tuggle switcher so you can just change to light change to dark or change to Orange um and then different components like this calendar or the date picker that we just installed together or this charts that's rendered using recharts so this is basically doing that we needed some extra components to copy here for what's rendered inside of these cards but pretty much that's um just straight out from this examples page there are other examples on this page that you can just toggle through and look for example for o for forms and you can get IDE ideas uh I mean not just copy them but get ideas on how you can use these components to render beautiful UI for your users and Implement theming whether it be light or dark theme or any other theme for that matter and that's our out for this video we implemented chaten in our nextjs app we copied components we learned about uh the built-in support for the light and dark theme and also the extendable themes that come in with the power of CSS variables you can create a template out of this for yourself I will probably do this same thing uh and include the link in the repo where you can just start an xjs app which is just like the other starter that we had with typescript and Telvin CSS but this time we also add in the basic things that we need from shaten uh such as the theme provider and the structure that we need for shaten to work so every time you're starting a new project if you intend to use this component Library it just has everything already set up for you to remove any duplicate work anytime that you're starting a new project if you have any questions hit me up in the comments like always and I'll see you in the next one bye-bye

Channel: Hamed Bahram

Views: 5,528

Keywords:

Id: l93uukpAoxE

Length: 25min 38sec (1538 seconds)

Published: Tue Feb 20 2024