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

[@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

[@tanmayghosh8311]

@@Electro_69xd

[@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

[@Muxitdin1]

every time i forget how to do this and every time im coming back to this vid. thanks a lot, mate)

[@Devtamin]

make sure you subscribe

[@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

[@vijaysreekarkakarapalli4983]

Thanks a lot boss. Been trying for so long figuring out how to make it work. This helped now I can get started on my project.

[@Devtamin]

Glad you like it

[@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

[@cy4381]

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

[@Devtamin]

Glad to hear it

[@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!

[@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!

[@tech-adventurer]

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

[@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]

kzbin.info/www/bejne/bauxnn-ejMqlpMk

[@mohammedhamza5242]

@@Devtamin Thanks for this one too.

[@tejasnasre]

Thank You Brother Nice Explanation

[@Devtamin]

🤝

[@jacksine-uh8bt]

Thank you Man for helping my projects❤❤

[@Devtamin]

No problem 😊

[@elmenikmati]

¡Excelente, justo lo que necesitaba! gracias

[@Devtamin]

You're welcome

[@sanchit0160]

thank you brother love and respect from India

[@Devtamin]

Glad it helped!

[@mustafaali-nk8mx]

thankyou soo much for that i would like to get a bit of explaination abt why we did the tsconfig files and stuff if possible but it really worked for me thanksalot < 3 def worth a sub

[@ShivamPandey-y5l]

This was so so helpful.. thanks a lot

[@Devtamin]

You’re welcome

[@FardanMAzizi]

thanks bro🎉, I'm fed up with the strictness of ts because i thought ShadCN could only be in ts, after watching this video i am ready to go back to JS 😂

[@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

[@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.

[@Char_lsh]

chat gpt suggested me this video. thanks!

[@Devtamin]

You’re welcome

[@carlosdelac]

Very helpful, thank you!

[@Devtamin]

Glad it was helpful!

[@spacticals]

helpful for a beginner. thanks

[@Devtamin]

Glad it was helpful!

[@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

[@mohandev005]

Thanks a lot man😊 , you save my day.

[@Devtamin]

Happy to help

[@benson52541110]

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

[@Devtamin]

Glad I could help

[@_itshenry]

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

[@Devtamin]

Coming

[@Shiv_kolekar]

Really helpful video, keep it up👍🏻

[@Devtamin]

Thank you for a comment

[@UXDlozi]

Thank you so much, great tutorial.

[@Devtamin]

You're very welcome!

[@beautifulworld3430]

Thankyou so much I was struggling to setup shadcn

[@Devtamin]

You're welcome

[@ManishRaj-dy7oi]

1.>npm install -g mern-project-cli 2.>devcli create-frontend project_name --shadcn Install 1st command in your computer And run 2nd command to create react project with shadcn+ vite+ tailwind css in just one command.

[@Devtamin]

Thank you for sharing

[@ArmanGoury-ww8ke]

thankyou brother very helpful for me

[@Devtamin]

Always welcome

[@pushkarjain4669]

saved my lots of time. Thank you so much

[@Devtamin]

You're welcome

[@BabacarThiam-lj3vv]

This is amazing for this video, thanks

[@Devtamin]

You're very welcome!

[@nast7458]

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

[@manojmurugan590]

Thanks bro for clearing my dobuts

[@Devtamin]

Always welcome

[@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?

[@SagaraNuwan-b7j]

thank you so much.. nice explanation

[@Devtamin]

You are most welcome

[@eduardomatheussilvadasneve6980]

every good my friend!

[@Devtamin]

Thank you! Cheers!

[@MOHAMED-AMINE-CHEKROUNI]

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

[@devByDash]

bro,aliases are not working with this setup please help. I am so frustrated I tried evrything

[@Stufflahza]

your the best

[@Devtamin]

Thank you for a comment

[@jiemei6666]

For some of you may not run 'npx tailwindcss init -p' successfully, because tailwind removed 'init' from V4. Manually create tailwind.config.js and postcss.config.js

[@Devtamin]

Thanks for the information!

[@GokulHans]

Thanks a lot bro

[@Devtamin]

Always welcome. Thank you for a comment

[@GokulHans]

@@Devtamin 😌

[@Solohd12]

This means i can use alias in js ??

[@rohitahir-q5i]

yes your way helps a lot keep it up 🤑

[@Devtamin]

thank you

[@adarsh-chakraborty]

THANK YOU SO MUCH

[@quoclam7140]

following just for this tutorial

[@Devtamin]

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

[@komauk4368]

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

[@Devtamin]

can you explain more about it ?

[@vamsimonohar]

Hi Devtamin, what keyboard do you use?

[@Devtamin]

Dell

[@vamsimonohar]

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

[@german4539]

ty so much bro!

[@Devtamin]

Happy to help

[@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 ?

[@jasonsutis3387]

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

[@roshanmenuka7651]

Great!

[@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.

[@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

[@nihalcharola3938]

Same error, do you get solution?

[@chamalsena]

thank you bro

[@Devtamin]

You're welcome!

[@salehdz3399]

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

[@Devtamin]

Nope

[@KrishnaGupta-bp1ny]

thanks a lot 🙏

[@Devtamin]

Most welcome!

[@mounirhabbas7969]

Hello, I have a problem In the version I am working on, there are additional files such as tsconfig.app.json I created a file jsconfig.app.json in the same style explained in the video But the problem is that there is a file that I did not find with what to fill in: "path": "./tsconfig.node.json" Note: This line is in jsconfig.json and there is no file to link it to

[@zantica]

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

[@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> "

[@adityashrestha2774]

most components use typescript though?

[@Devtamin]

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

[@jam-ss2jc]

Can you please from scratch show how to build a website (could be a very simple too) using shadecn and javascript react and not in typescript

[@thefastest5997]

Thank You!!!

[@Devtamin]

You're welcome

[@Aryan-p2e4z]

hii, what vs code theme you are using?

[@Devtamin]

I use Mater Icon Theme

[@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

[@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";

[@karualiode]

@@wakandagaming5763 where do I input that?

[@wakandagaming5763]

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

[@douglastitze1338]

Some changes need to be made to work now but still a good tutorial

[@Devtamin]

Can you share the changes?

[@harishpadi5508]

Good Info

[@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

[@navvi5108]

2:14 if u getting error use "npm install"

[@hungvuong48]

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

[@Devtamin]

what is the dialog?

[@okiefegift9006]

very useful

[@nyanlinhtet5815]

how will I deploy this project cause having .json

[@souljabroable]

You failed to add this in global css which lead to a lot of confusion @tailwind base; @tailwind components; @tailwind utilities;

[@Devtamin]

Thank you for sharing

[@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

[@raffph]

thanks bro

[@Devtamin]

No problem

[@SnehaOhal-lh9cb]

Telwind css is not install 😢

[@Jishanthegodev]

Thanks

[@Devtamin]

Welcome

[@ZeshanMukhtar1]

love from Pakistan

[@rafiamalik993]

Thanks

[@Devtamin]

You're welcome

[@bimaltwayana2058]

didn't work for me. put tutorial for typescript also please.

[@Devtamin]

here is the tutorial for typescript, kzbin.info/www/bejne/q5qknpd4nNNoqdE

[@Marshal-786]

thanx buddy

[@abedalraoufzeidan1461]

Thank you

[@Devtamin]

You're welcome

[@MrMe-xs9gq]

thanks man

[@rafiamalik993]

❤

[@Devtamin]

Thank you

[@ovna]

ty

[@Devtamin]

Thank you for a comment

[@sebastianriquelme1]

Crack!

[@Adityasharma-ii3dg]

thanks

[@Devtamin]

No problem

[@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

[@arambp77]

I fucking love you dude

[@Devtamin]

Glad it was helpful!

[@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";

[@brucebanner1915]

npx tailwindcss@3.4.17 init --full

[@Devtamin]

thank you for sharing

[@theallrounder-uttkarshkesh679]

if you see error like this : - plugins: [require("tailwindcss-animate")] , then you only need to rename the "tailwind.config.js" file to "tailwind.config.cjs"

[@Devtamin]

Thank you for sharing

[@durgfestivalvibes]

Are u on twitter bro? Would follow u there