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/docs
★★★ Follow Me ★★★
Facebook Fanpage: / devtamin
KZbin: / devtamin
Medium: / devtamin
My website: www.devtamin.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

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

[@tejasnasre3074]

Thank You Brother Nice Explanation

[@Devtamin]

🤝

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

[@elmenikmati]

¡Excelente, justo lo que necesitaba! gracias

[@Devtamin]

You're welcome

[@Paradox_1]

you are a live saver for React developer 😎✅⚡

[@Devtamin]

You're welcome

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

[@carlosdelac]

Very helpful, thank you!

[@Devtamin]

Glad it was helpful!

[@jacksine-uh8bt]

Thank you Man for helping my projects❤❤

[@Devtamin]

No problem 😊

[@MOHAMED-AMINE-CHEKROUNI]

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

[@sanchit0160]

thank you brother love and respect from India

[@Devtamin]

Glad it helped!

[@adarsh-chakraborty]

THANK YOU SO MUCH

[@user-zp5ev7qt4h]

thank you so much.. nice explanation

[@Devtamin]

You are most welcome

[@cy4381]

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

[@Devtamin]

Glad to hear it

[@UXDlozi]

Thank you so much, great tutorial.

[@Devtamin]

You're very welcome!

[@eduardomatheussilvadasneve6980]

every good my friend!

[@Devtamin]

Thank you! Cheers!

[@vladimirfilipovic5845]

Thanks

[@german4539]

ty so much bro!

[@Devtamin]

Happy to help

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

[@chamalsena]

thank you bro

[@Devtamin]

You're 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?

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

[@Solohd12]

This means i can use alias in js ??

[@GokulHans]

Thanks a lot bro

[@Devtamin]

Always welcome. Thank you for a comment

[@GokulHans]

@@Devtamin 😌

[@nekokaitogamer]

Thanks a lot

[@Devtamin]

Most welcome

[@user-ye6nj7vr1i]

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

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

[@user-my7nr1ez2c]

your the best

[@Devtamin]

Thank you for a comment

[@quoclam7140]

following just for this tutorial

[@Devtamin]

Thank you so much

[@_itshenry]

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

[@Devtamin]

Coming

[@ovna]

ty

[@Devtamin]

Thank you for a comment

[@raffph]

thanks bro

[@Devtamin]

No problem

[@sebastianriquelme1]

Crack!

[@komauk4368]

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

[@Devtamin]

can you explain more about it ?

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

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

[@salehdz3399]

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

[@Devtamin]

Nope

[@vinitjain7]

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

[@Devtamin]

Nope

[@vinitjain7]

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

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

[@adityashrestha2774]

most components use typescript though?

[@Devtamin]

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

[@hungvuong48]

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

[@Devtamin]

what is the dialog?

[@arambp77]

I fucking love you dude

[@Devtamin]

Glad it was helpful!

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

[@user-cf1oj8my3p]

@@wakandagaming5763 where do I input that?

[@wakandagaming5763]

@@user-cf1oj8my3p import your css file bro import from "your css Path"

[@durgfestivalvibes]

Are u on twitter bro? Would follow u there

[@Yesterday_i_ate_rat]

Thanks

[@Devtamin]

Welcome