How to Install Shadcn in React, Vite with Javascript | Set up shadcn/ui in React, Vite, Javascript

hello everyone welcome to Dev tamin in this video I'm going to teach you how to set up a shade CN projects in react andv application okay let's get started so let's go to shade CN okay and then go to documentation and then go to installation and then go to Ved so it will tell you how to create a Ved project over here and how to config shade CN in Feed application okay we are going to follow some guidelines from this documentation okay let's get started go to desktop you can go to wherever you want on your computer and then press shift and right click and then go to open Powershell window here okay the first command that we are going to execute is this command npm create feed at latest I can copy it or you can type it directly over here npm create beat at latest so it will ask you a project name so you just type it over here uh I will name is react and then shade CN and JS something like this and then I'm going to pick react and then I will go to JavaScript you can choose typescript and if you choose typescript you just follow this document directly okay and then hit enter after you hit enter it will create a folder for you on desktop over here and then you just go go into the folder CD react shade CN DJ okay and then type npm install let's open this project with Visual Studio code Type code and Dot hit enter so it's we open Visual Studio code for you and then let's open Terminal over here over here I will type npm run def press control and click over here is we open react application over here you can click on count one tot at this step we have install react successfully the next step we are going to install Tailwind Let's uh press control C to stop the application and type yes okay The Next Step that we are going to do is to add tailwind and its configuration all right copy this command and then put this over here hit enter And The Next Step let's copy this command and put this over here after you run this command you will get this files Tailwind doc config.js I just want to let you know we won't do anything on this files okay the next step what we are going to do uh instead of using this files TS config.js we are going to name is JS config.js uh because we don't use typescript on our project so we go with js. config.js Okay C and you don't have to copy let's right click over here create new files and then JS config do Json okay and we just copy everything from here and put this over here okay I'm going to addit this a little bit okay the next step what we are going to do we are going to update V.C config dots in our case it's going to be CHS okay we are going to add Alias this Alias to our V configuration okay copy this one and go to V config.js over here put this over here and then we have to include path over here so let me go back to that documentation and then copy this one and put this over here here and save it make sure you save these files as well so the next step we are going to run this command copy this command and paste it over here npx sh CN UI at latest in it okay hit enter it's going to ask you would you like to use typescript no pick no and then which Styles would you like to use I'm I'm going to default hit enter and then we are going to pick slate and we have to tell it where is our Global CSS files so our Global CSS files will be in sourced and index.css okay so we type Source index.css hit enter and would you like to use CSS variables for colors yes and then just hit enter and then just hit enter and hit enter hit enter and hit enter for yes and then we can choose like yes okay we successfully initiate our shade CN in our project okay the next step we are going to do we are going to create a first component copy this one this command and past this over here hit enter so we execute this command to create a button component when you go to Source over here and components and then UI and button you will see button. jsx over here so this file just created okay let me close this one and close this one okay let's import this button in app.jsx uh let's remove this one okay and remove this one remove all of this and can move this one too okay let's import a button over here button okay this button so don't forget to include this one as well and this one I can put uh hello shade CN okay save it and let's run npn M run diff over here and press control and click over here and if you go here you will see a button over here okay Okay what's if I put div over here and let's try some Tailwind uh class over here class name padding x equal to 20 I have to move this button over over here and then save and let's see see the button move over here okay let me create a folder in component over here and then name it demo uh let's try other components for example go to component over here and then go to curo okay we are going to copy this code uh copy it over here so right click new files we can name is carouso uh demo. jsx and paste this over here okay you have to remove this one so we don't need this one there's two components that we have to create card and card content okay if you scroll down a little bit you will see how to create a carousel component over here you can copy it and then stop this application and paste the command over here it will create Carousel for you and as I say we have to create card component as well so let's create card component npx sh CN UI at latest at car and you will see Carousel over here in UI folder in components folder okay and us see card over here so and then you can use this uh demo component in app.jsx let's try Carousel demo this one sorry I write this wrong let's change this one to Carousel okay and then over here is Carousel save to run npm run Def and then go back to our application see you will see Carousel over here all right this is all about this video If you like this video don't forget to click like subscribe and comment down below

Channel: Devtamin

Views: 5,274

Keywords: programming, code, coding, coding tutorial, programming tutorial, web development, react, shadcn react, react shadcn, shadcn javascript, shadcn typescript, shadcn/ui javascript, shadcn vite javascript, install shadcn/ui javascript, install shadcn, install shadcn/ui, install shadcn in react vite with javascript, install shadcn/ui in react vite javascript, install shadcn non-typescript, no typescript shadcn, shadcn without typescript, set up shadcn vite react

Id: gXSC5eMw68o

Length: 9min 58sec (598 seconds)

Published: Fri Jan 12 2024