In 2007, I built an entire dating site, with login, private messaging, public messaging, all from scratch, in php / mysql. The woman I built it for ran it for years. At that point, I changed fields and worked on cars. 17 years later, I'm trying to get up to speed with developing, and I am more than overwhelmed. I can't believe how much has changed. I cannot follow this video even a little bit. I don't understand what all the command line stuff is about, I don;t understand where all the code is getting pulled in from, I don't understand any of the terms. It's pretty crazy. I'm trying to figure out where to start from. It seems that the actual language itself is such a small part of development, and it's much more about the tools. Anyways, just a random observation.
Fun fact, you can probably still fire up something similar to your original dating site and still have a viable functioning solution. We are indeed in the age of over-engineering
What I think is most underappreciated about remix is that you can do everything you can in next AND have the ability to use different backend options that are configured for the remix router. I went with express and was able to just copy and paste a bunch of my API when rewriting an older project into react.
@@codeSTACKr hey, I use react+vite but not typescript, can you make a Short explaining the installation for non typescript vite react project? I use tailwind css of course, but not typescript (haven't learnt it yet, it's overheating to a beginner like me) Also if possible, can you please tell me why my basic vite react app lags so much and gets stuck in infinite loops even though there's no loops in my code, like an extension to check what the code is actually doing
I have seen almost all tutorials on youtube with shadcn UI only showing how to setup and start using them, no one shows how to change them to a personal design system, i think that would be the best way of showing shadcn UI by translating a figma design system of maybe a simple dashboard or a simple website. nobody would use shadcn ui with its default style and default css variables in real world projects.
41:10 i don't think you need to label the layout of the entire application with 'use client' ?? i mean you imported themeprovider which is a client component . you don't have to make whatever component you imported it in a client component also ! somebody explains to me please.
30:06 If I'm understanding this correctly, Radix UI is shadcn's dependency. So I guess by saying "there are no dependencies for shadcn" you meant your codebase doesn't depend on a shadcn package. But that's not how that sounds.
According to Shadcn documentation, It says we don't need to install shadcn in our project Instead we can generate components so only those components will endup in our code base what it uses behind the scenes is tailwindcss & Radix UI, that too as a dev depedency (we don't need these packages installed on production server) because in the end, tailwindcss only generates a optimized css file. so I believe that's what he means by no dependency. No files related to shadcn in our node_modules folder.
@@adarshchakraborty955 I think I understand, but that's confusing the word. Dependencies are a term broader than what's in your folder. You don't reduce dependencies by pasting code in. You just make them harder to maintain. I would understand if one said shadcdn _components_ not having any dependencies if they were generated in a way that they didn't have any (even dev) dependencies. But from what you're writing that doesn't even seem to be the case (which I'm not saying is a bad thing it's just... it's not an independent thing).
beginner question when you're building the site in the later half of the video and you're pasting in buttons and routes and things, are you getting this from the Shad site or something or is it just pre-written? I'm just typing it out as I go along but was curious
I have an error when trying some other more complex components e.g.: "DialogTrigger must be used within Dialog", and my nesting is correct, I'm using the astro setup, any ideas?
Hi there. Why the name of the component's files inside /components/ui aren't in UpperCamelCase format ? you did for Header.tsx but not form ui/container.tsx.
Don't fall for the hype, it's cool but not mature enough (v0.8). No RTL support, lacks many utility tools thta something like MUI offers, more minor problems (example, some of items that are acting like a button, don't have the cursor pointer). Great Library but I'll give it another try a year later.
yes of course, "it's not a UI library" but literally imports radix-ui for like every component and does literally almost nothing different than you importing it yourself other than applying some tailwind on it "Discover the power of shadcn/ui, a collection of reusable React components that revolutionize CSS styling in this comprehensive tutorial. Learn how to build an amazing UI in just minutes, without the need for a traditional component library." this description of it is just dishonest and a lie I get that it's youtube world and getting clicks with the ongoing popular topic, but lets not lie about it
@@kevs3654 it is written at the start of the introduction how it's built using Radix and that it's not a library. I am not shtting on shadcn, but the fact that the person in this video conveys how it's "revolutionary" than the libraries and how you don't need one. While shadcn literally uses a library for primitives and adds styles and other styling func on top of it. It's simple tailwindcss with global css variables + variant props to expand primitives and create styled components, this is like the most basic styling component someone would write expanding logic components. It's not even the simplest to use, this is the most modifiable approach. Look how easy Radix themes is to use, but try to add your own component to it, it won't work. The fact that you failed to comprehend my comment, thinking that I am shtting on shadcn, just explains your lack of comprehension skills. There's nothing wrong using shadcn, it's simple to copy paste examples/templates and then changing them. Shadcn tells you, "this is how I create styled components on top of radix, I useRef them and add some variants, classNames and use global css vars to align a theme, copy paste my method". It's a dev's ui compnent folder. It's not revolutionary, it's not a replacement for libraries, because it uses one itself. And everyone likes it, cuz everyone likes to copy paste code and change it, rather than think of steps one by one which also take time. next time ask chatgpt to explain it to you, maybe it will give you an angle for you to understand
It's just a trend, a stupid one, because you are copying code into your code base which then you are responsible to maintain. It's only good as a start to build your own component library.
Shame ! You said using Shadcn on Next js, but you use most the hand written css codes to create a simple header. Insult to Shadcn. Quiting this video in the middle !!
🦸 Become A VS Code SuperHero Today: vsCodeHero.com
🧑🏾🤝🧑🏽 Join my Discord developer community: discord.gg/A9CnsVzzkZ
Shadcn has confused me for a long time. I'm using it for the first time now. Thanks for the video!
It’s really amazing!
In 2007, I built an entire dating site, with login, private messaging, public messaging, all from scratch, in php / mysql. The woman I built it for ran it for years. At that point, I changed fields and worked on cars. 17 years later, I'm trying to get up to speed with developing, and I am more than overwhelmed. I can't believe how much has changed. I cannot follow this video even a little bit. I don't understand what all the command line stuff is about, I don;t understand where all the code is getting pulled in from, I don't understand any of the terms. It's pretty crazy. I'm trying to figure out where to start from. It seems that the actual language itself is such a small part of development, and it's much more about the tools. Anyways, just a random observation.
Fun fact, you can probably still fire up something similar to your original dating site and still have a viable functioning solution. We are indeed in the age of over-engineering
Cool. Thanks for including remix, the not-next, or next-before-next.
What I think is most underappreciated about remix is that you can do everything you can in next AND have the ability to use different backend options that are configured for the remix router. I went with express and was able to just copy and paste a bunch of my API when rewriting an older project into react.
lol what is all that accordingly?
This video is helpful because you show the installation for several framework. Thanku Brayn.
You're welcome!
@@codeSTACKr hey, I use react+vite but not typescript, can you make a Short explaining the installation for non typescript vite react project?
I use tailwind css of course, but not typescript (haven't learnt it yet, it's overheating to a beginner like me)
Also if possible, can you please tell me why my basic vite react app lags so much and gets stuck in infinite loops even though there's no loops in my code, like an extension to check what the code is actually doing
I have seen almost all tutorials on youtube with shadcn UI only showing how to setup and start using them, no one shows how to change them to a personal design system, i think that would be the best way of showing shadcn UI by translating a figma design system of maybe a simple dashboard or a simple website. nobody would use shadcn ui with its default style and default css variables in real world projects.
I was using Antd for my project but switching to shadcn has made customization so much easier! Thank you
Thank you so much for this comprehensive tutorial
41:10 i don't think you need to label the layout of the entire application with 'use client' ?? i mean you imported themeprovider which is a client component . you don't have to make whatever component you imported it in a client component also ! somebody explains to me please.
Love you so much for your very good explanation, thanks from India
I would love a deep dive into Shadcn-ui, how to change color on components (primary, secondary…), just how to customize the whole project please
its in @/components, it uses tailwind so if you know tailwind, you can modify it very easily
Long time watching my man, missed your videos!
Thank you! Hoping to be more consistent again.
@@codeSTACKr yes man you got this, I missed your content, been on here for a while, I like a few old jade masters here!
Yesterday I was able to make ChadCn UI working on Angular 😎
It looks good doesn't it
Yuup
You are really good at this researching stuff !!!.....
Hey, thanks for your video, but adding 'use client' to layout break down nextjs, so for me it does not work
30:06 If I'm understanding this correctly, Radix UI is shadcn's dependency. So I guess by saying "there are no dependencies for shadcn" you meant your codebase doesn't depend on a shadcn package. But that's not how that sounds.
According to Shadcn documentation, It says we don't need to install shadcn in our project
Instead we can generate components so only those components will endup in our code base
what it uses behind the scenes is tailwindcss & Radix UI, that too as a dev depedency (we don't need these packages installed on production server)
because in the end, tailwindcss only generates a optimized css file. so I believe that's what he means by no dependency.
No files related to shadcn in our node_modules folder.
@@adarshchakraborty955 I think I understand, but that's confusing the word. Dependencies are a term broader than what's in your folder. You don't reduce dependencies by pasting code in. You just make them harder to maintain.
I would understand if one said shadcdn _components_ not having any dependencies if they were generated in a way that they didn't have any (even dev) dependencies. But from what you're writing that doesn't even seem to be the case (which I'm not saying is a bad thing it's just... it's not an independent thing).
You´re the best man!! thx so much
Wow, nice intro to shadcn
beginner question when you're building the site in the later half of the video and you're pasting in buttons and routes and things, are you getting this from the Shad site or something or is it just pre-written? I'm just typing it out as I go along but was curious
Those are coming from the shadcn components that got copied to our project when running the shadcn add command.
Which vscode theme are u using
codeSTACKr theme of course :D
Why creating nav menu when Shadcn provides a "Navigation Menu" component?
How to use Navigation-Menu?
What about support for SSR ? Since all these components have "use client" directive, there is no SSR advantage?
Thank You @codeStackr & Antonio! MVP design is easier to build thanks to you guys and your hard work!
hey man you probably get this question a lot but how did you make this smooth animation on type in your vscode ? Thanks
Hey! It’s just cursor settings in vs code.
not to much related to shadcn but should we use "moduleResolution": "Node" in this Next.js invironment?
Amazing video!
35:18 shouldn't the key prop be in the Button component instead of Link?
in this case no, because the button is set as asChild, in this case the button is not rendered, that's why the key prop in the link.
How did you avoid the error you get when exporting metadata in a component (layout) with “use client” in it!?!
yes indeed you cannot export metadata with "use client". I just removed the metadata export but I guess it's not the solution. Did you find ?
What if I have a project already built halfway and I used vite javascript swc . can i still use shadcn?
Amazing looking UI… Is literally just a grid with cell borders and and an image and text in each one lol
It's not shadcDn, it's shadcn
Who cares
It’s shat
Holy shad
😂 no it’s not
Is there a way to keep the header visible while scrolling?
I have an error when trying some other more complex components e.g.: "DialogTrigger must be used within Dialog", and my nesting is correct, I'm using the astro setup, any ideas?
bruh did you put a low volume background music? I was so confused what is playing that music.
can you use this with nextjs but without typescript? (with javascript)
How's shadcn different from what people used boostrap for?
The only difference is everything.
which microphone do you use?
Rode NTG-5
excellent sound
@@markokraljevic1590 thank you!
Video sound is low.
Though thanks for this video
is there a reason for not ctrl+c in terminal to stop the server?
no reason, its just user prefrence
I was using this library with vue.js for two month, now I know it's only for react
Hi, if i don't want to use tailwind can i use shadecn? all the examples depend on tailwind
It does only work with tailwind
it's shadcn btw, not shad cdn
Yep! I say it correctly about 50% of the time 💀💀💀
Thanks for correcting me also. I always say it cdn☠️☠️
wish there was a sidebar(side menu) component in shad/cn ui lib, can anyone provide me that, I am actually new to frontend. thanks in advance
this can be added also for nuxt?
What font is that operator mono?
Actually my own custom font based on Fira Code. You can check it out in my vs code course 😁
What font are you using
Hi there. Why the name of the component's files inside /components/ui aren't in UpperCamelCase format ? you did for Header.tsx but not form ui/container.tsx.
Github repo link missing
Sorry about that. I just added it to the video description and I'll put it here too: github.com/codeSTACKr/shadcn-nextjs
Thank
What is your vscode theme?
Don't you think ,its wasted time just to make a button, It's very fast and can be done within 10sec to do this button with regular
i like building stuff from scratch and i really don't like to use shadcn. Its my personal opinion.
you kept calling it shadCDN but its CN
Can we use this in Angular as well?
my vs code doesnt find button from components had to do manual import 🖕🏽
Hi Jesse, how do I getva hold of you. I need help with my artwork for nft's
its missing stitches
Missing SvelteKit
Sveltekit isn't officially supported but there is a fork for it. Maybe I'll make I video for it 😁
EVERYONE!
If only shadcn didn't have tailwind dependency....
Don't fall for the hype, it's cool but not mature enough (v0.8).
No RTL support, lacks many utility tools thta something like MUI offers, more minor problems (example, some of items that are acting like a button, don't have the cursor pointer).
Great Library but I'll give it another try a year later.
It's not working. I have a css import error:
Cannot find module '@/styles/globals.css' imported from '//src/pages/index.astro'
tailwing is so confusing
yes of course, "it's not a UI library" but literally imports radix-ui for like every component and does literally almost nothing different than you importing it yourself other than applying some tailwind on it
"Discover the power of shadcn/ui, a collection of reusable React components that revolutionize CSS styling in this comprehensive tutorial. Learn how to build an amazing UI in just minutes, without the need for a traditional component library." this description of it is just dishonest and a lie
I get that it's youtube world and getting clicks with the ongoing popular topic, but lets not lie about it
Relax dude, you seem kinda tense
I think radix-ui is also mention on the on the documentation of ShadCN?
Relax boy, you'll aged early and die with that attitude xD
@@kevs3654 it is written at the start of the introduction how it's built using Radix and that it's not a library. I am not shtting on shadcn, but the fact that the person in this video conveys how it's "revolutionary" than the libraries and how you don't need one. While shadcn literally uses a library for primitives and adds styles and other styling func on top of it. It's simple tailwindcss with global css variables + variant props to expand primitives and create styled components, this is like the most basic styling component someone would write expanding logic components. It's not even the simplest to use, this is the most modifiable approach. Look how easy Radix themes is to use, but try to add your own component to it, it won't work.
The fact that you failed to comprehend my comment, thinking that I am shtting on shadcn, just explains your lack of comprehension skills. There's nothing wrong using shadcn, it's simple to copy paste examples/templates and then changing them.
Shadcn tells you, "this is how I create styled components on top of radix, I useRef them and add some variants, classNames and use global css vars to align a theme, copy paste my method". It's a dev's ui compnent folder. It's not revolutionary, it's not a replacement for libraries, because it uses one itself. And everyone likes it, cuz everyone likes to copy paste code and change it, rather than think of steps one by one which also take time.
next time ask chatgpt to explain it to you, maybe it will give you an angle for you to understand
ChatGPT doing its best!
Hes completely right
Who came from his reddit
vite is not a react framework xD
"yet another UI framework"?
ShadCDN 🤣
yet another UI component 🤭
I’m not using, cheers!
Dude please stop copying and pasting. This is super distracting for the person who is trying to learn.
one could pause the video when its too fast - learning dude.
@@guruware8612 He skipped too many parts
Add editor.smoothCaretAnimation: true to your vscode config :D
Lacks basic animation
It's just a trend, a stupid one, because you are copying code into your code base which then you are responsible to maintain. It's only good as a start to build your own component library.
Shame !
You said using Shadcn on Next js, but you use most the hand written css codes to create a simple header.
Insult to Shadcn.
Quiting this video in the middle !!
I stopped watching after a minute. Can't take a UI video seriously from a guy with such horrible over customised and mismatching VS Code...
PrimeReact is better than shadcn
Im not using it.
looks like a copy of tailwind components