Shadcn UI + React JS | A Quick guide

hi everyone uh today we are going to talk about a UI Library uh that is built on top of Redix Redix UI and Tailwind CSS it's it's called shed CN UI as you can see on my uh on my screen okay shed CN UI Library basically provides to various uh customizable reusable components that you can use in your application it's free and open source so you can there is no license required for you uh to use this in your application just plug and play kind of option you can say uh let me show you how you can use it in in your application so out of the box it does provide you various options you can uh use in your application so as you can see uh these are some examples of the components of this uh shed CN UI Library so beautifully designed tabs options and these small cards mini cards you can say and uh kind of a chart uh okay and uh we have this various examples on their official website okay you can go through these okay I'm going to show you how you can install this library in your project and make use of the components available okay uh let's just go to the documentation part and this is the introduction so how it is providing you the Reus components built on using redx UI and Tailwind CSS right okay so you can go through this uh let me show you how you can install it in in your application so it does provide you options of for different Frameworks so you can use it in your next J application or if for different package manager as well it it works like if uh if you if you are familiar if you work with npm you can install it via npm or it does provide the option of installating installing it via V okay and there is a manual option as well it does provide some steps how you can do the manual installation by following this step bystep process you can first you you need to install the Tailwind CSS in your application uh through these it does provide you command as well so you can just directly copy these commands and run uh in in your favorite package manager in your command prompt okay okay it's very a brief process they have mentioned so it's pretty useful uh you can follow this so I'm going to show you today I'm going to show you how you can install this shedi in UI Library via V okay so let me show you how okay let me open command prompt okay uh let's first run the command uh so just copy the command First Command uh mentioned in the first Tab and paste this in the command prompt okay press enter so it will ask you to which application you want to uh create the project I'm going to create a react project and I'm going to use the typescript in my react project so I'm going to select the typescript option so my folder structure is created let me go to the I'm going to go into this directory okay I'm inside the directory just open this project in the visually Studio code okay as you can see it has created the project so this is the project structure okay what is this here let's go to the second step we need to install Okay so these are the commands we need to run in our project let's just go to the visualist and paste the command and press enter okay okay has created okay Tailwind CSS config is also created let's go to the third step so for third step we need to edit the TS config Json file which has been created by the above commands let's just open that TS config Json file where it is okay here it is and we need to basically uh add the following code so we need this code to be added in our TS config file let me paste it here okay and what's the second last fourth step uh add the following go to the V config file okay let me install this dependency first okay it's installed after that we need to add this code in our we we. config file okay let me open my we config file okay here it is so okay so there is already some code written just copy this first line is this is the new line which needs should be added okay and uh we need to add this resolve path code okay yep it's done we need to install the shcn UI package okay let's install this so when you run this command it will ask you different options so uh different configuration basically it is going to set in the config file component Json file so for this project as I have already mentioned I'm going to use typescript so I'll select the yes option and which style would you like to use I'm going to use the default style and the theme color uh it's asking me the theme color so I'm going to select the default option you can afford as per your needs you can change the options you want okay uh so where is your Global CSS file so my Global CSS file is this one index. CSS so I'm going to change this the path of this SRC index. CSS okay so would you like to use CSS variables I'm going to select yes for now and where is your tail config Json file so this is in the r directory okay I'm I'm going to select the default option and default option for this one as well just press enter for these three options and uh are you using react server component so I'm not using the react server component I'm going to select the no option so yep so we want to write the configuration to the component Json file just prent y okay so now it's installing the dependencies in your project all the pendencies has been installed in our project as you can see the success message let's go to the next step that's it now you can start adding the components in your project so very so for first very a basic example they have mentioned that how we can add the button component in our project so let's just copy paste this command and press enter so it's going to add the button component in our project okay so installing the button component as you can see it's very easy to make use of any available component in the project yep it's added so if you look into the source directory SRC directory there is a component folder edit component slui folder and here the command you run for the button component it's added the button t TSX file you can just directly make use of it in in your project so just go to the app TSX file and I'm going to remove the boiler plate code which I written here just okay and now I'm going to make use of the button button component okay let's go to this I'm going to copy this code okay as okay so it is showing us that this button component is we haven't imported this button component in in the app TSX file so let's just add this okay I added this let's remove these unused Imports okay if now if I run the project so I'll be able to show you how it looks okay follow the command so this is the URL okay as you can see this is very basic a very beautifully designed button has been added so I haven't done anything for Designing this button it's all readily available through the shet and UI library and uh we are able to use it in in our project okay so this was the very basic example I have shown you but I'm going to show you how we can design a a login and sign up page using this uh shed CN UI Library so uh in the starting of our video I showed you that various example they have uh listed on their website okay uh I'm going to use this these options to design the login page okay as you can see this is very uh for the login page I am going to use this this similar kind of design in the project uh basically it's a card component okay uh let uh let's design this card component okay uh just go to the component part and go to the card section okay so this is what we want to design uh okay so let's say you want to add the card in your card component in your in your project so just go to the code part and uh it's making use of different components as you can see so it will show you how how you can use it in your project so for this first you need to add the card component by running the npm command this shed CN UI latest at card command go to the project and open a new command PR terminal okay and run this command okay just check the component directory when you run this command it will automatically add a TSX file in your component UI directory for each component you are adding okay so as you can see the card component has been added okay after that you need [Music] to import the card component in your project okay for this let's minimize this okay so for so I'm going to create a new directory basically the pages I'm going to create and for this we are going to create a login page so I'm going to create a TSX file for login page okay okay let's copy paste this app [Applause] okay okay I'm going to delete this these imports from here I don't want this div as well just first copy the Imports if you want to uh add for card okay after that you need to copy this okay yep uh now go to the browser let's see how our page looks like okay so let me show you after installing any component via the terminal uh you need to restart the project basically so let me restart this project again okay let's go to the project yep as you can see it's refreshed okay I haven't imported this in the TSX file okay just wait for me okay here um going to import the login page which we have just created okay and now we can remove this import from here okay so it's it's a very basic design we have created here card title card description card content on card footer so basically it's showing you uh what you want what what you can add here to design the whole card for your application Okay so I'm going to uh Design This okay let's uh just copy the code we have card title okay card description for now let's just say uh this is a basic login page okay [Applause] and as far as the card content goes we need to add the input label and in the card footer we need to add a button okay we already have the button component uh guess we need to install the input component as well uh yep we do have input and label component as well okay let's just add these first okay let me stop it and install these components this one is for adding the input component and we do require this label component as well okay just copy this command as well okay input is installed install the label component as well and yep as we are in installing the different components it's keep adding them in the component file folder as well okay after that we were looking that we wanted to create this similar kind of a card for our login page so it does give you a option to view the whole code for this component so just let's just go to the GitHub page for this okay as you can see this these are the components it shows you so we wanted to look at our create an account component so let's just go to this one okay as you can see and this is how they have designed the component simply want this these two divs okay let's just copy these in my content section card content okay let's import the label we have already installed the label and input as well okay yep and let's run the project again okay let's see how it looks okay not much but okay and as far as the card footer goes let's just go to the card footer section and copy this button code and paste it here and we do need to import the button from the component folder okay so I edit this all the Imports are in place if we check our website so this is how it looks okay but it's very basic let's just design it as I mentioned so this shed CN UI already is built on top of uh behind the scenes it is making use of Tailwind CSS so anywhere you are stuck that which class name you want it you should use to design the uh to change the layout or positioning of your elements so you can just simply open the Tailwind CSS official documentation page and uh find the different um CSS classes you should be using uh okay okay let me just click on this okay so we are making use of so there are different classes they have mentioned here what are the different which you can use to justify the content alignment for spacing those sort of things so so I have I was looking into it so I know some of the classes we can use to make it more beautiful so I'll be using those okay okay so I added item start space for some adding some space and the alignment of the content okay be we check so this is spacing is a little bit better I don't want my card to be stressed to the whole page uh in width so I'm going to set some width for my card so you can use this class for this W is for setting the width and you can set the uh width in pixels by using this syntax yep okay now yep so I have added some uh classes to design it more beautifully I'm to align some elements on in place so I added these Flex classes uh I found on the T Tailwind CSS page so you can I'll I'll add the resources in my in the description of this video okay and if we go to the page so this is how it looks so it doesn't require that much of effort and we were able to come design a login page the next thing I wanted to show you um it because it does provide you a out of the box option to set the theme for your application as well so and it's pretty easy to add the theme com uh theme theme Concept in your application as well so if you go to the component section of your application and go to the dark mode option it does give you uh the steps to add the dark mode option okay I'm going to select the beat and uh for this you need to add follow these steps and you'll be able to uh set the theme for your project okay uh as a first step I need to create this DSX file in my project okay let's just add it so I'm going to uh create the file Here theme provider TSX file so you can just directly copy the code and paste it here okay it is done after that uh you need to wrap your root layout with the theme provider okay let's just copy this theme provider option first in my app. TSX file okay so this was uh yep successfully imported just copy this [Applause] okay yep we are good if I go to the project yep as we have seted the default theme as dark one it's conver changed our theme to dark okay now uh it does give you an option to add the toggle button to your application so that way it will be easier if you like this if you want to search your theme of your application directly from this top down okay so let me just uh so it wants us to create this more toble TSX file component basically so let me just again go to the component folder and create a file okay and copy paste this code from here okay so again this is making use of drop down menu component so we need to install this let me stop my project and copy the command for this drop down menu okay so here it is let me select this basically this this is the component it wanted it it's making use of let just copy this command and run it in a project so that way it will install the component or add the component file in our project okay let installing yep it's been added okay after after that yep now we can directly make use of this component in our app. TSX file okay let me just add it here okay mode toggle this was the component we had created now if we go to our project and let me run my project again and we run Dev okay now if I go to my application it's loading okay now you can see this is they have added this toggle button and we can switch the theme okay let me just reposition it okay yep oh now it looks good okay as you can see we have added this toggle button s to switch between different themes okay and if you want to change the color of the overall theme of your application so you can do it like this as well okay uh let's say I wanted to select this orange option and just uh for that you just need to copy this code from here okay and you can paste it in your Global CSS file so uh when we created this project it asked for us the path of our Global CSS file so it's index uh CSS file file inside the inside our SRC folder so basically you need to replace this code okay and now it should be good yep as you can see the overall theme colors are changed okay now if I select the dark mode okay still working I hope this video was helpful to you you helpful you can subscribe to my channel and like this video and had a comment

Channel: Coding Endpoint

Views: 6,274

Keywords:

Id: tL6oYbiFe60

Length: 25min 29sec (1529 seconds)

Published: Sat Nov 18 2023