@@PrinceDalsaniyaYT Whole website? I would love to see a whole GUI Builder built with it. Why do you have such low expectations? Demand more! If it's so awesome, why don't they develop a GUI Builder with it so no one has to write code for it anymore? All Good Quality UI Libraries prove themselves by building a GUI Builder that obsoletes its own UI Library - such that no one needs to code it anymore and everyone can drag-and-drop elements on a canvas and configure them through a GUI. So where is the awesomeness?
Hey bro, I already knew shadcn-ui, I thought it was great, but I wanted to give you a tip, in the image instead of using the Skeleton component, you could use the "placeholder" property of the Image component of NextJS which is also a skeleton but simulates a blur in the image that will be loaded, I find this effect much more interesting in the case of the image specifically speaking.
Yeah placeholder is nice. The only time I wouldn't use it is for logos because it doesn't work with png files but it works great with the standard file types.
A good way to test those loading animations, in the network tab, select a slower connection to artificially throttle connection. That and disabling cache usually is easier than doing it in the code.
10:27 I think you could have made responsiveness better by just doing grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 on the main container instead of doing span on the child. Performance wise, this is better as well since it will only look at a single div for the breakpoints.
You can replace all the grid media queries by using minmax(200px, 1fr) where it will take up 200px at larger sizes, when possible, and then it will take up to 1fr when not possible. instead of sm md lg xl
Hey @developedbyed , I see you struggled a bit with creating boilerplate code for a new react component at 13:05. With the VsCode extension, you can generate different types of react component boilerplates with short-hands like rfce for a react functional component with the export statement at the end.
Stop! Learn how to build UI by dragging and dropping. Do not write code where it is not needed. UI code is never needed. 20 years ago everyone was dragging and dropping their UIs, no one was writing code for it! Learn the history of your field and stop being fooled!
@@yakob-g do you really not know? summary: google "graphical user interface builder". They were invented in 1987. Industry doesn't use Webflow, Framer, Plasmic, because they're big-player fad-followers and want to copy what Facebook is doing so they use React as a way to keep the backend programmer busy with front-end FORMATTING work that is not programming, but they sugar it with programming, call it React, and programming-history-ignorant programmers eat it up, and make our industry the poorer for it. As a programmer you are an expert! A specialist! Don't do the job of artists! Demand artist do the front-end. They can do it with Webflow, Framer, Plasmic, etc. The industry needs to grow up and stop following fads. Capitalism is about competition, not copying your competitors. Everyone knows how to make another Coca-Cola but the value is in the name, hence why Pepsi will forever be second place. The programming industry thinks they can get ahead by "also doing React like everybody else!" because they don't think like adults. And they have the gall to tell you their React thingy is good enough to design your website but not good enough for them to design a GUI builder for you! And programmers accept that!
@@yakob-g I had written a much better reply but youtube deleted it so you'll have to be happy with that one above. Ask any questions if anything is not clear. But please start thinking more critically, how did you not notice front-end was the job of ARTISTS and not programmers? Was the fact that HTML is a FORMATTING and not a PROGRAMMING language not a clue?
I’ve never had a problem with tailwind like I have with the others. It’s just intuitive and you can easily do breakpoints which is nice. That looks really nice, problems I have had with material ui and others are that they are pre styled. I’d rather have someone make a component with all the functionality and none of the styles so I can just call the props I want to edit to style.
Did you have a look at the mentioned radix UI? Or MUI unstyled components? Or React Aria? I think at least one of these libraries should fulfill your needs
@@Rulito2405 I’ve looked into them before, they work well. I haven’t done a full project aria or radix yet but I’ll see if I can practice with it. Thanks for the tips haha
Thanks very much for your illuminating videos! And yes, please create a video demonstrating the shadcn more in depth to create a somewhat fully functional webapp.
Please don't fall for this guy's scam. Front-end needs no code. Look at development 20 years ago. All UI was dragged and dropped. Stop lying to beginners that UI needs code. UI is a drag and drop job, always has been, and we're currently stuck in a "full stack fad" that is fooling backend developers into having to "code the frontend" which is something that never existed.
Why does loading.tsx component appear at runtime even though it is not referenced in page.tsx? Is it possible that the Loading function is implicitly referenced?
I may be an alien, and everyday when I check the newest dev trend big hit I certainly become more aware of my total detachment to current trends. Take the following with all due respect, but the amount of work that's required to have that animation, feels absolutely overwhelming to me: someone who is used to just toggle classes that may have the css animation defined on them. Toggling clssses will save you repeating (and maintaining) the same markup twice, which it alone is already enough for me to not use this procedure. But also a lot of time and you gain reusability in any other component on your app. I consider I may be missing something so I'll be completely thankful to those who could point it out.
Cool, but it would be even cooler if it were framework agnostic. I think in 5 years a lot of these framework-centric component systems will fall less favorable as web components mature and is treated first-class. Just a tip for beginners, think twice about adopting some of these lesser known frameworks as they often turn into technical debts faster, and keep your eyes open for headless/styleless accessible framework-agnostic components... they are the future.
I'm an aspiring dev and it's really calming to hear that. It gets so hard trying to keep up with all these libraries. Do you think it's a good idea to focus on doing most things with regular old css/scss or are libraries essential (as a beginner)?
@@crazyondaime If you are applying to webdev/frontend job then you should learn about React and/or Angular. I started in the mid 2000's so I was lucky to "grow" with basic css/less/scss, html, js/jquery, and php before the all the framework soup. I just dislike that many new libs these days are built only for React when we have LitElement and Stencil to build framework-agnostic components - the same type of thing happened with libs in the early 2010's with things being built with jQuery and now it's just dead weight and overhead. Anyway, there's pros and cons to learning a framework, mostly for employability and ability to work as a team. But the closer you are to basic technology the easier it is for you to pivot away should the tech die out. The more entrenched into doing things "framework x"'s way, the harder it is to detangle yourself. That's why
This guy is clueless, he is trying to convince you to code something that 20 years ago everybody was dragging and dropping. Don't fall for this scam. Front-end needs NO CODE.
First time watching your channel; as a beginner I really appreciate you over-explaining / showing all the steps. Kee n to watch your other vids now. Thanks!!
I've been using HeadlessUI for a long time so this looks promising. Hopefully someone will port it to Vue and Angular if there is no official libraries for those frameworks.
@@gm42069 Do you really think it's easier to migrate entire production codebases to React than it is making a framework agnostic primitive library ? It's not. Besides we have our reasons to not work with React. Angular offers better development experience in collaborative workflows and Vue has symbiotic batteries-included philosophy which means we don't have to tape together a bunch of 3rd party libraries with different API designs and patterns with breaking changes for every upgrade. Regardless of motivations, even if we were open to make the switch it would be a challenge to port everything over and we'd be wasting 7 figures on this project all whilst pausing the development of our applications in production.
Hi, I follow code along but, when add new Promise resolve. It won't show same effect. It's load entire page instead of component only. Did I miss something?
is it possible to have the page statically rendered at build time and regenerated with nextjs ? I don't like that it has to wait for the result every time.
Hey Ed, quick question, why are we able to see a loading screen when we are supposedly getting all the HTML populated back from the server because we are using a React Server Component? I don't get that yet. Why we have a delay between the API request and the rendered page?
got some questions : 1)is that Array.from any new syntax , cus i have never seen it before. 2)Can we use it with Vite ? Would it show any depreciation of some sort ? thank you.
I've used DaisyUI for doing the same purpose and it works wonderfully. The option to create themes and change whole website with a single theme makes it quite pleasant experience.
i want to know one thing, right now i am using styled-component/native for making my component library in react native app, but i am facing performance lag as we are making trading platform. what should be the ideal css framework for making component lib for react native app?
The problem with this library's CLI, is not remembering the last place it's saved in. And it's annoying if you have another path than "./components/ui"
I couldn't figure out how to set up this library with React. Tried to manually install, but it doesn't seem to work. And with Radix and Shadcn both, I cannot digest that we need to install each component before using it. Does it make sense ??
Hello, i tried using CLI because i need the jsx version of components (only obtainable with CLI) and i dont want to use typescript, but i found that my CLI installation did not include cn function and everyrhing is failing. Should i install CLI and just add the missing function manually? Also, there is a step in tailwind that requires you to convert an input css into an output. I did not understand why that is needed, i just want to use my main css file normally, not the output css file generated by tailwind installation. Is that really required? Thanks for the video
I'm doing my side project with shadcnui right now. It's pretty great, but one thing I dislike is that if you want to change the defaults there's still a bunch of work to do. And I'm also not a huge fan of defining dark/light mode colours through css. I know that's how tailwind recommends it, but it's just not a great dev experience. Still kinda worth it for very little runtime cost and server-side support, but I don't think I'll stick with it for the next project if something nicer in terms of custom styling comes along.
You are the reason I've been so fascinated by CSS and JS till date. Another banger. Wanted to learn the skeleton loader for a very logn time! Got to know it in just 8 minutes! Love it 🔥
I like how at the start I thought shadcn was just a tailwind copy paste library, and now it is one of the most loved UI libraries out there.
I would love more detailed build with this Library. Amazing content.
totally agreed. Would love to see whole website build with this UI library.
@@PrinceDalsaniyaYT Whole website? I would love to see a whole GUI Builder built with it. Why do you have such low expectations? Demand more! If it's so awesome, why don't they develop a GUI Builder with it so no one has to write code for it anymore?
All Good Quality UI Libraries prove themselves by building a GUI Builder that obsoletes its own UI Library - such that no one needs to code it anymore and everyone can drag-and-drop elements on a canvas and configure them through a GUI.
So where is the awesomeness?
Me too. Would love to see more using Shadcn
+1 😊
Hey bro, I already knew shadcn-ui, I thought it was great, but I wanted to give you a tip, in the image instead of using the Skeleton component, you could use the "placeholder" property of the Image component of NextJS which is also a skeleton but simulates a blur in the image that will be loaded, I find this effect much more interesting in the case of the image specifically speaking.
Yeah placeholder is nice. The only time I wouldn't use it is for logos because it doesn't work with png files but it works great with the standard file types.
Shout out to shadcn for the amazing work ✨
A good way to test those loading animations, in the network tab, select a slower connection to artificially throttle connection.
That and disabling cache usually is easier than doing it in the code.
Thanks for this
Was hoping to see more focus on the library but most of the video was about setting up the project to display the single Skeleton component.
I've been following this library since shadcn's taxonomy example. They're really doing great stuff, a pillar in the dev community. In Shadcn we trust.
it's crazy that I watched it grow this quickly. I remember when he asked in twitter, "should I make a components library?" and we all agreed.
10:27 I think you could have made responsiveness better by just doing grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 on the main container instead of doing span on the child. Performance wise, this is better as well since it will only look at a single div for the breakpoints.
That looks awesome! I am gonna try it out on my project
I just discovered Shadcn few weeks ago and now i really enjoy work with this library ! Keep going
You can replace all the grid media queries by using minmax(200px, 1fr) where it will take up 200px at larger sizes, when possible, and then it will take up to 1fr when not possible. instead of sm md lg xl
Is that possible with Tailwind?
@@ontheruntonowhere Yes
@@dobroslav.radosavljevic with a custom class tho?
@@ontheruntonowhere I'm sure it can be done with Tailwind JIT
Hey @developedbyed , I see you struggled a bit with creating boilerplate code for a new react component at 13:05. With the VsCode extension, you can generate different types of react component boilerplates with short-hands like rfce for a react functional component with the export statement at the end.
what extension is this called? just the react native extension?
I would love a detailed tutorial and app build with this.
Stop! Learn how to build UI by dragging and dropping. Do not write code where it is not needed. UI code is never needed. 20 years ago everyone was dragging and dropping their UIs, no one was writing code for it! Learn the history of your field and stop being fooled!
@@jboss1073 what :D elaborate
@@yakob-g oh man I just wrote an entire reply but it got deleted
@@yakob-g do you really not know? summary: google "graphical user interface builder". They were invented in 1987. Industry doesn't use Webflow, Framer, Plasmic, because they're big-player fad-followers and want to copy what Facebook is doing so they use React as a way to keep the backend programmer busy with front-end FORMATTING work that is not programming, but they sugar it with programming, call it React, and programming-history-ignorant programmers eat it up, and make our industry the poorer for it. As a programmer you are an expert! A specialist! Don't do the job of artists! Demand artist do the front-end. They can do it with Webflow, Framer, Plasmic, etc. The industry needs to grow up and stop following fads. Capitalism is about competition, not copying your competitors. Everyone knows how to make another Coca-Cola but the value is in the name, hence why Pepsi will forever be second place. The programming industry thinks they can get ahead by "also doing React like everybody else!" because they don't think like adults. And they have the gall to tell you their React thingy is good enough to design your website but not good enough for them to design a GUI builder for you! And programmers accept that!
@@yakob-g I had written a much better reply but youtube deleted it so you'll have to be happy with that one above. Ask any questions if anything is not clear. But please start thinking more critically, how did you not notice front-end was the job of ARTISTS and not programmers? Was the fact that HTML is a FORMATTING and not a PROGRAMMING language not a clue?
Partry game: Drink a short for every time he says "ShadCDN" instead of "ShadCN" :D
Have fun with the hangover tomorrow
side note , shadcn/ui exclusivly for typescript. no norm js
I’ve never had a problem with tailwind like I have with the others. It’s just intuitive and you can easily do breakpoints which is nice.
That looks really nice, problems I have had with material ui and others are that they are pre styled. I’d rather have someone make a component with all the functionality and none of the styles so I can just call the props I want to edit to style.
Did you have a look at the mentioned radix UI? Or MUI unstyled components? Or React Aria? I think at least one of these libraries should fulfill your needs
@@Rulito2405 I’ve looked into them before, they work well. I haven’t done a full project aria or radix yet but I’ll see if I can practice with it. Thanks for the tips haha
We need a full course from scratch on this UI with one project 💯
Thanks very much for your illuminating videos! And yes, please create a video demonstrating the shadcn more in depth to create a somewhat fully functional webapp.
Please don't fall for this guy's scam. Front-end needs no code. Look at development 20 years ago. All UI was dragged and dropped. Stop lying to beginners that UI needs code. UI is a drag and drop job, always has been, and we're currently stuck in a "full stack fad" that is fooling backend developers into having to "code the frontend" which is something that never existed.
Why does loading.tsx component appear at runtime even though it is not referenced in page.tsx? Is it possible that the Loading function is implicitly referenced?
I’m gonna be stacked for the summer ,learning more libraries while creating projects with them >>>
Sounds like a good plan 😉
I may be an alien, and everyday when I check the newest dev trend big hit I certainly become more aware of my total detachment to current trends.
Take the following with all due respect, but the amount of work that's required to have that animation, feels absolutely overwhelming to me: someone who is used to just toggle classes that may have the css animation defined on them.
Toggling clssses will save you repeating (and maintaining) the same markup twice, which it alone is already enough for me to not use this procedure. But also a lot of time and you gain reusability in any other component on your app.
I consider I may be missing something so I'll be completely thankful to those who could point it out.
Cool, but it would be even cooler if it were framework agnostic. I think in 5 years a lot of these framework-centric component systems will fall less favorable as web components mature and is treated first-class. Just a tip for beginners, think twice about adopting some of these lesser known frameworks as they often turn into technical debts faster, and keep your eyes open for headless/styleless accessible framework-agnostic components... they are the future.
I'm an aspiring dev and it's really calming to hear that. It gets so hard trying to keep up with all these libraries. Do you think it's a good idea to focus on doing most things with regular old css/scss or are libraries essential (as a beginner)?
@@crazyondaime If you are applying to webdev/frontend job then you should learn about React and/or Angular. I started in the mid 2000's so I was lucky to "grow" with basic css/less/scss, html, js/jquery, and php before the all the framework soup.
I just dislike that many new libs these days are built only for React when we have LitElement and Stencil to build framework-agnostic components - the same type of thing happened with libs in the early 2010's with things being built with jQuery and now it's just dead weight and overhead.
Anyway, there's pros and cons to learning a framework, mostly for employability and ability to work as a team. But the closer you are to basic technology the easier it is for you to pivot away should the tech die out. The more entrenched into doing things "framework x"'s way, the harder it is to detangle yourself. That's why
This is exactly what I’ve been looking for thx.
I want that desktop wallpaper so bad!!! Where do you get them please?
Lesgooooooo for building a full app with it, i'm here for it !!
14:53 can be made shorter and easier to understand by doing it like this
{Array(12).fill(null).map((_, index) => (
))}
At 3:27 you mention about having Tailwind as well, and all the configuration gets added. What do you mean? do these work together? Thanks for the vid
is there any other tailwind based ui library that worked with approuter
You are such an inspiration bro, Im in a Physics and Math course but I find coding more interesting by watching your video
This guy is clueless, he is trying to convince you to code something that 20 years ago everybody was dragging and dropping. Don't fall for this scam. Front-end needs NO CODE.
@@jboss1073 😂
Has shadcn library been fixed for React Native yet?
First time watching your channel; as a beginner I really appreciate you over-explaining / showing all the steps. Kee n to watch your other vids now. Thanks!!
Hey, in 7:30 I think we can see your API key in the terminal, please check it :)
was looking for this comment :D
tried using it, it wasn't working anymore, he changed it already.
It was on free plan so it’s fine hahaha. Hope that person had a blast
@@developedbyed good for you :D
I've been using HeadlessUI for a long time so this looks promising. Hopefully someone will port it to Vue and Angular if there is no official libraries for those frameworks.
easier to ditch vue and angular and use a library instead
@@gm42069 Do you really think it's easier to migrate entire production codebases to React than it is making a framework agnostic primitive library ? It's not.
Besides we have our reasons to not work with React. Angular offers better development experience in collaborative workflows and Vue has symbiotic batteries-included philosophy which means we don't have to tape together a bunch of 3rd party libraries with different API designs and patterns with breaking changes for every upgrade.
Regardless of motivations, even if we were open to make the switch it would be a challenge to port everything over and we'd be wasting 7 figures on this project all whilst pausing the development of our applications in production.
Material UI is best for me have been working for 4 years now and I just enjoy using this and testing its reach
I wish I knew about shadcn 2 months ago it would have saved me so much headaches while I was using material ui
ever tried mantine?
Hey do you have a link to your dynamic wallpaper? It looks super cool!
Hi, I follow code along but, when add new Promise resolve. It won't show same effect. It's load entire page instead of component only. Did I miss something?
Mantine v7 has over 100 UI components ready for use. Shadcn is useful for simple apps
It's been 7 months. How do you feel about it still today? Good choice?
What's the magic behind using await/async direct on the react component to fetch data, is this next.js feature?
at 8:20 can anybody explain me when was this promise generic feature introduced and is it a js feature or nextjs feature ?
Wow! Awesome I will try out this for sure, what’s the font you’re using on vsCode? It’s amazing!!
Awesome video! Please keep uploading more content about shadcn!
We do want an video on this library where we will make a app using this. And thanks man for making such contents.
is it possible to have the page statically rendered at build time and regenerated with nextjs ? I don't like that it has to wait for the result every time.
Really loved your wallpaper man
Hey Ed, quick question, why are we able to see a loading screen when we are supposedly getting all the HTML populated back from the server because we are using a React Server Component? I don't get that yet. Why we have a delay between the API request and the rendered page?
There isn't many videos about radix ui or shadcn, please bring more videos!
Tailwind is not a UI library but a css utility. It can be used with a UI library like mui.
i havnt wrote a line of tsx/ts code in my entire life and never used react andsomehow i understand everything you did
what server are you using for this app that lets you have async jsx elements
Thanks for the video and info, first time hearing of shadcn. Gave a thumbs up for the use of 'shite' in the video too :)
got some questions :
1)is that Array.from any new syntax , cus i have never seen it before.
2)Can we use it with Vite ? Would it show any depreciation of some sort ?
thank you.
I've used DaisyUI for doing the same purpose and it works wonderfully. The option to create themes and change whole website with a single theme makes it quite pleasant experience.
I would love to learn how to use daisyui-react. Do you know any videos you can point out that teaches it or any resources I can read?
My favorite.
where I can get that wallpaper?
can we really mix between tailwindcss and these UI libraries ?? Like there won't be any messed up styling problems ?.
How does this compare to ant design, primereact, material UI, etc.. ?
i want to know one thing, right now i am using styled-component/native for making my component library in react native app, but i am facing performance lag as we are making trading platform. what should be the ideal css framework for making component lib for react native app?
cool video! i have to ask, where did you get that live background?
Is it just a wrapper over `radix-ui`?
Nice video. One question, how did the program know when to show the Loading skeleton?😅
What is the theme you're using in vs code?
Is it okay to use multiple UI Component library in one project?
Another game changer!! That's three new ones I've seen today, what a time to be alive -- WOOT!!
How to get your desktop wallpaper?
I think everyone would love to see a full project powered by shadcn UI, I personally would really appreciate your effort. ❤
to use wierd numbers like 84 and 86 you need to do it like h-[84] and you need just in time loading on tailwind css
Very interesting!! Haven't heard of it but sounds really useful... Thanks for the tip 😉 🔥
"This React UI Library is (A) GAME CHANGER!" 😜
cool windows background! how you do it?
what's the wallpaper you are using?
I am creating my own UI component Library so is shadcn is best to use as base package ?
may i ask how do ur right css styles inside className ?? how does that works is that feature on react or what??
tailwindcss
What's your font in vscode, I like that.
I would like to see a more detailed build with this Library, Insaneee 🔥
What is your vs code color theme? thank you
can you give me link to your desktop wallpaper?
The problem with this library's CLI, is not remembering the last place it's saved in. And it's annoying if you have another path than "./components/ui"
Please give us a large build with this library
There's also Mantine UI which I think is pretty overlooked.
I couldn't figure out how to set up this library with React. Tried to manually install, but it doesn't seem to work. And with Radix and Shadcn both, I cannot digest that we need to install each component before using it. Does it make sense ??
What about mantine ui ?
Hello, i tried using CLI because i need the jsx version of components (only obtainable with CLI) and i dont want to use typescript, but i found that my CLI installation did not include cn function and everyrhing is failing. Should i install CLI and just add the missing function manually?
Also, there is a step in tailwind that requires you to convert an input css into an output. I did not understand why that is needed, i just want to use my main css file normally, not the output css file generated by tailwind installation. Is that really required?
Thanks for the video
I'm doing my side project with shadcnui right now. It's pretty great, but one thing I dislike is that if you want to change the defaults there's still a bunch of work to do. And I'm also not a huge fan of defining dark/light mode colours through css. I know that's how tailwind recommends it, but it's just not a great dev experience. Still kinda worth it for very little runtime cost and server-side support, but I don't think I'll stick with it for the next project if something nicer in terms of custom styling comes along.
What's the name of your VS Code theme?
Would love to see a vid with you using this tool - Your hair is looking breath taking btw...
Does it exist treeview component?
I didnt see, where are we call Loading component?
Thanks very much for this vid. but does this library have peer dependencies like MUI or others?
You are the reason I've been so fascinated by CSS and JS till date. Another banger. Wanted to learn the skeleton loader for a very logn time! Got to know it in just 8 minutes! Love it 🔥
Is it not good to have two or three ui libraries in one project or it doesn’t matter ?
What if your page loads in components with different skeleton layouts?
can you give coupon for your courses
Great video! What VScode theme are you using? my eyes will thank you!
Would love to see a full build with Shadcn, I recently wanted that exact thing. Amazing job!
Bro, make a full detailed video on shadcn. I loved the idea of it. It gives me the feeling like I am free.
Whats the point of doing this over adding tailwinds default "animate-pulse" in the div?
Nice video! Please share more information about your workspace setup
What terminal are you using? Terminal theme i mean
Why is react not written in rust?