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!
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.
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!
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 😂
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 !
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.
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 ?
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?
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
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> "
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.
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
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 ?
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
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 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.
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
hi all if u get style not working after follow this tutorial just import u'r global css bruh import "./style/global.css";
Thank you for sharing
Thanks bro after reading this comment i restored my folder from recycle bin and it worked
Thanks
@@Devtamin npx shadcn-ui@latest init sir its not working,, help me please
@@Electro_69xd
This man exactly uploads what I need, he finds the gap that no one tells and makes great tutorials. Thanks man!
Happy to help!
yes this is the place even i got stuck.
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!
You're welcome
i spend 30 min to config shadcn this guy done very rapidly good video
Happy to help
fr he made it too simple
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.
Thank you for sharing
you are a live saver for React developer 😎✅⚡
You're welcome
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!
You're welcome
Thank You Brother Nice Explanation
🤝
I usually don't comment on videos but this video helped me a lot. Thanks
Glad to hear it
Thank you Man for helping my projects❤❤
No problem 😊
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 😂
I'll be taking on a hackathon match these coming weeks and this is exactly what am looking forrrr, thank youuuuu!!!
I highly recommend using Typescript with Shadcn/ui rather than Javascript because Typescript is officially supported
thank you brother
love and respect from India
Glad it helped!
Couldn't find video for using vite react shadcn ui and in suggested videos got your video!!
Thanks man!!! 🫶 🙏
Subscribed!!
Thanks for the sub!
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 !
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.
It was literally useful for us, Thank you so much.
hoping for some long tutorials and auth for react and continue with backend api
More to come!
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.
Glad you like it
Thank you for your help. I have been stuck on the jsconfig.json file for a while.
Glad I could help
Very helpful, thank you!
Glad it was helpful!
Great!! This was what I needed. Another question: Have you made a video on how to use next-ui with Vite+React and JavaScript?
Not yet! I will do. Thank you for the question. It is a great idea
ua-cam.com/video/7zNmLhWerng/v-deo.html
@@Devtamin Thanks for this one too.
¡Excelente, justo lo que necesitaba! gracias
You're welcome
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
Thank you, I will
Thank you so much, great tutorial.
You're very welcome!
if u have a troubble on a shadcn cli step, configure tailwindcss with the official doc...
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 ?
This means i can use alias in js ??
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?
You're a life saver bro... what about Aceternity UI for React JS😁
Coming
Thankyou so much I was struggling to setup shadcn
You're welcome
Excellent video! To he point and with a very clear instruction!
Well done 💪
I don't use tailwind css class.Can you help me?
can you explain more about it ?
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
thankyou brother very helpful for me
Always welcome
Can you make a video of installing shadcn with cra and no typescript? I’m working on a codebase that has those
Sorry, I don't recommend using create-react-app anymore
Really helpful video, keep it up👍🏻
Thank you for a comment
thank you so much.. nice explanation
You are most welcome
Thanks bro for clearing my dobuts
Always welcome
Ty - i tried to figure this out for.....wayyyyy too long and was unable to get the imports correct (or something idk wow)
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>
"
Hi Devtamin, what keyboard do you use?
Dell
@@Devtamin can you pls tell me the model as well 😅 Thank you
thankyou!
Finally I was able to set up project with this video.
bro but there is two tsconfig files how to in the shadcn docs how to tackle that ?
@@owaisali7063 in mine I was not getting two TS config
saved my lots of time. Thank you so much
You're welcome
following just for this tutorial
Thank you so much
thanke you for this video, you saved me so much time, you got new subscriber
hi, can you show how to install tailwind css in nextjs app router with typescript and vite. thank you!
I put it on my list
every good my friend!
Thank you! Cheers!
Thanks a lot bro
Always welcome. Thank you for a comment
@@Devtamin 😌
THANK YOU SO MUCH
hii, what vs code theme you are using?
I use Mater Icon Theme
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.
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
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 ?
react/vite
Same error, do you get solution?
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
I'll check it out
how will I deploy this project cause having .json
This is amazing for this video, thanks
You're very welcome!
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"
Thank you for sharing
it's working but i guess mine's broken it's half way there.. i think the css is not applied properly
let's share a solution if you figure it out
just import u'r global css bruh import "./style/global.css";
your the best
Thank you for a comment
Thanks a lot man😊 , you save my day.
Happy to help
hey, I am not using vite. will this still work ? I dont have a vite config file
Nope
@@Devtamin yeah.. i had to do manual install
most components use typescript though?
You're right. Most people ask me to do it video.
thank you bro
You're welcome!
ty so much bro!
Happy to help
Thanks ao so much for yhis tutorial!! ❤❤❤
Good Info
Thanks brother. But, somehow my tailwindcss is not working after installing shadcn
What happened?
@@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.
just import u'r global css bruh import "./style/global.css";
@@wakandagaming5763 where do I input that?
@@arochacarlstephen import your css file bro import from "your css Path"
I have a problem with a dialog in extensions, it can't open
what is the dialog?
if i using react without vite i need to following the same steps for vite ?
Nope
You failed to add this in global css which lead to a lot of confusion
@tailwind base;
@tailwind components;
@tailwind utilities;
Thank you for sharing
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
yes your way helps a lot keep it up
🤑
thank you
Thanks
Welcome
thanks bro
No problem
thanks a lot 🙏
Most welcome!
very useful
Thank You!!!
You're welcome
Thanks
You're welcome
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
same error did u get a solution for this?
hey i found the solution
1 run this npm install shadcn-ui@latest
2 run this npx shadcn-ui@latest init
Thank you
You're welcome
ty
Thank you for a comment
love from Pakistan
❤
Thank you
thanx buddy
I fucking love you dude
Glad it was helpful!
thanks man
Crack!
Are u on twitter bro?
Would follow u there
thanks bro
Welcome
Thanks a lot
Most welcome
Thanks