How to Install Shadcn UI in React using Vite | Tutorial

in today's tutorial I will show you how to install shat CN using react to get started we can go to documentation and click installation I will be using Vite to set up my react app so I'll click Vite switching over the VSS code this is an empty project for the first step I would just create my react app using Vite and so I can copy this command going back to vs code I would just paste this command inside the terminal to create my react app you can name the project whatever you like I'll just hit enter to use the default name then for the framework I would select react for the variant select which option makes the most sense for you I would just choose typescript for this example and hit enter now I will switch into the project going back to the documentation we can now copy this second command here and paste it into our terminal and just hit enter this is what it should look like once everything successfully installed going back to the documentation we now need to just copy this section of code into our TS config.js file we can easily do that by going to our project now and opening up the f file at the very top we can just paste in exactly what we copied and just make sure that add a comma it hit save for the next step we need to update the V.C config.txt file and just replace all the code with the code that you just copied and hit save for the next step just copy this Comm in from the documentation and just paste it in your terminal to run it you will now see some questions asking you how you want to configure your project you can configure your project options however you like but I'm going to be using the settings from the documentation so if you scroll down I'm going to copy all the settings that you see here going back to vs code I'm just going to select yes for using typescript for the style I will select default for the color I will select slate for the location of my Global CSS file I would just use with the document ation has which is source index.css so I would just do that and hit enter for CSS variables I would just select yes for this question about a custom Tailwind prefix I would just leave a blank and hit enter for this next question I would just use the default value and hit enter same thing for this question and also for the import Alias for the utos file I would just use the default value so I will to enter for this question about react server components if you are using them select yes but in this case I'll just be selecting no double check all your settings are correct and if they are just type why and hit enter this is what it should look like once everything is successfully initialized to make sure everything is working as expected we can go back to documentation and copy the code here then go to your terminal and paste in the command and once it's done this is what it should look like open up the app. TSX file and just make sure to include the import statement and then add the code for the button component then start your react app by running the command npm runev you should see an address and if we just open it up you can now see the button component here if you see this exact screen that means you set up everything correctly and you can now install any components from the shat CN UI library 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: 1,316

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

Id: 8PDFi4cKjuI

Length: 3min 21sec (201 seconds)

Published: Wed Jan 17 2024