Rating The Most Popular React UI Frameworks

  Рет қаралды 151,075

developedbyed

developedbyed

Күн бұрын

Пікірлер: 412
@uzairhaider1016
@uzairhaider1016 Жыл бұрын
Points you forgot to mention for tailwind - it has built-in dark mode support, which is not available in bootstrap ( or any other i know) - it has customized utility classes, like if I want to give 252px of width, i could use w-[252px] - it has classes for psudeo selectors like before: , after:, focus: hover:, active:, disabled: - you can style based on parent item using "group" and based on siblings using "peer" - the best thing is that you can add your custom classes. - one thing I also like about awesome people is that some one made a framework on tailwind "tailwind elements" which is a total copy of bootstrap in tailwind. - last thing is that if we use taliwind using CLI or wiht Post CSS, it only adds used classes in build files. so you will get reduced CSS file size.
@ajithav2011
@ajithav2011 Жыл бұрын
Mui also has dark-mode support
@prestonjudearnold2814
@prestonjudearnold2814 Жыл бұрын
@@ajithav2011 and chakra
@nivethan_me
@nivethan_me Жыл бұрын
and arbitrary variants 🔥
@royz_1
@royz_1 Жыл бұрын
You love tailwind we get it. If you keep adding all the usp for all these libraries, it would be a 2 hour long video.
@MartinAdelstein
@MartinAdelstein Жыл бұрын
Chakra UI has great Darkmode support too... I like the component based Chakra model against the "messy" functional css of Tailwind and Bass Css and stuff. You can configure your own theme based on your own breakpoints and your own color schemes... eand so much more. It is sometimes a little underappreciated from my Point of view. And it has integrated Framer Motion support. Which makes it really shine. If you are into React... or Vue just try Chakra UI. It will surprise you. :) my 0.02$
@nivethan_me
@nivethan_me Жыл бұрын
15:56 in Tailwind to apply classes to all 3 h1 inside a div you can use arbitrary variants(from tailwind 3.1) hello 1 hello 2 hello 3 pretty cool feature in my opinion 🔥
@magnacarta7045
@magnacarta7045 Жыл бұрын
but you'd have to repeat the selector over and over again to n number of properties that you want its children to have.
@nivethan_me
@nivethan_me Жыл бұрын
@@magnacarta7045 sadly yes, hopefully they make the selector reusable
@eneadriancatalin
@eneadriancatalin Жыл бұрын
or you can make a css class and then apply all these tailwind classes .custom-h1 { @apply p-3 text-lg bg-red-500 }
@karis7539
@karis7539 Жыл бұрын
@@eneadriancatalin jesus that looks bad. please no tailwind in a regular css
@jdratlif
@jdratlif Жыл бұрын
You could also make a component and apply the tailwind classes there.
@smhmkkh
@smhmkkh Жыл бұрын
Chakra UI all the way; one of the best things about it is how to apply responsive styling so for example ‘bgColor={[“blue”, “red”, “teal”]}’ will show a blue background color on smartphones, red on tablets and teal on everything with larger screens than that, you can also use hex colors
@peaceenlightenment9630
@peaceenlightenment9630 10 ай бұрын
you would need to specify breakpoints right?
@daved8070
@daved8070 Жыл бұрын
For me, css modules live in the same folder as the related component (hence the modules). Easy to find the styling you want and means your components are easily transferred to other projects. Though I see you're an inline kind of guy 🙂
@ChristofferLund
@ChristofferLund Жыл бұрын
Agreed, that's the proper way to do it. And with a snippet in vs code you can "automate" the creation and imports of react components with css modules
@magnacarta7045
@magnacarta7045 Жыл бұрын
but the downside of doing that is when adding responsiveness. You have to repeat media query breakpoints for every css module that you have for every component.
@cwirus99
@cwirus99 Жыл бұрын
@@magnacarta7045 And why should it be a huge issue?
@magnacarta7045
@magnacarta7045 Жыл бұрын
@@cwirus99 repetitiveness of course. If you'd heard about DRY principle this should be a big issue for you.
@cwirus99
@cwirus99 Жыл бұрын
@@magnacarta7045 yeah, but I wouldn't consider media query declaration as a violation of DRY principle, because inside of it you have different things. It's like you would say using useEffect in many components is bad.
@Meerbahadin
@Meerbahadin Жыл бұрын
Chakra is fully customizable with just one single theme object and makes the responsive design very easy and it has full TS support, I'm not sure how you rate something that you don't use
@SogMosee
@SogMosee Жыл бұрын
lol
@houssammrabet4438
@houssammrabet4438 Жыл бұрын
is it better tha mui and tailwind?
@SogMosee
@SogMosee Жыл бұрын
Yes it is
@Zephury
@Zephury Жыл бұрын
@@houssammrabet4438 half the ui libraries out there are better than mui lol
@SantiagoGomez-su6cj
@SantiagoGomez-su6cj Жыл бұрын
@@houssammrabet4438 I haven't really used Tailwind that much, but the way I see it is that Tailwind allows you to make the development process very quick and smooth. On the other hand, Chakra UI has an easy way to style your components and gives you a lot of freedom to create themes either global or component focused. You can even create your own components. But I feel that it takes a bit more time to get used to the theming part and be able to do it fast.
@kbutube
@kbutube Жыл бұрын
Chakra UI implements Emotion, which is like an evolution of Styled Components, and in way that makes it much easier to get rolling with a CSS-in-JS system Styled Components itself. That rearrangement at the end brought me back from 🤯 to 😎 You should play with it more!
@MrJettann
@MrJettann Жыл бұрын
Interesting video, Ed! IMHO css modules is much better than styled components, because it's a simple css. Problem with finding the styles file can be simply solved, if you put your component file and style file besides each other. Styled components makes the components too big and unreadable, and if you will make a special file for this, why not use css modules instead?) Just my opinion, do anyone agree?
@aiknersisian
@aiknersisian Жыл бұрын
I believe styled components are cool, because you can inherit styles, pass props etc.
@TheCJCsoccer
@TheCJCsoccer Жыл бұрын
@aiknersisian is that similar to a scss modules ?
@aiknersisian
@aiknersisian Жыл бұрын
@@TheCJCsoccer Can't lie, I didn't work with sass modules. So, dont know how similar they are. But with styled components you can pass props into the styled components and change the styles based on the received prop, which is really cool.
@slatanek
@slatanek Жыл бұрын
Emotion/css. Simply inline css. Problem solved.
@tomaslanda1317
@tomaslanda1317 Жыл бұрын
Definetly agree, thats how I do
@aashayamballi
@aashayamballi Жыл бұрын
Where is Ant design?
@oussamaghrib4558
@oussamaghrib4558 Жыл бұрын
At the very VERY top
@chaobanh5003
@chaobanh5003 Жыл бұрын
It is beyond perfect
@ngonimugumwa6374
@ngonimugumwa6374 Жыл бұрын
I was a huge Tailwind Stan (still am), ChakraUi which I hated the first time I tried it but is something I appreciate more now that I've worked with React Native and Nativebase. Great tier list though.
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️...
@antonpieper
@antonpieper Жыл бұрын
4:50 in most editors you can literally just Ctrl + Left Mouse Button on a class name (i.e. styles.contacts) and it will open the file at that class. Also you can put your (s)css modules in the same directory as your component (which is common practice).
@CanRau
@CanRau Жыл бұрын
Also downside of css-in-js like Styled Components is the additional runtime size and cost, which is why many are moving away, especially now with the (new) rise of SSR
@yadusolparterre
@yadusolparterre 6 ай бұрын
What do you mean by additional runtime size and cost? Can you provide an example?
@jaxuys
@jaxuys Жыл бұрын
I agree with you reasoning, another framework very similar to Material UI is Mantine
@royz_1
@royz_1 Жыл бұрын
I love Mantine! I have been using it in 3 projects.
@basman7620
@basman7620 Жыл бұрын
One of the factors I find is that most devs only think about code for developers and screens for users. This is great in a perfect world, but with testing and auditing taking a bigger role (as we seem to be transitioning from the old wild West days of early web development) people forget the most expensive part of the equation. Paying the auditors and testers is normally more expensive on a daily basis and making things harder for them to test/read ultimately costs the project more money. You're probably not going to be able to pass all your source code to an auditor so make sure whatever gets rendered makes sense when checked in the browser. I think Tailwind has a plug in for this now but it used to take our auditors about 4 or 5 times longer to check rendered HTML and they would get more irate at the code taking ages to make sense of.
@AndriusLau
@AndriusLau Жыл бұрын
I think Chakra UI, Mantine, and Mui are perfect solutions for full-stack devs, who do not like to write CSS :)
@kohelet910
@kohelet910 Жыл бұрын
Depending on the project, the requirement and complexity, I do enjoy and love both Tailwind, styled-component and CSS modules. I really need to give Chakra UI a try
@praveenvinopv9929
@praveenvinopv9929 Жыл бұрын
You forgot it man, Well I do that I place ANTD above perfection 🔥
@imkir4n
@imkir4n Жыл бұрын
Haha really 🌚
@mhasancoder
@mhasancoder Жыл бұрын
it should be in this list
@andygarvin6991
@andygarvin6991 Жыл бұрын
Couldn't agree more
@BlurryBit
@BlurryBit Жыл бұрын
You actually can style an h1 tag in the module css, if you used sass. How I do it normally is have a .wrapper class in the wrapper. Then I can style everything with their element tag... e.g. .wrapper { h1 { color: black; } & > div > div { display: none; } } etc... the key is to remember that the top level enclosure has to be a class, or an ID (although I have never tried ID... I could be wrong about the support). It cannot be an element tag. oh and... those "styled components" are really bad for visibility. I hate it too much. My favorite combination is to use module level scss with tailwind component classes and achieve things like.. .wrapper { h2 { @apply text-red-500 underline; } } .... etc...
@ritsu133
@ritsu133 Жыл бұрын
what is the really point to use tailwind with this @apply? For not reusable layout like display: flex, justify, padding just write it to className. For reusable styles like buttons more React's way is to create component.
@GGGGGGGGGG96
@GGGGGGGGGG96 Жыл бұрын
At minute 15:00 - the Tailwind-example with the h1-tag look good, because there is only one h1-tag there. But if you have the same tag many times, than you have also to repeat these tailwind-classnames every time (or put it in a variable). Beyond from React, tailwind is almost like writing inline-css, but just with class-names. It is not good or bad, or perfection, it only depends on the project. It has also its disadvantages because it is almost like writing inline-css and you always have to know for almost each css-property/value the corresponding class-name and how to combine them. Let say you need a "justify-content: flex-end" - what could this be in tailwind (or bootstrap)? ...🤔 could this be "justify-content-flex-end"? Or just "flex-end"? Maybe "flex-justify-end"? Is "display:flex" included in the definition or should this maybe combined with some "display-flex" or "d-flex" class? So let's do a google-search (or look in the documentation) again, and again, and again, and again, ..... The google auto-suggestions is already full with these "display flex tailwind" bullshit 🤣
@snake1625b
@snake1625b Жыл бұрын
Material UI + tailwind is best imo. Material UI has a way to generally style all the reusable components in a config so 99% of the styles can reside there. That way in your code you barely ever have to actually style anything. In the rare case you do have to do custom styles you use tail wind. Styled components, css modules, using the sx prop in Mui is not the way to go. It requires having a whole nother file and what can be done in 1 line, styled components will need like 10.
@kiisifelix
@kiisifelix Жыл бұрын
god like feeling I have tried it before Especially MUI date pickers Conclusion: MUI === Flutter UI
@ivanarsenev4474
@ivanarsenev4474 Жыл бұрын
Using UI framework could be challenging and it's feels like you spending more time for exploring props and right use of components by reading docs. This process consumes a lot of time and energy and still you could not even come close to what designer told you to implement. So I prefer tailwind in that list, because you learned it once and will use it forever
@davepascual39
@davepascual39 Жыл бұрын
I totally agree with that. I spend more reading the documentation of about its API, especially the props.
@JEsterCW
@JEsterCW Жыл бұрын
this^
@slatanek
@slatanek Жыл бұрын
It's still another syntax to learn. Why? When you know css already?
@JEsterCW
@JEsterCW Жыл бұрын
7:38 - That's why there's a convention, when youre moving styled to seperated file with prefix "styled" and then you import all as Styled then you ure using and you know whats styled and what's not, this is the most popular convention used around the world and how should it be done. I love the semantic naming of styled components, but not knowing whats what is also a problem, so thats right. 15:27 - I hate when ppl say it as an argument against tailwind, first of all nobody will have the same component like few times as a child that contains the same classes, usually u ll map those, or will seperate it as a re-useable component(if needed), u can always use arbitrary variants where u can use *[&>h1]:p-2* . You have also Twined, TwClassed libs for making tailwind even better experience with more semantic meaning also if ure building a pure static website you will use astro = re-useable components, you can map childs or components inside other components, so i dont really see a problem over here if its already "solutioned". If you need material look just use creativetim material tailwind, it provdies basic material components and if u need more u can get their paid ui kit. About MUI, mui is the worst DX u will ever have in ur developer life on the front, its the worst ui lib and sadly it looks cool, it provides amazing amount of variants of components, but the DX and learning curve is an absurd. I have used/tried every top UI lib for react, and theres nothing better than Mantine atm, altho im still using tailwind cause learning curve for ever of those is so huge to understand all that i will quicker prototype or make my own component by using tailwind and react than by sitting in the docs for no reason. Most of startups nowdays are using chakra(but using it is like doing css but inline in props way lmao, useless cause its literally css to me) or tailwind with tailwindui, everybody knows how huge pain in the ass mui is, so more ppl are quitting this piece of shithole lmao. Currently theres no better way to style components than Tailwind, I'm waiting for another revolution, but It will take years till something will be close to how smooth and easy tailwind is... using css/sass/modules nowdays is like not loving our life and not respecting our time at all. All ppl i "made" to try out tailwind loved it and started to understand the benefits of this technology, the worst part about it is that its hard to get a job where they dont use css/scss lmao
@alexanderkirilov7820
@alexanderkirilov7820 Жыл бұрын
I agree so much with everything. I am glad you took the time to write this comment, so I don’t have to!
@victorkwasara
@victorkwasara Жыл бұрын
I would put Css modules a bit higher on the list and styled components lower like the final position at the end Other than that great list
@matthewchukwu1306
@matthewchukwu1306 Жыл бұрын
1. Chakra-ui 2. Tailwind
@frankthedsigner558
@frankthedsigner558 Жыл бұрын
Great video, just a comment on your TailwindCSS section. The purpose IS to separate it into it's own file. Tailwind is a design system and not a library. It allows the ability for you to set up and create your own design system and have full control over your styles. If you've spent some time creating your own styles it is as easy as replacing the config file and instantly use your own style labels on projects. The magic about Tailwind is how easily you can add onto your own styles without restructuring the base style. It's amazing how robust and flexible Tailwind is designed.
@awedsa7004
@awedsa7004 Жыл бұрын
Tailwind developers can use custom values for class, such as p-[15px] bg-[#ffd700] text-[red] rotate-[15deg] etc...
@slatanek
@slatanek Жыл бұрын
Great video! My few cents. For styling emotion/css is the best IMO. You get to write plain old css in line with media queries, animations, selectors etc. The nice thing about it is your styling will remain reusable forever. If you want to reuse your styling from React project in a JS/HTML you can just copy paste your styling to wherever and it will just work. Cause it's css, duh. That's why I'm not a fan of libraries like Tailwind. On the surface it seems like a great idea, but what happens when they drop support for? Or when you need to port your components to a project in other framework? Css might be overly verbose, but it's tried and tested and it seems it isn't going anywhere any time soon. Cheers!
@zayne-sarutobi
@zayne-sarutobi Жыл бұрын
@@slatanek For your info, tailwindcss is still just CSS... But this still without the mental overhead of switching between files just to style stuff
@daisywayy443
@daisywayy443 Жыл бұрын
I am currently learning Material UI so far enjoying the learning.
@rikimbili
@rikimbili Жыл бұрын
I started out with Material UI and it is quite nice but only for prototyping or small personal projects. If you want to make your own design system, it is annoying to change the internals of MUI components; at that point it might be best to use something like tailwind css or plain old css files to implement the UI.
@jitxhere
@jitxhere Жыл бұрын
Learning phase of MUI Enjoy ---> Cry ---> Hate MUI
@imkir4n
@imkir4n Жыл бұрын
@@rikimbili you can customize things in it but yeah it's takes alot of time and patience...Mui is gud to learn and easy to use...but having knowledge is tailwind will give you a upper hand
@slatanek
@slatanek Жыл бұрын
Wait until you get to the "I just want to adjust this tiny part of the component" bit...
@tariqsyed6011
@tariqsyed6011 Ай бұрын
​@@rikimbili well i have heared that for small projects the best one is chakra ui easy to use with good looking components, but for big projects or industry standard projects we should go for Material UI.
@hamzahmd_
@hamzahmd_ Жыл бұрын
It's a nice list but let me summarize it to have the perspective of UI libraries. Actually, while building scalable applications it's considered a "Code-Smell" if we use className/class on every block of code. That's why premade UI libraries like MUI looks clean but MUI customizations are hard to implement for complex UI interfaces. On the other hand, though, Tailwind has a className property but we can build generic reusable components and create our own library out of it for big or scalable applications. Tailwind CSS is winning in all aspects whether it's complex customization, colors, built-in support for several add-ons, more beginner friendly, works everywhere, more independently close to CSS unlike bootstrap, etc.
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️.
@SumriseHD
@SumriseHD Жыл бұрын
I actually just set up something in Nuxt and needed something exactly like this. And it was uploaded 7 hours ago! Thank you so much! Missed "Ant Design" though
@ChristofferLund
@ChristofferLund Жыл бұрын
Where's Mantine? The BEST ui library for react by far imo.
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️..
@khakcsar
@khakcsar Жыл бұрын
Where is mantine???
@omaralhendi137
@omaralhendi137 Жыл бұрын
Let us know what you think of Mantine UI and Next UI
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆..
@anandubabu-webdev
@anandubabu-webdev Жыл бұрын
Its cool to hear the summery of popular libraries. Anyways comparing CSS extensions/design libraries with component libraries makes me think was that a fair comparison! I would never compare tailwind with MUI. Each solve entirely different problems.
@ShivamJha00
@ShivamJha00 Жыл бұрын
True
@orielvinciabsin3371
@orielvinciabsin3371 11 ай бұрын
whenever i found myself duplicating tailwind classes, I will just create a component for that specific element and use it instead. That way I will only have to change the classes in one place. Although it involves adding an extra file, it helps you to organize your components and write much cleaner code.
@tim.bogdanov
@tim.bogdanov Жыл бұрын
Mantine and Mantine UI is top tier
@rishabsharma5307
@rishabsharma5307 Жыл бұрын
it's beyond perfection
@JEsterCW
@JEsterCW Жыл бұрын
This^ for UI libs, and the amounts of hooks mantine is providing is amazing
@tim.bogdanov
@tim.bogdanov Жыл бұрын
@@JEsterCW Mantine ui is a ui library
@Saradomin65
@Saradomin65 Жыл бұрын
Been wanting to learn Mantine UI. Is there any tutorials that you'll recommend? There's not a lot on youtube so it's kind of a bummer. Perhaps just sticking to the docs is good enough?
@rishabsharma5307
@rishabsharma5307 Жыл бұрын
@@Saradomin65 Docs are great. You can join their discord channel for any help that you need
@azsamsiizbrah
@azsamsiizbrah Жыл бұрын
"What I don't like about React-Bootstrap is its built in components. What I like about all other variants is their build in components." Because logic, that's why! :)
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️.
@fave1201
@fave1201 Жыл бұрын
I've used MUI for at least 2 years and Chakra for about 3 months and Chakra is better. It's a nice combination of everything. A lot of cool components without the need for CSS files for most UIs. Their toasts are also better as they can stack, MUI only has one toast at a time. You can also provide a range of values for responsiveness. Cool dark mode. Chakra is just better in my opinion but thanks for sharing yours.
@developerAKX
@developerAKX Жыл бұрын
notistack it with any styled toast it is way better
@joleDEV
@joleDEV Жыл бұрын
this is not true mui has stacked toasts
@fave1201
@fave1201 Жыл бұрын
@@joleDEV Hey, I don't think so. I searched for it when I needed it and could not get it and even now it's not on the docs. Perhaps you may share a link but I think MUI specifically states that they don't support stacked toasts
@joleDEV
@joleDEV Жыл бұрын
@@fave1201 there is one , i cannot provide links but check the components section under snackbar
@wrux
@wrux Жыл бұрын
Look more into Chakra and building themable components. It's where it really shines over something like styled comps
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️..
@nonstopper
@nonstopper Жыл бұрын
Mantine and AntD deserve more love
@vitalino1981
@vitalino1981 Жыл бұрын
How the screenreaders react to styled components? Did they recognize H1Style as h1?
@rebelpandas
@rebelpandas Жыл бұрын
Hey Ed, love the vid. one thing about the Tailwind part: reused styles should definitely be assigned in a global css which tailwind has the @apply feature for. Also there is a feature where you can style responsive Layout based on max-width instead of min-width with. For example "max-lg" or "max-sm".
@md.asifal-mahmud5952
@md.asifal-mahmud5952 Жыл бұрын
Started learning Chakra UI, and wondering why it is not the most popular yet. Note: I have already used MUI, Tailwind, Bootstrap, Styled Components.
@bogdanandrei9803
@bogdanandrei9803 Жыл бұрын
Why do you like it so much? I'm a fan of tailwind but I'd like to try Chakra too
@SogMosee
@SogMosee Жыл бұрын
prop based styles are the bees knees
@Kajdjewo
@Kajdjewo 8 ай бұрын
I have 2 questions. Which styling is the best with vanilla js? I know the styling that you are talking about is made few months ago. I appreciate that if you answer me with the 2024 trend. Just the thought was going through in my mind is about performance. I think i have to persuade my senior when i say i want to use MUI. Then how can i prove that the performance will not be affected? It feels like styling with the tools that you explained about makes my speed up but i need to download all those things. Then it naturally can make my code heavier i guess. Thank you in advance!
@pawekoaczynski4505
@pawekoaczynski4505 Жыл бұрын
I don't understand why css modules very low on the list, while styled components are near the top. It might be a little bit annoying to some people that you have to keep you CSS in a separate file. But I don't think it's that big price to pay for performanc A big downside of styled components is speed - there's a Medium blogpost from a maintainer of Emotion where he says performance is the reason why his team is switching from Emotion to css modules. The article is called "Why We're Breaking Up with CSS-in-JS"
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️..
@amitneuhaus2989
@amitneuhaus2989 Жыл бұрын
You should check Mantine
@ianmostar2474
@ianmostar2474 Жыл бұрын
Imo Tailwind fow the W: No need to look to documentation, memorize properties and peek to references/docs. In Tailwind you just need to familiarize to the class names and that's it, CSS is the base knowledge. What also great is you can always start and modify your starting theme settings.
@velkb228
@velkb228 9 ай бұрын
1:25 such a distinguished argument, I totally agree
@ozzyfromspace
@ozzyfromspace Жыл бұрын
NextJS Typescript + Tailwind = PARADISE 🏆🎊
@mr-pony
@mr-pony Жыл бұрын
What about ant design?
@ronaldmorales6358
@ronaldmorales6358 Жыл бұрын
What do you think about PrimeReact?
@angelojimmy1
@angelojimmy1 Жыл бұрын
I always use SASS BEM is that a weird choice?
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆..
@dangis2400
@dangis2400 Жыл бұрын
MUI is not so great, components weigh A LOT, so it has a huge impact on slower connections
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️..
@GGGGGGGGGG96
@GGGGGGGGGG96 Жыл бұрын
I don't know, but Styled-Component or Modular CSS-Exports has nothing to do with UI-Frameworks, these are completely different things. With a UI-Framework you get components out of the box, with Styled-Component and Modular CSS-Exports you build your own UI.
@ritsu133
@ritsu133 Жыл бұрын
Also Tailwind isn't UI Framework too, it's an utility css framework.
@GGGGGGGGGG96
@GGGGGGGGGG96 Жыл бұрын
@@ritsu133 yes, Tailwind for me is like writing inline styles but with class-names 😅
@Fatima-ie5kj
@Fatima-ie5kj Жыл бұрын
Where's mantine in list 👀😐
@cpmcmanaman
@cpmcmanaman Жыл бұрын
Argghhh! Just learned Styled Components. Now you sold me on Tailwind. You are too convincing!!
@nanonkay5669
@nanonkay5669 Жыл бұрын
Mantine. Absolutely Mantine is what you need. It's Perfection
@whizzbang7520
@whizzbang7520 Жыл бұрын
Glad that I found a framework that I like with Tailwind
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆..
@ilanaghe
@ilanaghe Жыл бұрын
have you tried semantic-ui ?
@alvarocastillocorrea2610
@alvarocastillocorrea2610 Жыл бұрын
Nice video Ed! 🙌🏻 I was using Chakra UI for a long time, since I discovered Radix UI and Stitches. 👌🏻
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️...
@roaringpain3250
@roaringpain3250 Жыл бұрын
I also very much recommend Headless UI and Radix UI
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️...
@zlackbiro
@zlackbiro Жыл бұрын
Perfection is SCSS and mixins. You can kill me now, but i am fast as hell inside. Until you investigate docs, copy and paste something from mui or tailwind, i can create my own layout and write scss for it. 🙂
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️.
@xnetwork7691
@xnetwork7691 Жыл бұрын
Hey you forgot about Mantine. I think it's a really good alternative to MaterialUI
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️..
@fabianpetersen2452
@fabianpetersen2452 Жыл бұрын
You dont have to change the elements with styled components. I wrap the whole component in a wrapper and you are good to go e.g const Wrapper = styled.div `` then wrap your component
@davideyt1242
@davideyt1242 Жыл бұрын
As someone who "been there done that" since the days of no frameworks and very little options, and gradually graduated into the world of today where beautiful frameworks and components exist, with almost endless ways to style and shape a web application, having worked for all shapes and sizes of companies and was involved with many multi million dollar projects - I must say MUI is ABSOLUTELY NOT a "new bootstrap" - whoever seriously think like that must have been a KZbinr more time than he wrote code. sorry to be frank. it's almost like saying Swift is a new version of Java. Comparing MUI to any revision of Bootstrap is almost like comparing a Porsche GTR to a Honda Civic
@prateekbhardwaj9943
@prateekbhardwaj9943 4 ай бұрын
i want to start with ONE.. i got headache when i started analysing 3000 react ui frameworks..
@Flo_Motion
@Flo_Motion Жыл бұрын
Don't forget Mantine, ANT design, & Radix UI, :D
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️.
@kisho2679
@kisho2679 10 ай бұрын
how do they compete with Bootstrap?
@nicolastroplent9920
@nicolastroplent9920 Жыл бұрын
how do you implement the javascript components chakra UI provides with tailwind?
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️
@antonpieper
@antonpieper Жыл бұрын
My tiers: S: SCSS Modules + CSS Variables A: MUI, React Bootstrap, Chakra F: everything else for various reasons Except Tailwind, I cannot rank it as I didn't try it yet. I don't get the hype around utility classes only approach, I like to kind of separate my styles from my layout.
@user-dz6zd9zk2f
@user-dz6zd9zk2f Жыл бұрын
Try tailwind . Its gonna make your productivity 10x
@WickramarangaAbeygunawardhana
@WickramarangaAbeygunawardhana Жыл бұрын
Try radix UI too. Radix UI is complementary to tailwind or styled components etc. Ant design also has their base components as `react-components` . There's the Next UI too. It's new.
@nico1337
@nico1337 Жыл бұрын
Mantine is missing
@rahelmhammad
@rahelmhammad Жыл бұрын
VS Code theme?
@PhillipLippi
@PhillipLippi Жыл бұрын
I don't like Tailwind, specially for larger projects...It just seems not right doing "CSS inline" , it's hard to maintain it's kinda "pollute". I'd rather choose Styled-Components or SaaS over Tailwind. my opinion: Work with styles in different files. I really like the SFC (Single File Component) concept. It separates javascript logic from style, e. g Vue.js
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆..
@archis3
@archis3 Жыл бұрын
Bootstrap also has tailwind style css utility classes.
@akiodetimothy3193
@akiodetimothy3193 Жыл бұрын
Hello Eddy (If that's your name😅😅), Thanks for the video. One question, can tailwind be used for react native applications for mobile app development?
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆..
@imkir4n
@imkir4n Жыл бұрын
Just use mui along with the tailwind css.. New power unlocked 🔥🔓
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆..
@ScadooshGoat
@ScadooshGoat Жыл бұрын
15:33 It would be great if you could make a new custom class that is just made up of tailwind class names.
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️.
@_tanzil_
@_tanzil_ 2 ай бұрын
Soon I'm gonna start learning material UI
@codeWithSyam
@codeWithSyam Жыл бұрын
I am often using the the framework of CSS or even react css module, it just depends the necessary when we code
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️.
@vladislaviy
@vladislaviy Жыл бұрын
thank you mate! really helpful!
@ravidubey6817
@ravidubey6817 4 ай бұрын
I heard about Shadcn/ui being amazing? What about it?
@hatem.tommy.lamine
@hatem.tommy.lamine Жыл бұрын
Great vid my guy
@abutahermuhammad4827
@abutahermuhammad4827 Жыл бұрын
What do you think of Antd?
@amitatlp
@amitatlp Жыл бұрын
Just switch the position of CSS Module and styled components
@vinihvc
@vinihvc Жыл бұрын
Chakra UI is perfection for me
@CristianKirk
@CristianKirk Жыл бұрын
"Programmers don't want to become designers.They'd prefer reusing everything than dealing with design. Programmers are so, like, anti-anything that has to do with art. They would almost never want to deal with this amount of detail. They don't want to do that. They'd rather just reuse components. The problem with components is that is going to be for you so hard to customize them, you'll be spending all your time trying to customize something. It can take days and months and years. And that's because they're trying to customize something that was a terrible idea in the first place with all the types and components, the compilation, the millions of files. If you think in terms of using just the core languages, you won't have that problem, but know that you will have to deal with art, you will have to deal with design. Web developement is about design." -Shai UI.
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️.
@sk_jay
@sk_jay Жыл бұрын
After using react for a while made realize how much I love Vue and svelte
@JEsterCW
@JEsterCW Жыл бұрын
I don't really like svelte, cant get it. Vue is fine, but i dont really like composition api even tho its amazing change for larger apps. React is still the most flexible, opened and freedom like tool for frontend. If anybody needs structure will pick up angular anyways lmao. Solid is fixing all react problems and dx aspects. Vue is my the most fav framework from the top 4 most popular ones, but still i pref using alpinejs for putting interactivity into my app, but for more business products/projects its better to pick vue or anything else.
@gonewild7386
@gonewild7386 Жыл бұрын
You can use the shortcut to edit similar styles all at once on tailwind.
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️.
@chethiyakd
@chethiyakd Жыл бұрын
The most painful thing I face with css modules is that I can’t use “.class-name” shortcut in vs code
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️..
@the_alpha_phoenix
@the_alpha_phoenix Жыл бұрын
Hey does MUI works with Next 13, anyone to clarify for me. Thanks 💪🏾
@kurwacherry
@kurwacherry 4 ай бұрын
never tried materialUI, however I think its because once i started using tailwindcss I knew this was the one! Also I hate using styled components
@ranasaani
@ranasaani Жыл бұрын
Nice instructions
@TechBuddy_
@TechBuddy_ Жыл бұрын
The thing is we are basically spoiled by tailwind and don't want to use anything else lol 😂
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️..
@ravenMK_
@ravenMK_ Жыл бұрын
As a full stack developer struggling with building a good frontend page, I totally agree with your ratings. MUI and tailwind. The best I have seen. Heard Mantine is beautiful. I'd just say that's another MUI framework.
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️..
@alexotoous
@alexotoous Жыл бұрын
In-line styling for perfection!
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆..
@eyobsamuel8722
@eyobsamuel8722 Жыл бұрын
Where is Antd?
@esquilo_atomico
@esquilo_atomico Жыл бұрын
perfect: tailwind, css modules, styled components amazing: good: material ui ok...: bootstrap cmon: react inline css just another framework: chakra
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️...
@kamalsomani285
@kamalsomani285 10 ай бұрын
you should make a new video for latest 2024 ..Radix UI, Headless UI and many more
@bn5055
@bn5055 Жыл бұрын
Tailwind is the 🐐
@ToadyEN
@ToadyEN Жыл бұрын
You can use styled components with next 13, just not within server components.
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
Questions can come in⬆️⬆️...
UI Libraries Are Dying, Here's Why
13:28
Theo - t3․gg
Рет қаралды 321 М.
Why I Pick ShadCN and Tailwind for all my projects
18:53
developedbyed
Рет қаралды 75 М.
When u fight over the armrest
00:41
Adam W
Рет қаралды 32 МЛН
7 ways to deal with CSS
6:23
Fireship
Рет қаралды 1,1 МЛН
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 981 М.
Unstyled Component Libraries Are A Game Changer
12:07
Web Dev Simplified
Рет қаралды 278 М.
This UI component library is mind-blowing
8:23
Beyond Fireship
Рет қаралды 716 М.
JavaScript Framework Tier List
40:57
Theo - t3․gg
Рет қаралды 369 М.
Why you should use Component Libraries
11:00
James Perkins
Рет қаралды 22 М.
This React UI Library is GAME CHANGER!
18:13
developedbyed
Рет қаралды 534 М.
Publishing Your Resume with GitHub
29:06
Steven Gsell
Рет қаралды 56
Top 6 React Hook Mistakes Beginners Make
21:18
Web Dev Simplified
Рет қаралды 581 М.