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!
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!
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.
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 😂
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
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.
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?
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 ?
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.
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> "
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
@@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
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"
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
you are a live saver for React developer 😎✅⚡
You're welcome
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
I usually don't comment on videos but this video helped me a lot. Thanks
Glad to hear it
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 Man for helping my projects❤❤
No problem 😊
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
🤝
Couldn't find video for using vite react shadcn ui and in suggested videos got your video!!
Thanks man!!! 🫶 🙏
Subscribed!!
Thanks for the sub!
thank you brother
love and respect from India
Glad it helped!
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
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!
¡Excelente, justo lo que necesitaba! gracias
You're welcome
Excellent video! To he point and with a very clear instruction!
Well done 💪
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 😂
Very helpful, thank you!
Glad it was helpful!
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
Really helpful video, keep it up👍🏻
Thank you for a comment
Thank you so much, great tutorial.
You're very welcome!
This is amazing for this video, thanks
You're very welcome!
Thankyou so much I was struggling to setup shadcn
You're welcome
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
Thanks a lot man😊 , you save my day.
Happy to help
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.
Thanks bro for clearing my dobuts
Always welcome
thankyou brother very helpful for me
Always welcome
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
ruclips.net/video/7zNmLhWerng/видео.html
@@Devtamin Thanks for this one too.
Thank you for your help. I have been stuck on the jsconfig.json file for a while.
Glad I could help
saved my lots of time. Thank you so much
You're welcome
every good my friend!
Thank you! Cheers!
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.. nice explanation
You are most welcome
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?
THANK YOU SO MUCH
thanke you for this video, you saved me so much time, you got new subscriber
yes your way helps a lot keep it up
🤑
thank you
You're a life saver bro... what about Aceternity UI for React JS😁
Coming
Thanks ao so much for yhis tutorial!! ❤❤❤
your the best
Thank you for a comment
This means i can use alias in js ??
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 ?
Thanks a lot bro
Always welcome. Thank you for a comment
@@Devtamin 😌
I don't use tailwind css class.Can you help me?
can you explain more about it ?
following just for this tutorial
Thank you so much
ty so much bro!
Happy to help
Hi Devtamin, what keyboard do you use?
Dell
@@Devtamin can you pls tell me the model as well 😅 Thank you
how will I deploy this project cause having .json
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.
thank you bro
You're welcome!
thanks a lot 🙏
Most welcome!
if u have a troubble on a shadcn cli step, configure tailwindcss with the official doc...
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>
"
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
2:14 if u getting error use "npm install"
Thank You!!!
You're welcome
hii, what vs code theme you are using?
I use Mater Icon Theme
Some changes need to be made to work now but still a good tutorial
Can you share the changes?
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
Ty - i tried to figure this out for.....wayyyyy too long and was unable to get the imports correct (or something idk wow)
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?
most components use typescript though?
You're right. Most people ask me to do it video.
Good Info
if i using react without vite i need to following the same steps for vite ?
Nope
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
very useful
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";
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
thanks bro
No problem
I have a problem with a dialog in extensions, it can't open
what is the dialog?
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
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
Thanks
Welcome
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
Thanks
You're welcome
thanx buddy
Thank you
You're welcome
love from Pakistan
❤
Thank you
thanks man
Crack!
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"
ty
Thank you for a comment
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
I fucking love you dude
Glad it was helpful!
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
Are u on twitter bro?
Would follow u there
thanks bro
Welcome
Thanks a lot
Most welcome
Thanks