What about bigger projects with more complex components? ShadCN doesn''t have multiselect with autocomplete, double range sliders and many other stuff, that is included in big libraries like MUI/AntDesign/Mantine etc.
@@developedbyedAlongside pinning, me and other watchers would hope to see your thoughts on this one, I can see you have already implemented Multiselect, so why don't you give an answer on how you did that, and also some recommendations on 3rd party libraries that will help us in times where shadcn hasn't implemented them yet. Cheers.
00:01 Choosing between UI libraries 02:02 Setting up a global CSS for consistent styling 04:07 Choosing ShadCN and Tailwind for quicker web development 06:16 Choosing between CSS modules and frameworks like Bootstrap 08:31 Custom styling with ShadCN and Tailwind 10:26 Tailwind provides a ready-made design system and speeds up CSS writing. 12:45 ShadCN with Tailwind enhances speed, accessibility, and theme switching 14:59 Shat siand separates from other UI libraries 16:57 Customize Tailwind classes and variant styles effortlessly 18:47 ShadCN and Tailwind are my go-to for all projects. Crafted by Themba Botha the Highlight guru
I really love the way you're gradually presenting the solutions you've used up to tailwind, while explaining the disadvantages of each approach that led you to change to the next one.
I see shadcn components as a starter to build ur own design system; there's a reason u copy the code instead of importing it from npm, it's all in ur hands, use it, adapt it to ur need, and extend its principles to build more rich and complex components !
Hey ed! Nice video. One quick advice or tip, if you continue to let us have your webcam in the video, try to position it so that you're looking into the video, not outside of it. That's a game changer 😀 keep it up
I like seeing the presenter while they code. 👍👍👍👍 also could you expand on why you prefer Tailwinds. I have seen so many saying Tailwinds is junk. Thank you so much for your time. 👍👍👍👍👍
CSS modules are fantastic for scoping one off features. Its a simple yet effective tool to use in conjunction with style libraries and traditional global CSS 🤝
Dude, you are like the Coding Bro, like the down to earth colleage i need, The Code Teacher with Bro aura, big love bro keep being you, keep being awesome
For enterprise level project, Material UI is the most reliable and proven by Google. But for small project like for a startup business, ShadCN is okey because it's smaller in size.
Hey Ed I also pick shadcn and tailwind for all my projects as well. They just simplify the tedious parts of developing and allow to me focus on writing components quicker. And honestly, with shadcn, more beautifully
i feel that the issues stated with CSS, are generally beginner to mediocre CSS developers problems. Once you advance, you know how to deal with all of those things, without creating accidental overrides and redundancies. I hear those arguments so often from developers, and using Tailwind sometimes myself, I do not think that you are faster or more efficient (unless you are a Tailwind expert) writing your properties into HTML with Tailwind. Using them in React makes a bit more sense to me, but in classic projects I am rather on the conservative side.
I prefer tailwind-based component libraries, since the bootstrap-like framework often create mess of css(s) that lots of unknown css overlap each others............ -_-.
NB: What if you have two user interface and admin dashboard which means 2 project at the same directory, and they share the same resources, I mean how we can customize the @components directory for shadcn in this case.
I don't get it, why are you saying that Tailwind is giving you a design system if it's just a bunch of utility classes? Haven't used it, so actually curious
I think he means that, there are prebuilt design goodies to make your life easier. Let's look at colors for example. 1. There is a range of colors which are predictable due to a design system, like green-700 and blue-700 will have the dark effect and green-200 and blue-200 will have the same light effect. You dont get this from pure css, its something that you have to create from scratch on your own. 2. There is a well designed system to help you easily extend these colors and create your own and the will work as if they were offered by tailwind. They will fit well with the system (DESIGN SYSTEM) without writing a lot of CSS. As a designer myself, i totally understand that the word DESIGN SYSTEM might mean a totally different thing, but based on his explanation, he is not far off and remember, he is trying to make a point. We then need to understand him from the point he is trying to make not the meaning of a DESIGN SYSTEM in FIGMA TERMS. I might also be wrong or miss it, but that is how i see it
@@codeddesign yeah, I guess you can also call HSL in CSS a "design system" as well, just depends on how you define it :) Fair enough tho, I get your point
On small projects, Tailwind is a great choice, you can make your life a lot easier. But on large projects, it will definitely turn into a mess, and you will move away from atomic classes one way or another.
Not if you create a project that is modular itself. Every module has limited amounts of atomic classes used. Stylesheets can also become a very bloated and stringy mess when they contain all kinds of named classes from all different parts of the project. The choice of css organisation is very dependent on the structure of the application itself.
@@CoenBijpost My project is modular, and TailwindCSS made it hard to read, hard to debug, hard to change. So I switched to regular classes that can contain classes from TailwindCSS. The atomic class approach is not suitable for every project and every task.
It's worth trying again. It just takes a little perspective shift from a "traditional" npm-installed component library, but if you want to customise stuff, it's so much better.
@@fwdflashwebdesign no, it can't. I'm not sure what is the reason but you're telling lies. AI can't do anything but implement just simple Figma layouts. Coding UI is even more complicated than coding backend. AI can't even implement a relatively easy Figma design without bugs and various artefacts. I don't even mention the problem of implementing dozens of states and hundreds transitions between them in web apps, accessibility, performance, semantic markup, SEO, and other things. AI tools will ruin your business plan in seconds if you'd stake at them.
I used daisy 🙃 only to switch to Shadcn. See, those themes, especially my personalized ones did not work on older versions of Android and iOS. I can't wait to see Shadcn grow, it's my go to now.
Tailwind is freaking horrible. You have to call 10 classes when you only need to call one or none if you do a proper styling of HTML tags and/or parent elements. All this speech about "productivity" and doing things as fast as you can makes you look flaky and lazy, makes you look like you don't even care about what you're doing.
Write a little more up front to save maintenace time later. Output code is still lightning fast so no cost on that end. Why should we optimize for having the fewest CSS classes over write time and page speed?
Nope. You have to "call" 10 classes, sure, but 99% of them map to a single property and the rest map to 2 properties. So you're writing the same amount of CSS (which is automatically tree shaken by the way), you're just doing it with less typing, without having to switch back and forth between files, without having to come up with endless class names, and with a ready made design system built in. Hate to say it but it sounds like you're just regurgitating someone else's opinion rather than trying it yourself.
![[TH] 2024 PMGC League | Survival Stage วันที่ 1 | PUBG MOBILE Global Championship](http://i.ytimg.com/vi/FVFT-PFwU80/mqdefault.jpg)
What about bigger projects with more complex components? ShadCN doesn''t have multiselect with autocomplete, double range sliders and many other stuff, that is included in big libraries like MUI/AntDesign/Mantine etc.
Good point!
Great point! I’ll pin it
@@developedbyedAlongside pinning, me and other watchers would hope to see your thoughts on this one,
I can see you have already implemented Multiselect, so why don't you give an answer on how you did that, and also some recommendations on 3rd party libraries that will help us in times where shadcn hasn't implemented them yet.
Cheers.
Agreed, but can create those pretty easily with shadcn, remember that deoesn't hide any code from you. so its pretty easy to customize.
@@developedbyed care to answer honey bun?
00:01 Choosing between UI libraries
02:02 Setting up a global CSS for consistent styling
04:07 Choosing ShadCN and Tailwind for quicker web development
06:16 Choosing between CSS modules and frameworks like Bootstrap
08:31 Custom styling with ShadCN and Tailwind
10:26 Tailwind provides a ready-made design system and speeds up CSS writing.
12:45 ShadCN with Tailwind enhances speed, accessibility, and theme switching
14:59 Shat siand separates from other UI libraries
16:57 Customize Tailwind classes and variant styles effortlessly
18:47 ShadCN and Tailwind are my go-to for all projects.
Crafted by Themba Botha the Highlight guru
I really love the way you're gradually presenting the solutions you've used up to tailwind, while explaining the disadvantages of each approach that led you to change to the next one.
Should we keep the webcam in or out for future videos?
What a silly question, in of course
Ed, you're such a likeable guy, definitely leave them on. It gives your videos a very personal touch that makes your videos stand out. :)
In, for sure🚀
Definitely in, I love your expressions
i like it! but maybe change your camera angle, or at least flip it so it doesn't look weird that you are facing the other way
I see shadcn components as a starter to build ur own design system; there's a reason u copy the code instead of importing it from npm, it's all in ur hands, use it, adapt it to ur need, and extend its principles to build more rich and complex components !
really excited too see ur next14 course buddy
I used MUI in my last project, and styling it was pretty similar to how Tailwind styles, it's not that bad.
Hey ed!
Nice video. One quick advice or tip, if you continue to let us have your webcam in the video, try to position it so that you're looking into the video, not outside of it. That's a game changer 😀 keep it up
I like seeing the presenter while they code. 👍👍👍👍 also could you expand on why you prefer Tailwinds. I have seen so many saying Tailwinds is junk. Thank you so much for your time. 👍👍👍👍👍
CSS modules are fantastic for scoping one off features. Its a simple yet effective tool to use in conjunction with style libraries and traditional global CSS 🤝
This was fun 😃. Great content
I really love the "cn" approach of writing tailwind classes. I think the "cn" approach is now very popular for the ShadcnUI.
Dude, you are like the Coding Bro, like the down to earth colleage i need, The Code Teacher with Bro aura, big love bro keep being you, keep being awesome
I prefer writing css with BEM methodology. And my opinion is that the markup and styles should be separated. So.. no Tailwind for me then :)
Same here 😁
Good choice. Tailwind isn't that bad though. I'm not sure about libraries like shadcn-ui though
very nice
For enterprise level project, Material UI is the most reliable and proven by Google. But for small project like for a startup business, ShadCN is okey because it's smaller in size.
thanks for the video mate.
can you do review of nextUI library?
thank you
Hey Ed I also pick shadcn and tailwind for all my projects as well. They just simplify the tedious parts of developing and allow to me focus on writing components quicker. And honestly, with shadcn, more beautifully
Your Vs theme looks beautiful what is the name of this?
What vscode theme is that? Looks beautiful
I like seeing more stuff on screen, but a face at the bottom right is cool, for enunciation.
You create great video tutorials. ❤🎉
i feel that the issues stated with CSS, are generally beginner to mediocre CSS developers problems. Once you advance, you know how to deal with all of those things, without creating accidental overrides and redundancies. I hear those arguments so often from developers, and using Tailwind sometimes myself, I do not think that you are faster or more efficient (unless you are a Tailwind expert) writing your properties into HTML with Tailwind. Using them in React makes a bit more sense to me, but in classic projects I am rather on the conservative side.
how about nextui
Just started shadcn/ui on a real project and enjoying it so far. Still want to look into NextUI in the future, have you tried it?
I prefer tailwind-based component libraries, since the bootstrap-like framework often create mess of css(s) that lots of unknown css overlap each others............ -_-.
NB: What if you have two user interface and admin dashboard which means 2 project at the same directory, and they share the same resources, I mean how we can customize the @components directory for shadcn in this case.
Two css files? It should be powered by postcss which allows putting into separate .css files whatever you like.
Hey Ed you stopped showing magic tricks. Anyways you are the best creator out there!
i wish shadcn had sidebar components
Why shadcn-ui is so popular? I see it everywhere today but not sure about its real value. Wouldn't it be better having your own custom UI library?
Hey Bro Will this course be updated in your Old Next JS ecommerce course ?
Which theme are you using man?
Tailwind is inline styles with extra steps.
actually less steps, if in context with react/nextjs
- no need to enter double {{}}, and object syntax, just put classnames in ' ', and done 👍
🤣🤣🤣 How about now, man you're hilarious. Love the content my friend on the internet
🔥🔥🔥
I don't get it, why are you saying that Tailwind is giving you a design system if it's just a bunch of utility classes? Haven't used it, so actually curious
I think he means that, there are prebuilt design goodies to make your life easier. Let's look at colors for example. 1. There is a range of colors which are predictable due to a design system, like green-700 and blue-700 will have the dark effect and green-200 and blue-200 will have the same light effect. You dont get this from pure css, its something that you have to create from scratch on your own. 2. There is a well designed system to help you easily extend these colors and create your own and the will work as if they were offered by tailwind. They will fit well with the system (DESIGN SYSTEM) without writing a lot of CSS. As a designer myself, i totally understand that the word DESIGN SYSTEM might mean a totally different thing, but based on his explanation, he is not far off and remember, he is trying to make a point. We then need to understand him from the point he is trying to make not the meaning of a DESIGN SYSTEM in FIGMA TERMS. I might also be wrong or miss it, but that is how i see it
@@codeddesign yeah, I guess you can also call HSL in CSS a "design system" as well, just depends on how you define it :) Fair enough tho, I get your point
@@maxim_mazurok Thanks
ily
mantine is the best
On small projects, Tailwind is a great choice, you can make your life a lot easier. But on large projects, it will definitely turn into a mess, and you will move away from atomic classes one way or another.
Not if you create a project that is modular itself. Every module has limited amounts of atomic classes used. Stylesheets can also become a very bloated and stringy mess when they contain all kinds of named classes from all different parts of the project. The choice of css organisation is very dependent on the structure of the application itself.
@@CoenBijpost
My project is modular, and TailwindCSS made it hard to read, hard to debug, hard to change.
So I switched to regular classes that can contain classes from TailwindCSS.
The atomic class approach is not suitable for every project and every task.
What's the name of the vs code theme u use ?
Material theme palenight!
and the font?
I tried ShadCN for Svelte, had a look, got scared and ran away back to Daisy lol.
It's worth trying again. It just takes a little perspective shift from a "traditional" npm-installed component library, but if you want to customise stuff, it's so much better.
@@bn5055 Still keen to use it myself just need to spend the time with it, soak it in.
same for me as well. Couldn't wrap my heads around Shadcn after using DaisyUI for quite a long time. NextUI comes in second place after Daisy
@@enitan2002 At the end of the day its all HTML JS and CSS so really doesn't matter what you use.
I'm confused Isn't this now Bootstrap?
Exactly my thoughts. It should be better than Bootstrap though because Tailwind is easier to customize. But anyway
I appreciate the point of the video, but there is no reason it should be nearly 20 min long.
The background music is distracting
mantine ftw
I think shadCN 📱 is trending
Is it still worth it to learn code with AI and all this changes?
OMG not AI again. Have you tried a AI tool for coding UI?
@@tebesvet Yes it can already prety much everything!
@@fwdflashwebdesign no, it can't. I'm not sure what is the reason but you're telling lies. AI can't do anything but implement just simple Figma layouts. Coding UI is even more complicated than coding backend. AI can't even implement a relatively easy Figma design without bugs and various artefacts. I don't even mention the problem of implementing dozens of states and hundreds transitions between them in web apps, accessibility, performance, semantic markup, SEO, and other things. AI tools will ruin your business plan in seconds if you'd stake at them.
Hmmm, module css.
What is all about ShadCN? DaisyUI is way WAY way better! I do not understand the hype around it.
it was never this vs that, I used daisy a couple of times it was pretty good
I used daisy 🙃 only to switch to Shadcn. See, those themes, especially my personalized ones did not work on older versions of Android and iOS. I can't wait to see Shadcn grow, it's my go to now.
what the pros of daisy ui
DaisyUI is basically Bootstrap that happens to use Tailwind. It's not exactly revolutionary.
@@bn5055 What I super like about DaisyUI is it's simplicity... No bloated code, no needed extra state and much more... I just love it...
Anyone using jQuery UI 👇
Absolute waffle
MUI is the best
666 likes 😅
Tried it, don't like it
Tailwind is freaking horrible. You have to call 10 classes when you only need to call one or none if you do a proper styling of HTML tags and/or parent elements. All this speech about "productivity" and doing things as fast as you can makes you look flaky and lazy, makes you look like you don't even care about what you're doing.
Who upset you?
No
Write a little more up front to save maintenace time later. Output code is still lightning fast so no cost on that end. Why should we optimize for having the fewest CSS classes over write time and page speed?
Nope. You have to "call" 10 classes, sure, but 99% of them map to a single property and the rest map to 2 properties. So you're writing the same amount of CSS (which is automatically tree shaken by the way), you're just doing it with less typing, without having to switch back and forth between files, without having to come up with endless class names, and with a ready made design system built in. Hate to say it but it sounds like you're just regurgitating someone else's opinion rather than trying it yourself.
It isn't ;)
Because you're noob and everyone is following the same thing like a sheep
Lol....sure thing professional guy 🤣
Sequentially is a word. 😊