Rating The Most Popular React UI Frameworks 

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.

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!

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 🔥

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

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 🙂

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

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

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

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

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

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?

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 🤣

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

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

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.

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!

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.

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

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

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.

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

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

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.

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

thank you mate! really helpful!

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!

Where is Ant design?

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

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

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

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

Great vid my guy

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.

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.

Watching ur animation course it really good

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

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.

Bootstrap also has tailwind style css utility classes.

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?

1. Chakra-ui 2. Tailwind

You should check Mantine

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

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

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

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.

I am often using the the framework of CSS or even react css module, it just depends the necessary when we code

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

1:25 such a distinguished argument, I totally agree

Thanks for your videos

Thanks Ed!

Great video, I love Tailwindcss. can you do a video about JavaScript Frameworks, it would be great. Thank you for the video 😄

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

NextJS Typescript + Tailwind = PARADISE 🏆🎊

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

Glad that I found a framework that I like with Tailwind

Mantine and Mantine UI is top tier

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

Nice instructions

Yo may use so you may easy to separate styled component and component

Started learning Chakra UI, and wondering why it is not the most popular yet. Note: I have already used MUI, Tailwind, Bootstrap, Styled Components.

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.

how do you implement the javascript components chakra UI provides with tailwind?

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"

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.

I also very much recommend Headless UI and Radix UI

Hi Ed, you should take a look to nextui I think you would love that style!!

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. 🙂

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.

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

I never tried tailwind but I think I'll do it. though the main thing I hate about bootstrap and more about tailwind is it makes code more difficult to read because of so many classNames.

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

I hope you added Mantine UI

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

You can use styled components with next 13, just not within server components.

Where is mantine???

I like a lot css modules with classnames package to give more dynamic styles for apps To develop a component library I like styled-components, I've been using emotion.js for this

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

u going down here son haha love it

15:33 It would be great if you could make a new custom class that is just made up of tailwind class names.

Do a video for the IDE shortcuts please🥹

Well explained

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.

"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! :)

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 RU-vidr 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

have you tried semantic-ui ?

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

Yes, please make a video on javascript frame works

Mantine and AntD deserve more love

I think all framework and CSS tools. Has PROS and CONS itself that I ever used before. Like I use MUI. We need to modify/custom component that makes a lot of todos. When I use tailwinds. We need to create a lot of components. and We need undestrand CSS itself. When I use bootstrap. We need integrated JS from bootstrap and modify CSS also. Bythe way I like your videos. Thank you

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

Mantine is missing

I always use SASS BEM is that a weird choice?

Hey does MUI works with Next 13, anyone to clarify for me. Thanks 💪🏾

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

Just switch the position of CSS Module and styled components

What do you think about PrimeReact?

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

satisfactory video.. I love tailwind too. I would say it's a game changer in styling web apps.. anyway, I wanna know where you would put ant design, because it has quite comprehensive components

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

In-line styling for perfection!