Rating The Most Popular React UI Frameworks
HTML-код
- Опубликовано: 28 май 2024
- BLACK FRIDAY SALE 40% OFF ALL COURSES 🔥🔥🔥
developedbyed.com/
USE COUPON: BF40
Which one is your favourite React UI Framework? I'll be ranking the top most popular React UI Libraries out there and give you my thoughts on them.
Remember, it always comes down to preference...none of these frameworks are objectively better than the other one.
Libraries covered in this episode:
React Inline Styling
React CSS Modules
Material UI
Tailwind CSS
Grommet
Chakra UI
React Bootstrap
Styled Components
Chapters:
Intro 0:00
Inline Styling 0:50
CSS Modules 2:35
Styled Components 5:35
Grommet 8:23
React Bootstrap 9:40
Material UI 11:32
Tailwind 13:28
Chakra UI 17:55
🛴 Follow me on:
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#coding #react 
Наука
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.
Mui also has dark-mode support
@@ajithav2011 and chakra
and arbitrary variants 🔥
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.
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$
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 🔥
but you'd have to repeat the selector over and over again to n number of properties that you want its children to have.
@@magnacarta7045 sadly yes, hopefully they make the selector reusable
or you can make a css class and then apply all these tailwind classes
.custom-h1 {
@apply p-3 text-lg bg-red-500
}
@@eneadriancatalin jesus that looks bad. please no tailwind in a regular css
You could also make a component and apply the tailwind classes there.
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!
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 🙂
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
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.
@@magnacarta7045 And why should it be a huge issue?
@@matizbrave repetitiveness of course. If you'd heard about DRY principle this should be a big issue for you.
@@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.
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).
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
you would need to specify breakpoints right?
I agree with you reasoning, another framework very similar to Material UI is Mantine
I love Mantine! I have been using it in 3 projects.
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
lol
is it better tha mui and tailwind?
Yes it is
@@houssammrabet4438 half the ui libraries out there are better than mui lol
@@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.
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.
Questions can come in⬆️⬆️...
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
What do you mean by additional runtime size and cost? Can you provide an example?
Where is Ant design?
At the very VERY top
It is beyond perfect
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?
I believe styled components are cool, because you can inherit styles, pass props etc.
@aiknersisian is that similar to a scss modules ?
@@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.
Emotion/css. Simply inline css. Problem solved.
Definetly agree, thats how I do
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.
Nice video Ed! 🙌🏻 I was using Chakra UI for a long time, since I discovered Radix UI and Stitches. 👌🏻
Questions can come in⬆️⬆️...
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.
You forgot it man, Well I do that I place ANTD above perfection 🔥
Haha really 🌚
it should be in this list
Couldn't agree more
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!
@@slatanek For your info, tailwindcss is still just CSS...
But this still without the mental overhead of switching between files just to style stuff
Tailwind developers can use custom values for class, such as p-[15px] bg-[#ffd700] text-[red] rotate-[15deg] etc...
I think Chakra UI, Mantine, and Mui are perfect solutions for full-stack devs, who do not like to write CSS :)
I am currently learning Material UI so far enjoying the learning.
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.
Learning phase of MUI
Enjoy ---> Cry ---> Hate MUI
@@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
Wait until you get to the "I just want to adjust this tiny part of the component" bit...
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".
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.
True
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
1. Chakra-ui
2. Tailwind
thank you mate! really helpful!
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...
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.
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 🤣
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.
god like feeling
I have tried it before
Especially MUI date pickers
Conclusion: MUI === Flutter UI
Look more into Chakra and building themable components. It's where it really shines over something like styled comps
Questions can come in⬆️⬆️..
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!
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
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.
Watching ur animation course it really good
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
I totally agree with that. I spend more reading the documentation of about its API, especially the props.
this^
It's still another syntax to learn. Why? When you know css already?
Bootstrap also has tailwind style css utility classes.
You should check Mantine
1:25 such a distinguished argument, I totally agree
After using react for a while made realize how much I love Vue and svelte
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.
Mantine and Mantine UI is top tier
it's beyond perfection
This^ for UI libs, and the amounts of hooks mantine is providing is amazing
@@JEsterCW Mantine ui is a ui library
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?
@@Saradomin65 Docs are great. You can join their discord channel for any help that you need
NextJS Typescript + Tailwind = PARADISE 🏆🎊
Let us know what you think of Mantine UI and Next UI
🌟DM for help/support👆..
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.
Where's Mantine? The BEST ui library for react by far imo.
Questions can come in⬆️⬆️..
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.
Questions can come in⬆️⬆️.
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
I agree so much with everything. I am glad you took the time to write this comment, so I don’t have to!
Great vid my guy
I am often using the the framework of CSS or even react css module, it just depends the necessary when we code
Questions can come in⬆️⬆️.
how do you implement the javascript components chakra UI provides with tailwind?
Questions can come in⬆️⬆️
I also very much recommend Headless UI and Radix UI
Questions can come in⬆️⬆️...
Glad that I found a framework that I like with Tailwind
🌟DM for help/support👆..
You can use the shortcut to edit similar styles all at once on tailwind.
Questions can come in⬆️⬆️.
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.
Thanks for your videos
Just use mui along with the tailwind css..
New power unlocked 🔥🔓
🌟DM for help/support👆..
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
Questions can come in⬆️⬆️
Nice instructions
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.
notistack it with any styled toast it is way better
this is not true mui has stacked toasts
@@jocobogdanovic560 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
@@fave1201 there is one , i cannot provide links but check the components section under snackbar
Hey does MUI works with Next 13, anyone to clarify for me.
Thanks 💪🏾
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?
🌟DM for help/support👆..
Thanks Ed!
How the screenreaders react to styled components? Did they recognize H1Style as h1?
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"
Questions can come in⬆️⬆️..
Great video, I love Tailwindcss. can you do a video about JavaScript Frameworks, it would be great. Thank you for the video 😄
🌟DM for help/support👆..
Hi Ed, you should take a look to nextui I think you would love that style!!
Questions can come in⬆️⬆️...
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
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 RUclipsr 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
Don't forget Mantine, ANT design, & Radix UI, :D
Questions can come in⬆️⬆️.
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. 🙂
Questions can come in⬆️⬆️.
Started learning Chakra UI, and wondering why it is not the most popular yet. Note: I have already used MUI, Tailwind, Bootstrap, Styled Components.
Why do you like it so much? I'm a fan of tailwind but I'd like to try Chakra too
prop based styles are the bees knees
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.
Try tailwind . Its gonna make your productivity 10x
"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! :)
Questions can come in⬆️⬆️.
Yo may use so you may easy to separate styled component and component
Questions can come in⬆️⬆️...
You can use styled components with next 13, just not within server components.
Questions can come in⬆️⬆️...
Where is mantine???
I like how you name the "cmon tier", lol.
I hope you added Mantine UI
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.
Also Tailwind isn't UI Framework too, it's an utility css framework.
@@c7rsed118 yes, Tailwind for me is like writing inline styles but with class-names 😅
have you tried semantic-ui ?
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.
Questions can come in⬆️⬆️.
well, you can set a real "className" inside the className to identify the elements, it won't affect the Tailwind classes
Do a video for the IDE shortcuts please🥹
You should have titled as " styling framework for React" to be more specific. Thanks for your amazing efforts, god bless you.
Questions can come in⬆️⬆️...
Hey you forgot about Mantine. I think it's a really good alternative to MaterialUI
Questions can come in⬆️⬆️..
Well explained
Mantine and AntD deserve more love
Yes, please make a video on javascript frame works
Questions can come in⬆️⬆️.
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
Questions can come in⬆️⬆️
cmon
Just switch the position of CSS Module and styled components
Mantine is missing
Chakra UI is perfection for me
you should make a new video for latest 2024 ..Radix UI, Headless UI and many more
MUI is not so great, components weigh A LOT, so it has a huge impact on slower connections
Questions can come in⬆️⬆️..
15:33 It would be great if you could make a new custom class that is just made up of tailwind class names.
Questions can come in⬆️⬆️.
how do they compete with Bootstrap?
keeping chakra in good and mui in perfection, this guy is a disaster.
"I don't like camelCase, this isn't Egypt biatch" (Ed, 2022)
I always use SASS BEM is that a weird choice?
🌟DM for help/support👆..
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
Questions can come in⬆️⬆️..
14:25 five what ? apples ? potatoes ? xD :D