How to Install Shadcn UI using React, JavaScript, and Vite

in today's tutorial I will show you how to set up shat CN UI using react JavaScript and Vite to get started I will go to documentation then click installation then Vite once you're on this page copy the First Command here switching over to my vs code I have a empty project here and I open up the integrated terminal and I will now paste in the command and hit enter it will prompt you to enter a project name just name the project whatever you would like I would just name it the default project by hitting enter then I will select react act then JavaScript follow the instructions here so switch into my project and then I will run npm install to install the packages once that is done I can just run mpm run Dev just to make sure it's all working correctly you should see this message and if we open up the address here we will now see our react app that was built using Vite for the next step we can go back to the documentation and copy this command to install Tailwind switching back to vs code I will now paste the command I just copied once this is completed we can go back to documentation and copy this code block here and then we need to create a new file but instead of calling it TSC config.js because we're using JavaScript we'll just call it JSC config.js instead going back to VSS code I will create a new file called JSC config.js then paste in what we copied earlier and hit save one small thing I noticed is that this file is not in the same folder as the rest of my files this shouldn't be the case for you but if it is just make sure it's all in the same folder I noticed this mistake once I finished making my video but as long as you have this file with the rest of your files then everything should work as expected and for most of this tutorial you will see this file outside of this folder but just ignore that as I eventually will fix that toward the end of this video once you have completed this step we can go back to documentation again and just scroll down a little bit and copy the code block that you see here now we will update the file in our repo called fight. config.js because we're using JavaScript and so I'll just go to that file now and then paste in the code block that we just copied and hit save don't worry if you see this error we will just continue following the documentation and the rest of this process will still work going back to the docs if we scroll down some more we can just copy this command going back to my terminal I will now just paste in the command it will prompt us to answer some questions the first one is if we would like to use typescript but since we're using JavaScript I would just select no for the style I would just choose default for the color I would choose slate when I ask where your Global CSS file is I would just point it to my index.css file so I'll just type in Source SL index.css and hit enter if you're using CSS variables select yes but in this case I'm going to select no if you're using a custom Tailwind prefix then just type it here but I'm not going to be doing that so I'll just hit enter to leave it blank here you can just hit enter we can just hit enter again for the import Alias and then for the import Alias for U just hit enter and if you're using react server components select yes but in this case I'm not so I'll select no and then just click yes to proceed Within installation once this process is complete we can now start importing components from the shat CN UI Library going back to documentation one last time we can copy this command here to install the button component from the shat CN UI library then we can run the command inside our terminal to actually install the component once that's finished we can open our app.jsx file and then erase everything inside of here going back to documentation I will just copy the import button code here to import the actual button component then I will copy the code here to actually display the button and I'll get rid of this unused code and hit save inside our terminal run the command npm run Dev to actually start the react app once we go to this address you should now see the react app running and the shat CN button component here that is the end of this tutorial hopefully you found this video helpful if you did please like the video and don't forget to subscribe for more content

Channel: Andy's Tech Tutorials

Views: 851

Keywords: shadcn ui, shadcn, react, install shadcn in react vite with javascript, react shadcn, how to install tailwind in react with vite, how to install tailwind in react, install shadcn/ui in react vite javascript, shadcn tutorial, shadcn react, install shadcn, how to install shadcn, shadcn how to use, how to use shadcn cli, how to install tailwind with react, react tailwind, josh tried coding shadcn, react js tutorial, react ui library, install shadcn/ui in react typescript

Id: vGiYuaquCo4

Length: 3min 51sec (231 seconds)

Published: Tue Apr 23 2024