Shadcn UI with Next.js | Personal Finance Dashboard App

I have switched to Chad CN UI and let's take a look how you can do that too okay so before installing Chad CN UI components we do need to make sure that we have import alysis configured for our next GS application go to TS config Json we need to add couple more things base URL Dot and we do need paths so basically what it does is for example we can search for this particular example and we do have an import from the server repositories user repository so as you can see we need to go like three levels up and then uh from Source go to server into repositories and then user repository with this particular import addas we can skip those three dots and just replace it with the ATA server Repository is user repository so basically this thing starts your import statement from The Source directory now we can open up the chaden website and take a look how to install these components so chadan UI has a little bit different approach compared to any other uh UI components library due to the fact that there is no npm package you have two options how you can in install uh the components one is manual the other one is using their CLI tool so if you would choose to install it manually all you would need to do is select the component you want open the installation and the manual Tab and you will find the instructions how to do that so since Shad CN UI is based on radx UI Library which is headless you sometimes will need to install some uh particular library for radx UI and then you just copy paste all the source code from for the particular component so in this case button and you open your code create a component for example button TSX and just paste all the code and change the Imports if required but we won't be doing it this way so let's delete the button we will be installing the components using their CLI tool so let's go from the very start uh getting started installation let's choose next GS the first step is to create the project since we already have our finance dashboard application we will skip this the other one is to run the Chad CN UI in it CLI command let's open the terminal and npx shed CN UI latest in it so now you will be asked some questions so would you like to use typescript of course yes let's say default for now let's say slate where is your Global CSS file and they provide like app SL Global CSS but in our application it's under Source Styles Global CSS so Source Styles global. CSS enter would you like to use CSS variables yes are you using no we are not using any custom prefix where is your Tailwind config GS located so we do have a little bit different name for our Tailwind config from create T3 app so let's adjust this configure the import alyses for components so yeah as I previously showed we already configured the alas so it's okay alas fors okay uh are you using rect server component in for this project we won't be using them so no right configuration to component Json yes all right success damn I made a mistake it was Global CSS not Global so let's just remove this one the old one and rename this one to add the s in the end there is also a step for fonts but uh I will be using the default fonts as for right now yeah basically that's it for the main installation so what this CLI did it updated our Global CSS with some base colors for the light theme and dark theme also it created the components Json which is used basically for the Shad CN CLI to know which components to install what are the paths and alysis Etc and that's it and of course it also updated the Tailwind config with some more stuff in it but we can skip this for now okay so now let's create a user link component where we will be using Chad CN UI components so let's call it user link and for starters we just take the current logged in user from the out zero hook use user if there is no currently logged in user return null otherwise just render some user link and also we want to render this component in our header so let's do that just after the navigation and also let's import this component so yeah we do have the user link rendered now for the installation of chadan UI components themselves let's start from the Avatar we select the avatar from the components and we do have a guideline how to add this component and how to use it so we will run this simple CLI command in our project in the terminal let's stop the project run npx add Avatar okay so we should have a new directory in our project under the components UI and as you can see the CLI automatically added the Avatar component this means that we do have whole ownership of this particular component if we would like we could make any changes to it tweet some Styles or change logic or whatever it's basically your component so that's one of the differences of the Chad CN UI all right so let's use the this component as in the usage example you can see that this component exports three different things which is Avatar Avatar fullback and Avatar image so let's just say that we want an avatar import it from ATA components UI Avatar let's do Avatar image for the source of the image let's say take it from the user picture and if it's empty just in case add the empty string and as for Avatar fallback let's say it will be user do name and the first letter okay let's double check how it looks and as you can see the Avatar image is being displayed and if I would set the the user picture just uh let's say null so we could test the Avatar fallback Let's ignore all the warnings we can see that the fallback is being rendered so even we could do like this so the fallback is being displayed but if the user picture is present it will be displayed so that's how easy is to add Chad CN UI components but we also need few more we want to be able to click on this Avatar so for that let's say we want to also add a Chad CN button so let's open button again there is a CLI command for that let's run this command stop the server add button button is installed as you can see in the UI directory let's start the server again and let's add this button so we basically can we can wrap this outter in the button we import that from the from the components UI button and we can also give it some classes for position hate with and some roundness also I will give the variant of host basically so that it would be invisible only clickable the last component we want from chadan UI is a dropdown cuz I want to be able to click on it see some settings uh switch for example to the dark mode or just simply log out so yet again just open the instructions from the Chad CN itself drop down menu copy the command and run in the terminal okay let's start the server again so from the dropdowns we will need a little bit more components we can import them below the button we will need drop down menu drop down menu content group item label separator shortcut and Trigger basically you can find all the documentation in the chat documentation and now we can wrap everything with the drop down menu let's say that our drop- down menu trigger will be our button which we created previously and the drop down content for now some random text let's see what we got yeah as you can see I can press on the drop down menu trigger which is our button with the Avatar and I can see this content but now let's imp improve it a bit for starters let's start with a drop down menu label component let's say the class name will be font normal and in the label we will print the users name and email let's double check how it looks and we can see that it already looks a little bit better now let's add a drop down separator just for the visuals and the drop down group within the group we will say we want a drop down drop down menu item with the name of settings and also we can give a drop-down menu shortcut with some something like too let's take a look how it looks menu item must be used within menu content so what what I have done ah all of this has to go in the drop down menu content so after the label let's refresh all right so we do have a separator we do have some settings which right now does nothing and also we can do one more drop- down menu item for a logout button so yeah we do have log out and on click it will make the out zero to log me out not sure about you but I'm on the dark mode side luckily with Chad CN UI it's very easy to switch between light mode and dark mode so we can open up the instructions from the documentation click on next GS all you have to do is install next themes Library let's do that start our application again the next step is to create a theme provider so let's copy the code and under the components let's just collapse this one under the components we create a new component named theme provider I will use a little bit different name than they are suggesting so copy the code save it uh we are not using those in this particular project all right the next step is to wrap your root layout with this provider so our root layout is in the layout component so instead of just react fragment let's say we want to use theme provider import from our component and also so let's just copy those props as they suggest and format the code the last step is to add a button which would allow the users to switch between light mode dark mode or system but I want to do that a little bit different and also we can check the code how to do that but I want to add this button into this drop down menu let's open our user link component and in here we can use use theme hook which has two things we will need it's one is set theme function and the other one is resolve theme let's also create a simple variable which would say is Dark theme and it's a dark theme if resoled theme is equal to the string dark and also a function for toggling the theme between dark mode and light mode so Anonymous function set theme and if it's dark theme already let's set it to the light otherwise set it to dark okay so for the drop down itself let's add one more drop down menu item which on click will call the toggle theme function inside of it we will say switch to if currently is a dark theme then say switch to the light theme or dark otherwise and now let's add this simple icon indicating what theme is currently on so we will do that in the drop- down menu shortcut and yet again if it's dark theme let's render a sun icon which we can import from Lucid react this comes together with a Shad CN installation so if it's a dark theme let's say render sun and if it's not then let's render a moon and let's give the same class name and as you can see as we provided the default theme to be a system one and I'm a dark side user our application instantly switched to the Dark theme but also we can now manually switch between the Dark theme and the light Theme by just clicking this drop down menu item so let's try to switch to the light and as you can see the icon from the Sun and Moon is changing accordingly that's how simple it is lastly I would also like to change the color theme of our application and for that Shad CN UI also has some good stuff so we can go to the themes and in here you can pick and choose whatever color theme you want for your application you can even do a little bit of customizations I will pick a blue one let's say and then all you have to do is copy the code which is basically only the CSS stuff so let's say copy and in order to apply this color scheme all you have to do is open your Global CSS file and instead of your old layer base paste a new one and save it and we do have a new color scheme cuz as you can see there is a blue borders you know thank you for watching click that subscribe button if you don't want to miss the upcoming video in which we will be building the bank accounts page where we will be creating new bank accounts retrieving them using a lot more Chad CN UI components and stuff like that

Channel: CodeWithOsvaldas

Views: 5,575

Keywords: next.js, react, fullstack application, fullstack, tailwind css, shadcn, shadcn ui, tailwind

Id: Qo24yV7tqBk

Length: 18min 4sec (1084 seconds)

Published: Tue Jan 16 2024