Rating The Most Popular React UI Frameworks

[@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]

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]

@@magnacarta7045 sadly yes, hopefully they make the selector reusable

[@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]

@@eneadriancatalin jesus that looks bad. please no tailwind in a regular css

[@jdratlif]

You could also make a component and apply the tailwind classes there.

[@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]

Mui also has dark-mode support

[@prestonjudearnold2814]

@@ajithav2011 and chakra

[@nivethan_me]

and arbitrary variants 🔥

[@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]

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$

[@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!

[@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]

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]

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]

@@magnacarta7045 And why should it be a huge issue?

[@magnacarta7045]

@@cwirus99 repetitiveness of course. If you'd heard about DRY principle this should be a big issue for you.

[@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.

[@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]

you would need to specify breakpoints right?

[@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]

I believe styled components are cool, because you can inherit styles, pass props etc.

[@TheCJCsoccer]

@aiknersisian is that similar to a scss modules ?

[@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]

Emotion/css. Simply inline css. Problem solved.

[@tomaslanda1317]

Definetly agree, thats how I do

[@cpmcmanaman]

Argghhh! Just learned Styled Components. Now you sold me on Tailwind. You are too convincing!!

[@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]

lol

[@houssammrabet4438]

is it better tha mui and tailwind?

[@SogMosee]

Yes it is

[@Zephury]

@@houssammrabet4438 half the ui libraries out there are better than mui lol

[@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.

[@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]

What do you mean by additional runtime size and cost? Can you provide an example?

[@jaxuys]

I agree with you reasoning, another framework very similar to Material UI is Mantine

[@royz_1]

I love Mantine! I have been using it in 3 projects.

[@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).

[@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

[@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...

[@c7rsed118]

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.

[@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]

Questions can come in⬆️⬆️...

[@aashayamballi]

Where is Ant design?

[@oussamaghrib4558]

At the very VERY top

[@chaobanh5003]

It is beyond perfect

[@AndriusLau]

I think Chakra UI, Mantine, and Mui are perfect solutions for full-stack devs, who do not like to write CSS :)

[@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 🤣

[@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.

[@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]

@@slatanek For your info, tailwindcss is still just CSS... But this still without the mental overhead of switching between files just to style stuff

[@praveenvinopv9929]

You forgot it man, Well I do that I place ANTD above perfection 🔥

[@imkir4n]

Haha really 🌚

[@mhasancoder]

it should be in this list

[@andygarvin6991]

Couldn't agree more

[@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.

[@kiisifelix2769]

god like feeling I have tried it before Especially MUI date pickers Conclusion: MUI === Flutter UI

[@mr-pony]

What about ant design?

[@daisywayy443]

I am currently learning Material UI so far enjoying the learning.

[@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.

[@heyjitendra]

Learning phase of MUI Enjoy ---> Cry ---> Hate MUI

[@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]

Wait until you get to the "I just want to adjust this tiny part of the component" bit...

[@khakcsar]

Where is mantine???

[@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".

[@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]

True

[@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

[@omaralhendi137]

Let us know what you think of Mantine UI and Next UI

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆..

[@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.

[@velkb228]

1:25 such a distinguished argument, I totally agree

[@amitneuhaus2989]

You should check Mantine

[@tim.bogdanov]

Mantine and Mantine UI is top tier

[@rishabsharma5307]

it's beyond perfection

[@JEsterCW]

This^ for UI libs, and the amounts of hooks mantine is providing is amazing

[@tim.bogdanov]

@@JEsterCW Mantine ui is a ui library

[@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]

@@Saradomin65 Docs are great. You can join their discord channel for any help that you need

[@matthewchukwu1306]

1. Chakra-ui 2. Tailwind

[@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]

I agree so much with everything. I am glad you took the time to write this comment, so I don’t have to!

[@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]

I totally agree with that. I spend more reading the documentation of about its API, especially the props.

[@JEsterCW]

this^

[@slatanek]

It's still another syntax to learn. Why? When you know css already?

[@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

[@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]

Questions can come in⬆️⬆️.

[@alvarocastillocorrea2610]

Nice video Ed! 🙌🏻 I was using Chakra UI for a long time, since I discovered Radix UI and Stitches. 👌🏻

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️...

[@orielvinciabsin3371]

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.

[@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]

Questions can come in⬆️⬆️.

[@awedsa7004]

Tailwind developers can use custom values for class, such as p-[15px] bg-[#ffd700] text-[red] rotate-[15deg] etc...

[@ChristofferLund]

Where's Mantine? The BEST ui library for react by far imo.

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️..

[@wrux]

Look more into Chakra and building themable components. It's where it really shines over something like styled comps

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️..

[@_tanzil_]

Soon I'm gonna start learning material UI

[@Flo_Motion]

Don't forget Mantine, ANT design, & Radix UI, :D

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️.

[@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]

Questions can come in⬆️⬆️..

[@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]

notistack it with any styled toast it is way better

[@joleDEV]

this is not true mui has stacked toasts

[@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]

@@fave1201 there is one , i cannot provide links but check the components section under snackbar

[@prateekbhardwaj9943]

i want to start with ONE.. i got headache when i started analysing 3000 react ui frameworks..

[@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

[@Kajdjewo]

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!

[@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]

Why do you like it so much? I'm a fan of tailwind but I'd like to try Chakra too

[@SogMosee]

prop based styles are the bees knees

[@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]

Questions can come in⬆️⬆️.

[@nico1337]

Mantine is missing

[@ozzyfromspace]

NextJS Typescript + Tailwind = PARADISE 🏆🎊

[@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.

[@c7rsed118]

Also Tailwind isn't UI Framework too, it's an utility css framework.

[@GGGGGGGGGG96]

@@c7rsed118 yes, Tailwind for me is like writing inline styles but with class-names 😅

[@leoli2470]

I like how you name the "cmon tier", lol.

[@AndreTavares-hl6sg]

"I don't like camelCase, this isn't Egypt biatch" (Ed, 2022)

[@ronaldmorales6358]

What do you think about PrimeReact?

[@imkir4n]

Just use mui along with the tailwind css.. New power unlocked 🔥🔓

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆..

[@roaringpain3250]

I also very much recommend Headless UI and Radix UI

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️...

[@dangis2400]

MUI is not so great, components weigh A LOT, so it has a huge impact on slower connections

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️..

[@rahelmhammad]

VS Code theme?

[@collenbroombirk3687]

keeping chakra in good and mui in perfection, this guy is a disaster.

[@nonstopper]

Mantine and AntD deserve more love

[@TechBuddy_]

The thing is we are basically spoiled by tailwind and don't want to use anything else lol 😂

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️..

[@vitalino1981]

How the screenreaders react to styled components? Did they recognize H1Style as h1?

[@whizzbang7520]

Glad that I found a framework that I like with Tailwind

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆..

[@alesholman801]

14:25 five what ? apples ? potatoes ? xD :D

[@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.

[@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]

Questions can come in⬆️⬆️.

[@kamalsomani285]

you should make a new video for latest 2024 ..Radix UI, Headless UI and many more

[@vladislaviy]

thank you mate! really helpful!

[@amitatlp]

Just switch the position of CSS Module and styled components

[@rorn-dev]

sir you forgot Ant Design it nice design 😁😁🤩🤩

[@Fatima-ie5kj]

Where's mantine in list 👀😐

[@shanonymousmc9777]

He really said "bootstrap === jQuery in 2023" 💀 LMAO. He ain't wrong.

[@ravidubey6817]

I heard about Shadcn/ui being amazing? What about it?

[@kisho2679]

how do they compete with Bootstrap?

[@Tommy-and-Ray]

Great vid my guy

[@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]

🌟DM for help/support👆..

[@nanonkay5669]

Mantine. Absolutely Mantine is what you need. It's Perfection

[@user-mp9zn6zi7z]

I hope you added Mantine UI

[@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]

Try tailwind . Its gonna make your productivity 10x

[@jeetray11]

I am brand new into any type of frontend work and react. So my comment need to be seen from that context. You put react-bootstrap in the lowest but one category. is it because the UI look is so familiar. But think about it, if you hear Mozart's 40th symphony for the first time it is jaw-dropping good but you hear it for the 1000th time it is below Okay. But that is your mind's nature - nothing wrong with the composition. I wanted to pick up a easy framework that has community support and that is easy to use so I can focus on my app logic and not worry about CSS much. Your comment is now making me give it 2nd thoughts. I think it was unfair unless you can list more points other than its bootstrap type look as to why it is not so good. Thanks.

[@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.

[@fantasyplanet480]

Hello can you make a live streaming app like twitch tv using mern stack and key stream for every streamer to connect with obs ? Thanks

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️

[@angelojimmy1]

I always use SASS BEM is that a weird choice?

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆..

[@archis3]

Bootstrap also has tailwind style css utility classes.

[@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

[@xnetwork7691]

Hey you forgot about Mantine. I think it's a really good alternative to MaterialUI

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️..

[@sk_jay]

After using react for a while made realize how much I love Vue and svelte

[@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.

[@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]

🌟DM for help/support👆..

[@deoarlo]

0:00 adinture baut skinipapa pa pipowl

[@gonewild7386]

You can use the shortcut to edit similar styles all at once on tailwind.

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️.

[@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]

Questions can come in⬆️⬆️.

[@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]

Questions can come in⬆️⬆️.

[@josephchinemeremjerry3167]

I didn't see ant design

[@kirayamato6128]

ANT DESIGN IS STILL THE BEST.

[@JEsterCW]

lmao

[@LethalDamageGaming]

what about mantine?

[@josevsebastian2909]

Please don't use tailwind. Yes, it's fast, but like bootstrap, it defeats the purpose of using classes which is to separate out styling from the html, so that you can change the website theme and look and feel just by replacing the css for the classes and not touching the javascript and html. Also, complex styling will lead to a point where you just hate yourself for mixing styling with html. Just don't use it. You're better off doing vanilla css. At least you would have control over the styles. Also react built in css modules is actually quite good in that aspect that it's basically vanilla css encapsulated for easy use in react. Personally I use MUI, because it provides the same advantage as vanilla css for plug and play to switch out the implementation, but more advanced in that it's not just styling, it's a component library for react primarily, which has everything handled to make it consistent across all components. Like for instance, a date picker or a simple input field, use the same text field component underneath, so customisation can be consistent. I don't use the pre-styled components from mui too much anymore, but use the low styled base version with all javascript logic and css transitions and all and wrap it to create styled components themed specifically for my app with all the hardwork in styling and functionality already done by MUI

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆..