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

In this tutorial, I'm going to teach you how to install Shadcn/ui in React with Vite project. This video will use JavaScript instead of Typescript. The Shadcn documentation does not mention clearly about how to install shadcn/ui in React and Vite under JavaScript. I will make the installation of shadcd/ui clear and step-by-step in this tutorial.
If you want to know how to set up shadcn/ui in JavaScript projects, this video tutorial will help you install Shadcn successfully.
Shadcn Docs - ui.shadcn.com/...

[@wakandagaming5763]

hi all if u get style not working after follow this tutorial just import u'r global css bruh import "./style/global.css";

[@Devtamin]

Thank you for sharing

[@Electro_69]

Thanks bro after reading this comment i restored my folder from recycle bin and it worked

[@augustinradjou3909]

Thanks

[@Reels-fact-7]

@@Devtamin npx shadcn-ui@latest init sir its not working,, help me please

[@abidibnazam4462]

This man exactly uploads what I need, he finds the gap that no one tells and makes great tutorials. Thanks man!

[@Devtamin]

Happy to help!

[@nichas143]

yes this is the place even i got stuck.

[@nemeziz_prime]

This is exactly what I was looking for. It felt like ShadCN instructions on their docs are more oriented towards NextJS. But you made it easy for people using React and Vite. Thanks a lot!

[@Devtamin]

You're welcome

[@parshv9-b47sheth3]

i spend 30 min to config shadcn this guy done very rapidly good video

[@Devtamin]

Happy to help

[@Electro_69]

fr he made it too simple

[@shafiemukhre]

Javascript is a much better option for the purpose of a hackathon, this is helpful to know how to set up tailwind and shadcn for vite-react in JS, thank you!

[@Devtamin]

You're welcome

[@lituanaskobea.9826]

I'll be taking on a hackathon match these coming weeks and this is exactly what am looking forrrr, thank youuuuu!!!

[@Devtamin]

I highly recommend using Typescript with Shadcn/ui rather than Javascript because Typescript is officially supported

[@Paradox_1]

you are a live saver for React developer 😎✅⚡

[@Devtamin]

You're welcome

[@LearnAlongFaizan]

It was literally useful for us, Thank you so much.
hoping for some long tutorials and auth for react and continue with backend api

[@Devtamin]

More to come!

[@benson52541110]

Thank you for your help. I have been stuck on the jsconfig.json file for a while.

[@Devtamin]

Glad I could help

[@gabrielzhu3236]

thanks a lot this is really helpful!however I have a question about the form component, becasue it seems using some features that only typescript used? Can you give a tutorial about how to use the form component in js? Again thank you sooo much !

[@Devtamin]

Sorry to hear that there is a bug on form components. There was a comment requesting me to do this video and I did not check it thoroughly if there is a bug. I will try to check it out again. Thank you for your comment.

[@tejasnasre3074]

Thank You Brother Nice Explanation

[@Devtamin]

🤝

[@UsmanHussain-k3d]

You are explanation is a very clear and amazing , please do the Laravel + react crud with Tailwind css , please😊 , it's more help for meAmazing

[@Devtamin]

Thank you, I will

[@jacksine-uh8bt]

Thank you Man for helping my projects❤❤

[@Devtamin]

No problem 😊

[@mohammedhamza5242]

Great!! This was what I needed. Another question: Have you made a video on how to use next-ui with Vite+React and JavaScript?

[@Devtamin]

Not yet! I will do. Thank you for the question. It is a great idea

[@Devtamin]

ua-cam.com/video/7zNmLhWerng/v-deo.html

[@mohammedhamza5242]

@@Devtamin Thanks for this one too.

[@cy4381]

I usually don't comment on videos but this video helped me a lot. Thanks

[@Devtamin]

Glad to hear it

[@sanchit0160]

thank you brother
love and respect from India

[@Devtamin]

Glad it helped!

[@durgfestivalvibes]

Couldn't find video for using vite react shadcn ui and in suggested videos got your video!!
Thanks man!!! 🫶 🙏
Subscribed!!

[@Devtamin]

Thanks for the sub!

[@tech-adventurer]

Excellent video! To he point and with a very clear instruction!
Well done 💪

[@carlosdelac]

Very helpful, thank you!

[@Devtamin]

Glad it was helpful!

[@elmenikmati]

¡Excelente, justo lo que necesitaba! gracias

[@Devtamin]

You're welcome

[@_itshenry]

You're a life saver bro... what about Aceternity UI for React JS😁

[@Devtamin]

Coming

[@beautifulworld3430]

Thankyou so much I was struggling to setup shadcn

[@Devtamin]

You're welcome

[@zantica]

if u have a troubble on a shadcn cli step, configure tailwindcss with the official doc...

[@komauk4368]

I don't use tailwind css class.Can you help me?

[@Devtamin]

can you explain more about it ?

[@UXDlozi]

Thank you so much, great tutorial.

[@Devtamin]

You're very welcome!

[@jasonsutis3387]

Ty - i tried to figure this out for.....wayyyyy too long and was unable to get the imports correct (or something idk wow)

[@mohandev005]

Thanks a lot man😊 , you save my day.

[@Devtamin]

Happy to help

[@pushkarjain4669]

saved my lots of time. Thank you so much

[@Devtamin]

You're welcome

[@manojmurugan590]

Thanks bro for clearing my dobuts

[@Devtamin]

Always welcome

[@shashanksaurabh6478]

thankyou!
Finally I was able to set up project with this video.

[@owaisali7063]

bro but there is two tsconfig files how to in the shadcn docs how to tackle that ?

[@shashanksaurabh6478]

@@owaisali7063 in mine I was not getting two TS config

[@Solohd12]

This means i can use alias in js ??

[@martinoklapez]

Why do you created 2 Carousel files / components? Why did you create the demo carousel file when you already had the carousel.tsx file automatically through the "comand npx shadcn-ui@latest add carousel"?
Coulnd't you just paste the example code from the shadcn website into the automatically generated component file?

[@adarsh-chakraborty]

THANK YOU SO MUCH

[@quoclam7140]

Can you make a video of installing shadcn with cra and no typescript? I’m working on a codebase that has those

[@Devtamin]

Sorry, I don't recommend using create-react-app anymore

[@nast7458]

Thanks ao so much for yhis tutorial!! ❤❤❤

[@SagaraNuwan-b7j]

thank you so much.. nice explanation

[@Devtamin]

You are most welcome

[@MOHAMED-AMINE-CHEKROUNI]

thanke you for this video, you saved me so much time, you got new subscriber

[@Shiv_kolekar]

Really helpful video, keep it up👍🏻

[@Devtamin]

Thank you for a comment

[@amitodak]

hi, can you show how to install tailwind css in nextjs app router with typescript and vite. thank you!

[@Devtamin]

I put it on my list

[@StaceyLust]

the docs have been updated plsss can you do another video
like im having random typo errors in my jsconfig.json and jsconfig.app.json
and its from the docs

[@Devtamin]

I'll check it out

[@imdefnotash]

it's working but i guess mine's broken it's half way there.. i think the css is not applied properly

[@Devtamin]

let's share a solution if you figure it out

[@wakandagaming5763]

just import u'r global css bruh import "./style/global.css";

[@vamsimonohar]

Hi Devtamin, what keyboard do you use?

[@Devtamin]

Dell

[@vamsimonohar]

@@Devtamin can you pls tell me the model as well 😅 Thank you

[@adityashrestha2774]

most components use typescript though?

[@Devtamin]

You're right. Most people ask me to do it video.

[@thefastest5997]

Thank You!!!

[@Devtamin]

You're welcome

[@AhmadMughal1]

The issue with this that it shows no intellisense for when using onClick or ClassName attribute on all of these components i don't seem to find any way to resolve.

[@GokulHans]

Thanks a lot bro

[@Devtamin]

Always welcome. Thank you for a comment

[@GokulHans]

@@Devtamin 😌

[@chamalsena]

thank you bro

[@Devtamin]

You're welcome!

[@german4539]

ty so much bro!

[@Devtamin]

Happy to help

[@hungvuong48]

I have a problem with a dialog in extensions, it can't open

[@Devtamin]

what is the dialog?

[@Aryan-p2e4z]

hii, what vs code theme you are using?

[@Devtamin]

I use Mater Icon Theme

[@ExpoDev_Dash]

hey, I am not using vite. will this still work ? I dont have a vite config file

[@Devtamin]

Nope

[@ExpoDev_Dash]

@@Devtamin yeah.. i had to do manual install

[@quoclam7140]

following just for this tutorial

[@Devtamin]

Thank you so much

[@SAJIDALAM-pj6dp]

Failed to load jsconfig.json. Couldn't find tsconfig.json after all the step comlet in the last enter it give me that error can u give me a solution

[@rotes3106]

Thanks brother. But, somehow my tailwindcss is not working after installing shadcn

[@Devtamin]

What happened?

[@pedrofigueirinha5325]

@@Devtamin for me the button is at middle of the page and so is the div
The tailwind.config.js file has a bunch of code using module.exports = ... where module is not defined and at the end has plugins: [require("tailwindcss-animate")], where require() is not defined. Also, in the button component, every prop is triggering the error propName' is missing in props validation. In the vite.config.js in the alias _dirname is not defined.

[@wakandagaming5763]

just import u'r global css bruh import "./style/global.css";

[@arochacarlstephen]

@@wakandagaming5763 where do I input that?

[@wakandagaming5763]

@@arochacarlstephen import your css file bro import from "your css Path"

[@Stufflahza]

your the best

[@Devtamin]

Thank you for a comment

[@salehdz3399]

if i using react without vite i need to following the same steps for vite ?

[@Devtamin]

Nope

[@vladimirfilipovic5845]

Thanks

[@eduardomatheussilvadasneve6980]

every good my friend!

[@Devtamin]

Thank you! Cheers!

[@khuramshahzad9089]

followed all the steps but got the following error :
"
PS C:\Users\momin\Desktop\New folder\githubProfileChecker> npx shadcn-ui@latest init
node:internal/modules/esm/resolve:215
const resolvedOption = FSLegacyMainResolve(packageJsonUrlString, packageConfig.main, baseStringified);
^
Error: Cannot find package 'C:\Users\momin\AppData\Local
pm-cache\_npx\125ee17d583c4e03
ode_modules\bl\package.json' imported from C:\Users\momin\AppData\Local
pm-cache\_npx\125ee17d583c4e03
ode_modules\stdin-discarder\index.js
at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
at packageResolve (node:internal/modules/esm/resolve:841:14)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1169:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap. (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
Node.js v20.15.1
PS C:\Users\momin\Desktop\New folder\githubProfileChecker>
"

[@alexhelm6784]

i can't create a jsconfig.json, I have this message : the name jsconfig.json is not valide as a file or folder name. Please choose a different name.
anyone has this issue ?

[@harishpadi5508]

Good Info

[@mishra4291]

thanks bro

[@Devtamin]

Welcome

[@rohitahir-q5i]

yes your way helps a lot keep it up
🤑

[@Devtamin]

thank you

[@StaceyLust]

was using latest version of node and was getting a ERR_MODULE_NOT _FOUND everytime i ran the npx shadcn-ui@latest init
i then switched to node v18.40.2 lts cuz ppl said it solved thiers but it still shows an error, any fix ?

[@StaceyLust]

react/vite

[@okiefegift9006]

very useful

[@rafiamalik993]

Thanks

[@Devtamin]

You're welcome

[@Marshal-786]

thanx buddy

[@MrMe-xs9gq]

thanks man

[@ZeshanMukhtar1]

love from Pakistan

[@abedalraoufzeidan1461]

Thank you

[@Devtamin]

You're welcome

[@ovna]

ty

[@Devtamin]

Thank you for a comment

[@sabawoonsediqi514]

node:internal/modules/run_main:129
triggerUncaughtException(
^
Error: Cannot find package 'C:\Users\omari\AppData\Local
pm-cache\_npx\125ee17d583c4e03
ode_modules
pm-run-path
ode_modules\path-key\package.json' imported from C:\Users\omari\AppData\Local
pm-cache\_npx\125ee17d583c4e03
ode_modules
pm-run-path\index.js
Did you mean to import "path-key/index.js"?
at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
at packageResolve (node:internal/modules/esm/resolve:841:14)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1157:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap. (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
this error is given to me when I am trying to install packages.
please provide a solution for this error!
regards

[@dhanrajshetty645]

same error did u get a solution for this?

[@dhanrajshetty645]

hey i found the solution
1 run this npm install shadcn-ui@latest
2 run this npx shadcn-ui@latest init

[@durgfestivalvibes]

Are u on twitter bro?
Would follow u there

[@rafiamalik993]

❤

[@Devtamin]

Thank you

[@sebastianriquelme1]

Crack!

[@arambp77]

I fucking love you dude

[@Devtamin]

Glad it was helpful!

[@nekokaitogamer]

Thanks a lot

[@Devtamin]

Most welcome

[@Yesterday_i_ate_rat]

Thanks

[@Devtamin]

Welcome

[@raffph]

thanks bro

[@Devtamin]

No problem