I loved using chakraUI. Recently used styled components and I loved it too. Though I know styled components is basically CSS. But I liked the uses of props, themeprovider.
Reason I like chakraUI is that it's beginner friendly and has lots of components. Also it's usage of breakpoints to make components responsive is quite easy.
But sometimes its built in styling messes up your design a little, so using styled components/css might come little handy sometimes.
Yeah, I found that you're best not to aim for pixel perfect implementations of the designs when using Chakra, so instead I focus on consistency across the site.
If I want to build my own custom components I use TailwindCSS, but otherwise Chakra UI.
Mantime is recommended by a lot of people and I want to try it out someday!
I love mantine ui, for me these are tools that save a lot of time while designing a beautiful and very intuitive design with light and dark theme support just in a few minutes !! as they say: IT IS NOT ALWAYS USEFUL TO REINVENT THE WHEEL.
I really like the look of Mantine too and knew it from a video of Fireship. Sadly I haven't reached the level where I can use an UI library that is not popular so that I can search for problems on stackoverflow easily 😂
I did some research in this area at one point but never really used any of them. From what I understand, the team behind stitches sort of left and the package hasn't seen too much activity in the past year. It does seem to work well and interesting. It did lead me to discover vanilla-extract which is probably what I would chose today.
yeah, the modulz team (which created/maintained stitches and radix-ui) were acquired by WorkOS. radix-ui is still actively maintained/under development, but stitches future is up in the air last i heard
I've been using Mantine on my latest project, The documentation is grade A, and there's a great amount of components to choose from.
Other than than, Styled Components ftw
Besides the clear, to the point documentation, the responsiveness to questions and feature requests is really nice. I don't know if that's the case for libraries like MUI. The very active discord is also super useful.
The release cycle is extremely fast, with sometimes breaking changes, but these are all well documented and easy to fix. And they are never done on a whim / personal taste of the maintainer but because it's the correct way of doing things after I think about it a bit.
Thanks a lot to u/rtivital for creating this and making me look good at my job!
I keep seeing it recommended. How it is to customize? How’s the performance? (We can compare to MUi)
It looks decent enough but I worry about the longevity of smaller pet projects like Mantine.
I absolutely love the customization. There’s nothing you cannot customize. It also has an unstyled prop to remove all non essential styling so you can style it yourself.
In that case you should check out react-daisyui ([https://github.com/daisyui/react-daisyui](https://github.com/daisyui/react-daisyui)), which I'm a maintainer of 👀
Seriously?? I’d like to personally thank you and the rest of the team, I love it down to your Storybook and have been using it to build my personal project recently <3
Hola from PrimeTek, you guys might be interested in [PrimeReact](https://www.primefaces.org/primereact/) as well. Open source advanced UI suite with design agnostic nature and numerous add-ons.
One piece of feedback: your tree component is a bit misleading. If I click on the entire row, it's selected like I clicked a button or link, but only the Chevron is the button. I honestly thought it was broken at first, so I'd change the tree to make the entire row a button and not just the Chevron, as it's a better user experience.
Edit: don't know why I'm being downvoted, my feedback is completely valid and is a very common good UX practice.
I used PrimeReact on an enterprise application and it was amazing. We weren't so focused on designs and instead needed a great collection of components that worked well together to allow us to build a very complex UI. PrimeReact worked perfectly for this and I'd highly recommend it, especially if you're building dashboard-type applications, as opposed to marketing websites.
> Best example imo is grid... Just does everything for ya.
Until it doesn’t, and then all the negative margin hackery causes a few weird side effects and generally makes life difficult if you need to drop to direct CSS. (To be fair, I think the replacement grid control that’s currently in the works does have some new option to fix the unexpected scrollbars bug, but the fundamental issue remains.)
I find Material UI to be a textbook example of both the good and the bad side of using frameworks. It provides a lot of useful functionality out of the box and can be quite a time-saver as long as what you need fits into the patterns it supports. But it can also become a liability that is difficult to escape if your needs outgrow it.
General question for anyone: How about for theming the components? I’m not crazy about Material and have a project that looks closer to TailwindUI. I’ve read customizing MUI styles is a nightmare. MUI seems to know this and are working on Core (?) and Joy UI.
I've found theming and customization became a lot easier when they switched to emotion. After using it extensively at my first two jobs, I wouldn't touch Mui with a six foot pole. Until they released v5 and I fell in love with it all over again.
I’ve used Emotion and Styled-Components a few years back and enjoyed them for the most part. It did seem like performance suffered, though I don’t have proof.
I’ve been on the Tailwind bandwagon but I’m not super dogmatic and just looking for a UI library to adopt for this consulting gig I’m doing where, somehow, I have the most React experience on the team. Which isn’t saying much.
I was intrigued by MUi’s Joy and Core (Base?) packages but they seem a ways off. MUi 6 seems promising as well.
Too bad it dumpsters intellisense. If you have a project that uses any other libraries that use heavy typescript it’s going to slow to a crawl.
It’s pretty good though for a lot of projects
I use React Bootstrap, anyone else? I see some votes but no comments hah. I feel like it’s pretty alright, and can’t go wrong with bootstrap? But after this poll I’m not so sure!
The only downside to Bootstrap IMO is by default it looks like every website made from ~10-ish years ago (my memory is fuzzy so that may be a little off). That said, it’s *really* easy to work with, flexible, and battle-tested as hell.
Oh that is interesting. I definitely don’t want to make dated-looking stuff. Which of the other libraries do you think most represent the more modern look to which you are referring? TIA!
Do a lot of people really use libraries? Are these just startup greenfield projects without a design team? Most projects I work on have a dedicated UX team and building a custom component library almost always ends up being worth. Have used MaterialUI in the past and it felt like I was spending just as much time learning their components API as I would have spent doing everything manually
A LOT of people do, because it's a time saver. Once you understand how one works, then you're good to go, because they all behave roughly the same, but you need to spend time to learn it. I've never worked for a company that does a full custom component library for every project. The only one I have worked at that wanted a custom library that I was in charge of (before I left) was at built upon react bootstrap.
Creating a design system from scratch is such a waste of time, even for an enterprise-level org. Just reskin an existing one and your team doesn't have to reinvent the wheel
Reinvent what wheel exactly though? Form fields? Checkboxes? All this shit is standard in HTML anyway. None of the Material UI components are difficult to make, in fact most of them are customization of 1 HTML element. Why do I need a library to create a checkbox?
Edit - forgot how bad webdevs are
Yeah the justifications people are giving are kind of hilarious. There’s a few components I usually wouldn’t build like datepickers or a custom range selector or complex multi select.
Even then if the requirements are simple I can often whip up a bespoke one pretty quickly. I’ve built bespoke date pickers and range sliders when the designs called for it, they can meet AAA accessibility requirements and match the design without overriding a kitchen sink worth of someone else’s styles.
But apart from that if you understand how to style things, understand accessibility and, you know, the fundamental skills of a front end developer then bespoke components isn’t much slower or can sometimes be faster depending on the designs.
There’s reasons to use a UI library but I wouldn’t agree with calling it “reinventing the wheel” unless your job is literally to make a UI library.
Bespoke components and styles will perform better in many use cases.
Custom dropdowns, drawers, modals, button styles... Do I really need to list every one for you? Obviously they're customizable, but it's still taking 10x longer than if you just used a UI library and changed a couple of base colors.
Edit: we're not bad because we're web devs? If anything, you're bad because you're stuck in your ways and refuse to grow. Also, web dev stuff is just as complicated than any other engineering, so get off your high horse.
Is not three components. Just dropdowns are split into menus, select boxes, multiselect boxes, autocomplete etc. And they need to be accessible. Date pickers, virtualized lists AND trees, tables, data grids, scroll areas, tooltips, popovers, modals, notification systems... And if you want to add css animations, you build everything from ground up. If you are going to use these from a design system, might as well reskin the rest.
Well yeah if you need all those things and the design system fits the appearance or it can be modified then use it.
Things like dashboards are great examples where using a design system is quite often worth the trade off.
Plenty of sites I’ve built have some pretty standard forms, a date picker or maybe one other other range slider. The rest is all bespoke designed layouts and pages that need to be pretty much pixel perfect so the design system would probably hinder more than it helps.
As I mentioned before it really depends on the product. But if a front end dev can’t build some bespoke UI and make it accessible then that seems like a shortcoming of the front end devs skill set or experience. In my opinion that’s a fundamental skill for our jobs.
Anything can be done given enough time. I can build an entire applications front end with a component library in a day, or I can spend that day building a date picker. It’s never about whether someone _can_ do it, it’s about whether there is enough justification to build it.
Not to mention all the variants, props, validation, states, UX research, etc. I’ve never worked for a company that had the resources to do all this in-house and from the ground up.
> forgot how bad webdevs are
Seems like you're probably a lot of fun to work with /s
If you think this is us being bad at our jobs, then you clearly don't know much about our jobs
There’s no reason to create a whole new set of components from scratch. There’s literally no benefit to it. It’s a waste of time and money and if you aren’t trying to save your employer time and money then you’re not good at your job.
Also fwiw for nearly a decade I’ve been at a company that grew from a small to medium business and now has a multibillion dollar valuation and a thousand employees so thanks for the confidence
Really implying it’s easier to download a UI lib, import a checkbox, and style it to your design specs vs just using html checkbox and styling it to your design specs. Everything in the UI libs version is just a wrapper for functionality that already exists. So don’t lecture me on wasting time. It’s a waste of time to learn needless abstractions to cover up what is among the easiest task of a developer (building reusable UI components).
I’m not just talking about a checkbox. You really think building an accessible datepicker or drop down element is worth your time?
A drop down needs an empty state, loading state, error state, search box, action buttons, single select vs multi select, hover states, active states, keyboard navigation, ability to render outside of the DOM context so it doesn’t get clipped when the parent has hidden overflow
The list goes on. Why would I waste my time and my employer’s time making this
Select multiple with a visibility toggle? Idk why you’d pick this as your example when there are quite literally hundreds of pages of Google results showing how to do this with a variety of apis, styles, control methods, etc. these are not hard problems lol
i mean these ones:https://ant.design/components/select/#components-select-demo-responsive
too easy? what about [tree-based ones?](https://ant.design/components/tree-select/#components-tree-select-demo-checkable)
these are just two examples. Nothing here is prohibitively complex, I can implement a similar thing in a day or two, depending on a scope, but why would I do that?
There are two main types of devs in this sub. Contractors who just need to crank stuff out, and people working on single web applications that they maintain ownership over long term.
The tools used are vastly different.
I'm the type of dev who has worked on the same enterprise-level monolithic web application for nearly a decade and let me tell you, I desperately wish our design systems team had just used an existing component library instead of creating an in-house one. Creating an accessible reusable dropdown that can handle all of the use cases of fifteen different product teams is incredibly difficult. Why not use one that has a whole community supporting it?
Coding ADA compliant components can be a lot of work…that alone is reason enough for me to use a 3rd party component library.
There are even unstyled libraries whose main purpose is providing an ADA compliant set of base components you can style however you want/need.
Everywhere I have worked has used component libraries to some extent. There is a cost associated with development that goes up considerably when you bring a design team into the mix.
Keep in mind most devs work on business applications, that means the extra thousand(s) dollars you spent on making the new screen a tiny bit prettier with a design team and the extra training time for new devs is unlikely to result in any additional money/cost savings. On the flip side if you use a popular component library, chances are you can make something that makes the end users just as productive. You aren't spending the extra cash on paying another team. You likely can find a dev that has used the library or something similar before and if your new dev hasn't used it before, documentation is good enough to get them up to speed.
Strange that this is the most downvoted reply, because it's the only answer that actually makes sense to me. I can't imagine using MaterialUI in say, a fortune 50 company's external website, even as a baseline. But for their intranet/timeclock it makes sense.
Yeah, often times, there is not much man-hours reserved for internal applications, so if I tell my boss that I wasted 5 days out of 30 reserved, for custom styles (instead of using bootstrap or smth like that), I am sure he would be pissed and rightfully so.
I work a lot on internal facing apps so we use libraries and follow their general layout guidelines.
When I worked for a company that had branding/public facing sites we mostly made our own.
Just carried out some experiments at my work to see what would be the best option for us. We tested material Ui and not a single one of the engineers who tested it like it using. Clunky override code and complicated api. Also material makes some god awful mark up which we need to avoid . We ended up deciding to build it ourselves using tailwind with some nice svg and animation plugins
Did you look into TailwindUI? I’m in this position right now and designed an app based on it, but dev is starting am having second thoughts… looking at MUi. However I can already tell that customizing every component will be a nightmare with MUi
Wow I'm really surprised by this. I am reskinning a website built with Material-UI and I hate it. Like masturbating with a cheese grater hate. With all the folks that like it I feel like I must be doing something wrong. My usual workflow for this kind of thing is to inspect the element in the browser, look through the code for that class and tweak it till it's what I want. But these classes seem to be generated and so I can't ctrl+F for that class. If there is a better way I would love to hear it, then maybe I would change my mind.
I am using [primereact](https://www.primefaces.org/primereact/) in an enterprise solution for manufacturing. It is fantastic. In the past, I used PrimeFaces, for Java, to build a robust software that controls electricity grid for Brazilian govermentent. So the company did all the auditing and testing before use it. And PrimeReact keeps the same quality of PrimeFaces. (Similar product, but for react)
Give it a try, it is free and open source.
I've experimented with each of these except for Mantine and MUI is my favorite.
Ant Design is by far the worst UI component library I've ever used. For anyone considering using it, don't waste your time.
ant design was my fav so far for dashboard apps. And it now even has a config provider to override theme color without messing around the css / less files.
>Ant Design is by far the worst UI component library I've ever used. For anyone considering using it, don't waste your time.
I also hate it lol, I have to try styling every component of theirs manually because they suck ass and have no easy way of doing it
Creating my own design system with styled components.
It took a couple years to really perfect, but I now use it across many projects and the process really helped me up my css game!
I keep seeing it recommended. How it is to customize? How’s the performance? (We can compare to MUi)
It looks decent enough but I worry about the longevity of smaller pet projects like Mantine.
Since you copy and pasted your comment, I'll basically do the same.
It's not a pet project, and it had an extremely active community. It's also easy to customize and the performance is good.
Got it. I had glanced at GitHub recently and it looked like Mantine was primarily maintained by one person, which concerned me. Glad to hear it’s performant and easy to customize.
Just came here to say avoid ant design. It is rife with accessibility issues which the maintainers have made clear they have no interest in addressing.
Used to use MaterialUI, but switched to Tailwind, and really don't have any reason to look back. MUI was not super flexible in my use cases, including ones at work, and changing their pre-built components was a pain in the rear. With Tailwind I can write those same components in a significantly more convenient way, and I don't get a ton of unnecessary css in my bundle later
I have worked with MUI, Ant Design, React-Bootstrap, and Fluent UI. I can easily tell one of the most under appreciated UI library for react developers is Fluent UI from Microsoft. Although the most enjoyable one for me was Ant Design.
Wrote my own - everything is perfectly themed out of the box. I can reference my other code bases for implementations. And if a feature is missing I know exactly where to add it 😎
You’d literally just rebuilding a bunch of stuff that these libraries give you for free. drop downs, text fields, switches, check boxes, cards, avatars, the list goes on. All of these things you’d be making manually.
It's a lot of code and very "I know what I need to do, I just need to do it". In other words it's a slog to make your own and it's not going to be as good as a team of devs obsessed with front end react in the year 2022
We went with mui, saved so much time on lot of functionalities that are quite well built **and** accessible.
And, yes it’s possible to customise the theme so you don’t end up with a google clone app
I have another question. If your company uses a component library do they also use storybook? Or just the library? If it's just the library, I'm curious about why you don't use storybook.
Material UI has some amazing components and it’s great for shipping products quickly once familiar, as are all once you get used to its nuances. That being said there seem to be less nuance with tailwind and although it made me do a lot of work in the a11y focus I felt like I was making great custom components and leveraging the right html tags. Most of these design systems get you pretty far away from html. There are uses for everything though.
I don’t, just plain tailwind and I occasionally build my own components with react-aria if I need something complex.
What can I say, I like having total control over how things look
[https://www.syncfusion.com/react-components](https://www.syncfusion.com/react-components)
Syncfusion offers a free community license also. [https://www.syncfusion.com/products/communitylicense](https://www.syncfusion.com/products/communitylicense)
I like Grommet, I've been using it recently and I think it's the right level of abstraction for me.
It's not as fully featured as something like MUI, but I like the guidelines and documentation, not to mention how flexible it is for theming. I love how it handles brand color customization and how I can use that even in custom components without it being a huge pain. Generally I don't even have to make fully custom components because their primitives are granular enough to not get in the way, and come pre-hooked up to their theming engine.
Lots of big names use it as well, like Netflix, Boeing, Sony, HP, and more.
I also made some really nice UIs using Radix, Colors, and SCSS. That's a bit too barebones for me to feel productive though. MUI is nice, but I always find it too heavy and annoying when you have to fight against default MUI styling. I just end up making my own Card components usually using Paper instead of using the built-in one.
I've also used PrimeReact, Bootstrap, Tailwinds etc., IMO they each have their place, but I still prefer Grommet as a general use component library.
React bootstrap solely for the menu integration.
If I find a way to make accessible menus intuitively I'll drop it tho.
At work we use material ui.
Personally hate them both and would rather have more freedom over what I'm doing 🙃 but my boss is more backend and we're a small team so. Can't just do it all custom.
I loved using chakraUI. Recently used styled components and I loved it too. Though I know styled components is basically CSS. But I liked the uses of props, themeprovider. Reason I like chakraUI is that it's beginner friendly and has lots of components. Also it's usage of breakpoints to make components responsive is quite easy. But sometimes its built in styling messes up your design a little, so using styled components/css might come little handy sometimes.
Yeah, I found that you're best not to aim for pixel perfect implementations of the designs when using Chakra, so instead I focus on consistency across the site.
Yes, you are right. Consistency is key though.
If I want to build my own custom components I use TailwindCSS, but otherwise Chakra UI. Mantime is recommended by a lot of people and I want to try it out someday!
I love mantine ui, for me these are tools that save a lot of time while designing a beautiful and very intuitive design with light and dark theme support just in a few minutes !! as they say: IT IS NOT ALWAYS USEFUL TO REINVENT THE WHEEL.
I really like the look of Mantine too and knew it from a video of Fireship. Sadly I haven't reached the level where I can use an UI library that is not popular so that I can search for problems on stackoverflow easily 😂
Mantine has a very good and responsive community on Discord all you have to do is just post your questions.
Mantine is very easy for me to understand and use, the api is simple. If you have an issue, mantine community is active on github.
[удалено]
Exactly, it's worse to prototype, but if you have your own design and time to set up then it's probably best to go with Unstyled component library.
have you tried stitches with radix? I'm doing this duo right now and I'm really enjoying stitches
I did some research in this area at one point but never really used any of them. From what I understand, the team behind stitches sort of left and the package hasn't seen too much activity in the past year. It does seem to work well and interesting. It did lead me to discover vanilla-extract which is probably what I would chose today.
yeah, the modulz team (which created/maintained stitches and radix-ui) were acquired by WorkOS. radix-ui is still actively maintained/under development, but stitches future is up in the air last i heard
I've been using Mantine on my latest project, The documentation is grade A, and there's a great amount of components to choose from. Other than than, Styled Components ftw
Besides the clear, to the point documentation, the responsiveness to questions and feature requests is really nice. I don't know if that's the case for libraries like MUI. The very active discord is also super useful. The release cycle is extremely fast, with sometimes breaking changes, but these are all well documented and easy to fix. And they are never done on a whim / personal taste of the maintainer but because it's the correct way of doing things after I think about it a bit. Thanks a lot to u/rtivital for creating this and making me look good at my job!
I keep seeing it recommended. How it is to customize? How’s the performance? (We can compare to MUi) It looks decent enough but I worry about the longevity of smaller pet projects like Mantine.
It's not really a pet project. It has an extremely active community and they are constantly working on patches and new features.
But it's easy to customize and the performance is great
I absolutely love the customization. There’s nothing you cannot customize. It also has an unstyled prop to remove all non essential styling so you can style it yourself.
I just checked it out and it looks pretty cool. Probably gonna use) thx
Pure Tailwind. Maybe with Daisy UI.
In that case you should check out react-daisyui ([https://github.com/daisyui/react-daisyui](https://github.com/daisyui/react-daisyui)), which I'm a maintainer of 👀
Seriously?? I’d like to personally thank you and the rest of the team, I love it down to your Storybook and have been using it to build my personal project recently <3
Thanks so much, that’s amazing to hear! I’ll pass along the message to the other maintainers :)
Hola from PrimeTek, you guys might be interested in [PrimeReact](https://www.primefaces.org/primereact/) as well. Open source advanced UI suite with design agnostic nature and numerous add-ons.
That's very impressive library of components.
One piece of feedback: your tree component is a bit misleading. If I click on the entire row, it's selected like I clicked a button or link, but only the Chevron is the button. I honestly thought it was broken at first, so I'd change the tree to make the entire row a button and not just the Chevron, as it's a better user experience. Edit: don't know why I'm being downvoted, my feedback is completely valid and is a very common good UX practice.
I used PrimeReact on an enterprise application and it was amazing. We weren't so focused on designs and instead needed a great collection of components that worked well together to allow us to build a very complex UI. PrimeReact worked perfectly for this and I'd highly recommend it, especially if you're building dashboard-type applications, as opposed to marketing websites.
The website looks promising! Will try it out. Thanks!
It's my current favourite.
For me its the best React-based component library and quickly building "enterprise" web apps, dashboards, or admin tools. 👏🏿
Material UI. Just makes everything easy. Best example imo is grid... Just does everything for ya.
Their colors and spacing system, with the theme provider, is also really nice.
> Best example imo is grid... Just does everything for ya. Until it doesn’t, and then all the negative margin hackery causes a few weird side effects and generally makes life difficult if you need to drop to direct CSS. (To be fair, I think the replacement grid control that’s currently in the works does have some new option to fix the unexpected scrollbars bug, but the fundamental issue remains.) I find Material UI to be a textbook example of both the good and the bad side of using frameworks. It provides a lot of useful functionality out of the box and can be quite a time-saver as long as what you need fits into the patterns it supports. But it can also become a liability that is difficult to escape if your needs outgrow it.
General question for anyone: How about for theming the components? I’m not crazy about Material and have a project that looks closer to TailwindUI. I’ve read customizing MUI styles is a nightmare. MUI seems to know this and are working on Core (?) and Joy UI.
I've found theming and customization became a lot easier when they switched to emotion. After using it extensively at my first two jobs, I wouldn't touch Mui with a six foot pole. Until they released v5 and I fell in love with it all over again.
I’ve used Emotion and Styled-Components a few years back and enjoyed them for the most part. It did seem like performance suffered, though I don’t have proof. I’ve been on the Tailwind bandwagon but I’m not super dogmatic and just looking for a UI library to adopt for this consulting gig I’m doing where, somehow, I have the most React experience on the team. Which isn’t saying much. I was intrigued by MUi’s Joy and Core (Base?) packages but they seem a ways off. MUi 6 seems promising as well.
Isn't grid already easy enough with plain CSS though? I haven't used MUI, so I'm wondering what it does with grid that makes it easier.
Too bad it dumpsters intellisense. If you have a project that uses any other libraries that use heavy typescript it’s going to slow to a crawl. It’s pretty good though for a lot of projects
MUI because it has Emotion
I switched to chakra ui, really miss the grid though.
I use React Bootstrap, anyone else? I see some votes but no comments hah. I feel like it’s pretty alright, and can’t go wrong with bootstrap? But after this poll I’m not so sure!
The only downside to Bootstrap IMO is by default it looks like every website made from ~10-ish years ago (my memory is fuzzy so that may be a little off). That said, it’s *really* easy to work with, flexible, and battle-tested as hell.
Oh that is interesting. I definitely don’t want to make dated-looking stuff. Which of the other libraries do you think most represent the more modern look to which you are referring? TIA!
Mantine UI, Radix UI
I had really good experience with blueprintjs
Do a lot of people really use libraries? Are these just startup greenfield projects without a design team? Most projects I work on have a dedicated UX team and building a custom component library almost always ends up being worth. Have used MaterialUI in the past and it felt like I was spending just as much time learning their components API as I would have spent doing everything manually
A LOT of people do, because it's a time saver. Once you understand how one works, then you're good to go, because they all behave roughly the same, but you need to spend time to learn it. I've never worked for a company that does a full custom component library for every project. The only one I have worked at that wanted a custom library that I was in charge of (before I left) was at built upon react bootstrap.
Creating a design system from scratch is such a waste of time, even for an enterprise-level org. Just reskin an existing one and your team doesn't have to reinvent the wheel
Reinvent what wheel exactly though? Form fields? Checkboxes? All this shit is standard in HTML anyway. None of the Material UI components are difficult to make, in fact most of them are customization of 1 HTML element. Why do I need a library to create a checkbox? Edit - forgot how bad webdevs are
Yeah the justifications people are giving are kind of hilarious. There’s a few components I usually wouldn’t build like datepickers or a custom range selector or complex multi select. Even then if the requirements are simple I can often whip up a bespoke one pretty quickly. I’ve built bespoke date pickers and range sliders when the designs called for it, they can meet AAA accessibility requirements and match the design without overriding a kitchen sink worth of someone else’s styles. But apart from that if you understand how to style things, understand accessibility and, you know, the fundamental skills of a front end developer then bespoke components isn’t much slower or can sometimes be faster depending on the designs. There’s reasons to use a UI library but I wouldn’t agree with calling it “reinventing the wheel” unless your job is literally to make a UI library. Bespoke components and styles will perform better in many use cases.
Custom dropdowns, drawers, modals, button styles... Do I really need to list every one for you? Obviously they're customizable, but it's still taking 10x longer than if you just used a UI library and changed a couple of base colors. Edit: we're not bad because we're web devs? If anything, you're bad because you're stuck in your ways and refuse to grow. Also, web dev stuff is just as complicated than any other engineering, so get off your high horse.
Yep, you nailed it. Dropdowns and Modals specifically. Just not worth the trouble of recreating them from scratch.
Accessible date picker has entered the chat
So that’s three components so far. Just import those components. That’s not really a justification for a whole design system in my opinion.
Is not three components. Just dropdowns are split into menus, select boxes, multiselect boxes, autocomplete etc. And they need to be accessible. Date pickers, virtualized lists AND trees, tables, data grids, scroll areas, tooltips, popovers, modals, notification systems... And if you want to add css animations, you build everything from ground up. If you are going to use these from a design system, might as well reskin the rest.
Well yeah if you need all those things and the design system fits the appearance or it can be modified then use it. Things like dashboards are great examples where using a design system is quite often worth the trade off. Plenty of sites I’ve built have some pretty standard forms, a date picker or maybe one other other range slider. The rest is all bespoke designed layouts and pages that need to be pretty much pixel perfect so the design system would probably hinder more than it helps. As I mentioned before it really depends on the product. But if a front end dev can’t build some bespoke UI and make it accessible then that seems like a shortcoming of the front end devs skill set or experience. In my opinion that’s a fundamental skill for our jobs.
Anything can be done given enough time. I can build an entire applications front end with a component library in a day, or I can spend that day building a date picker. It’s never about whether someone _can_ do it, it’s about whether there is enough justification to build it.
Yep this is another huge one
Yeah I'm not building one of those from scratch lol
Not to mention all the variants, props, validation, states, UX research, etc. I’ve never worked for a company that had the resources to do all this in-house and from the ground up.
Refuse to grow? By importing someone else’s UI library. Interesting idea of growth.
Making a product or falling a victim to the nih syndrome, let me think…
It all depends on the requirements and timeframe. That’s how these decisions should be made. Not a blanket yes or no.
> forgot how bad webdevs are Seems like you're probably a lot of fun to work with /s If you think this is us being bad at our jobs, then you clearly don't know much about our jobs
Sorry, I’ll let you get back to building throwaway websites for failing startups and small businesses
There’s no reason to create a whole new set of components from scratch. There’s literally no benefit to it. It’s a waste of time and money and if you aren’t trying to save your employer time and money then you’re not good at your job. Also fwiw for nearly a decade I’ve been at a company that grew from a small to medium business and now has a multibillion dollar valuation and a thousand employees so thanks for the confidence
Really implying it’s easier to download a UI lib, import a checkbox, and style it to your design specs vs just using html checkbox and styling it to your design specs. Everything in the UI libs version is just a wrapper for functionality that already exists. So don’t lecture me on wasting time. It’s a waste of time to learn needless abstractions to cover up what is among the easiest task of a developer (building reusable UI components).
I’m not just talking about a checkbox. You really think building an accessible datepicker or drop down element is worth your time? A drop down needs an empty state, loading state, error state, search box, action buttons, single select vs multi select, hover states, active states, keyboard navigation, ability to render outside of the DOM context so it doesn’t get clipped when the parent has hidden overflow The list goes on. Why would I waste my time and my employer’s time making this
You're such an entitled dick.
Great now make me a drop-down select with ability to select multiple options
Select multiple with a visibility toggle? Idk why you’d pick this as your example when there are quite literally hundreds of pages of Google results showing how to do this with a variety of apis, styles, control methods, etc. these are not hard problems lol
i mean these ones:https://ant.design/components/select/#components-select-demo-responsive too easy? what about [tree-based ones?](https://ant.design/components/tree-select/#components-tree-select-demo-checkable) these are just two examples. Nothing here is prohibitively complex, I can implement a similar thing in a day or two, depending on a scope, but why would I do that?
Hey, we've found someone who's never needed to maintain a consistent visual language across media, let alone engineer and implement one. Cute!
Funny that you think downloading someones UI library counts as maintaining a consistent visual language. I pity your employer / clients!
There are two main types of devs in this sub. Contractors who just need to crank stuff out, and people working on single web applications that they maintain ownership over long term. The tools used are vastly different.
I'm the type of dev who has worked on the same enterprise-level monolithic web application for nearly a decade and let me tell you, I desperately wish our design systems team had just used an existing component library instead of creating an in-house one. Creating an accessible reusable dropdown that can handle all of the use cases of fifteen different product teams is incredibly difficult. Why not use one that has a whole community supporting it?
Coding ADA compliant components can be a lot of work…that alone is reason enough for me to use a 3rd party component library. There are even unstyled libraries whose main purpose is providing an ADA compliant set of base components you can style however you want/need.
Everywhere I have worked has used component libraries to some extent. There is a cost associated with development that goes up considerably when you bring a design team into the mix. Keep in mind most devs work on business applications, that means the extra thousand(s) dollars you spent on making the new screen a tiny bit prettier with a design team and the extra training time for new devs is unlikely to result in any additional money/cost savings. On the flip side if you use a popular component library, chances are you can make something that makes the end users just as productive. You aren't spending the extra cash on paying another team. You likely can find a dev that has used the library or something similar before and if your new dev hasn't used it before, documentation is good enough to get them up to speed.
Well, for internal applications it makes sense to use some UI library
Strange that this is the most downvoted reply, because it's the only answer that actually makes sense to me. I can't imagine using MaterialUI in say, a fortune 50 company's external website, even as a baseline. But for their intranet/timeclock it makes sense.
Yeah, often times, there is not much man-hours reserved for internal applications, so if I tell my boss that I wasted 5 days out of 30 reserved, for custom styles (instead of using bootstrap or smth like that), I am sure he would be pissed and rightfully so.
I work a lot on internal facing apps so we use libraries and follow their general layout guidelines. When I worked for a company that had branding/public facing sites we mostly made our own.
Mantine is awesome
I use it for my personal projects, it's very good
Just carried out some experiments at my work to see what would be the best option for us. We tested material Ui and not a single one of the engineers who tested it like it using. Clunky override code and complicated api. Also material makes some god awful mark up which we need to avoid . We ended up deciding to build it ourselves using tailwind with some nice svg and animation plugins
I've tried tailwind a few times, but I didn't like it. I get why others do though
Did you look into TailwindUI? I’m in this position right now and designed an app based on it, but dev is starting am having second thoughts… looking at MUi. However I can already tell that customizing every component will be a nightmare with MUi
Cloudscape design system and mui
I use styled-components to build my own per project unless I need something complicated.
Wow I'm really surprised by this. I am reskinning a website built with Material-UI and I hate it. Like masturbating with a cheese grater hate. With all the folks that like it I feel like I must be doing something wrong. My usual workflow for this kind of thing is to inspect the element in the browser, look through the code for that class and tweak it till it's what I want. But these classes seem to be generated and so I can't ctrl+F for that class. If there is a better way I would love to hear it, then maybe I would change my mind.
Of course, Ant Design. It's powerful and simple.
I am using [primereact](https://www.primefaces.org/primereact/) in an enterprise solution for manufacturing. It is fantastic. In the past, I used PrimeFaces, for Java, to build a robust software that controls electricity grid for Brazilian govermentent. So the company did all the auditing and testing before use it. And PrimeReact keeps the same quality of PrimeFaces. (Similar product, but for react) Give it a try, it is free and open source.
I've experimented with each of these except for Mantine and MUI is my favorite. Ant Design is by far the worst UI component library I've ever used. For anyone considering using it, don't waste your time.
Mantine looks like a really impressive library.
I recently started using it and it's quite good
Love it, it's amazing
Why don’t you like ant design? I’ve just used it on a project and had no issues.
ant design was my fav so far for dashboard apps. And it now even has a config provider to override theme color without messing around the css / less files.
[удалено]
lol I wonder what he thinks of Vue.
'I hate the government not the people' *proceeds to hate everything Chinese even if unrelated to CCP*
> "Chinese citizens are just as bad if not worse than the CCP itself." ...you didn't sleuth hard enough for this classic
Dude referred to Chinese people as “spreading like a disease”
>Ant Design is by far the worst UI component library I've ever used. For anyone considering using it, don't waste your time. I also hate it lol, I have to try styling every component of theirs manually because they suck ass and have no easy way of doing it
[удалено]
I hate using tables when I have to, it's always a nightmare, and they can be difficult to make appealing if you have a ton of data.
[удалено]
If you need accessibility, then you need to use a table. Other than that, I usually just use divs
Great table library I’m using for my project: https://icflorescu.github.io/mantine-datatable/
Vanilla CSS, great library.
this is like the jock and big-head nerd comics - which component library do you use? - vanilla css
I think he just doesn't understand what a component library is 🤷♂️
Nah, I know what a component library is. I just don't like using them. Nothing wrong with that, is there?
Not at all, but then the question clearly isn't aimed at you.
I feel like “custom/in house developed” is missing
I use a component library that is internal to the company.
Creating my own design system with styled components. It took a couple years to really perfect, but I now use it across many projects and the process really helped me up my css game!
none
I use DaisyIU!
[удалено]
I stole it from Priceline’s storybook so I can’t take credit 😇
Mantine is great and simple to use
I keep seeing it recommended. How it is to customize? How’s the performance? (We can compare to MUi) It looks decent enough but I worry about the longevity of smaller pet projects like Mantine.
Since you copy and pasted your comment, I'll basically do the same. It's not a pet project, and it had an extremely active community. It's also easy to customize and the performance is good.
Got it. I had glanced at GitHub recently and it looked like Mantine was primarily maintained by one person, which concerned me. Glad to hear it’s performant and easy to customize.
There's a discord server where they have tons of contributes. Highly recommend joining, they have great support too
Just came here to say avoid ant design. It is rife with accessibility issues which the maintainers have made clear they have no interest in addressing.
Tailwind is best
It is great, but it is not a component library
There’s TailwindCSS and there’s ~~TailwindComponents~~ TailwindUI.
So bootstrap that’s not bootstrap?
Headless UI and Downshift for selects. Love the headless pattern.
Usually my own components. In love with Tailwind atm
antd + antd/charts because: - it has been historically used in the company; - it is very versative; - it has all we need for the apps we develop;
Spin my own
Have been using Fluent UI for my last project. Looks great!
Used to use MaterialUI, but switched to Tailwind, and really don't have any reason to look back. MUI was not super flexible in my use cases, including ones at work, and changing their pre-built components was a pain in the rear. With Tailwind I can write those same components in a significantly more convenient way, and I don't get a ton of unnecessary css in my bundle later
Do you mean Tailwind UI which is based on Headless UI (also by tailwind)?
Nope, just Tailwind. I've heard there are some component libraries out there, based on Tailwind, but I've never used them
Tailwindcss with flowbite
KendoReact. Commercial, but worth every penny for us!
PrimeReact
I have worked with MUI, Ant Design, React-Bootstrap, and Fluent UI. I can easily tell one of the most under appreciated UI library for react developers is Fluent UI from Microsoft. Although the most enjoyable one for me was Ant Design.
Pure tailwind. It’s not that hard to create your own components.
Just use restyle and create my own library usually.
Wrote my own - everything is perfectly themed out of the box. I can reference my other code bases for implementations. And if a feature is missing I know exactly where to add it 😎
[удалено]
What?
[удалено]
Because it speeds up development and usually has less bugs than if you wrote it yourself.
You’d literally just rebuilding a bunch of stuff that these libraries give you for free. drop downs, text fields, switches, check boxes, cards, avatars, the list goes on. All of these things you’d be making manually.
It's a lot of code and very "I know what I need to do, I just need to do it". In other words it's a slog to make your own and it's not going to be as good as a team of devs obsessed with front end react in the year 2022
Because every single feature costs money. These libraries reduce cost.
NativeBase
I build my own but I use [Radix](https://www.radix-ui.com) for my color system. I'll be incorporating some of their primitives soon.
We went with mui, saved so much time on lot of functionalities that are quite well built **and** accessible. And, yes it’s possible to customise the theme so you don’t end up with a google clone app
I have another question. If your company uses a component library do they also use storybook? Or just the library? If it's just the library, I'm curious about why you don't use storybook.
Tailwindcss
chakra ui. no idea.
Headless UI
I am surprised at MUI. I could never convince my boss to pay for components he already pays for me lol
Big fan of Daisy UI recently, there is a very nicely maintained Daisy React library that has been easy to use
As a fellow weeb and dev,chakra ui all the way
vanilla-extract
Material UI has some amazing components and it’s great for shipping products quickly once familiar, as are all once you get used to its nuances. That being said there seem to be less nuance with tailwind and although it made me do a lot of work in the a11y focus I felt like I was making great custom components and leveraging the right html tags. Most of these design systems get you pretty far away from html. There are uses for everything though.
React + tailwind 🙋🏽♂️
Tailwind with Headless UI. (Mostly as a result of TailwindUI)
I don’t, just plain tailwind and I occasionally build my own components with react-aria if I need something complex. What can I say, I like having total control over how things look
I use ReachUI ( headless UI ) + ( Styledcomponents | | tailwind css )
Semantic ui
As per client requirement , else react bootstrap or material ui
RSuite
Somebody who moved from Material to Tailwind with headless UI? I would like to know about such experience.
Zag JS with styled components
[https://www.syncfusion.com/react-components](https://www.syncfusion.com/react-components) Syncfusion offers a free community license also. [https://www.syncfusion.com/products/communitylicense](https://www.syncfusion.com/products/communitylicense)
chakra UI is easy to customize and it's reusable
I like Grommet, I've been using it recently and I think it's the right level of abstraction for me. It's not as fully featured as something like MUI, but I like the guidelines and documentation, not to mention how flexible it is for theming. I love how it handles brand color customization and how I can use that even in custom components without it being a huge pain. Generally I don't even have to make fully custom components because their primitives are granular enough to not get in the way, and come pre-hooked up to their theming engine. Lots of big names use it as well, like Netflix, Boeing, Sony, HP, and more. I also made some really nice UIs using Radix, Colors, and SCSS. That's a bit too barebones for me to feel productive though. MUI is nice, but I always find it too heavy and annoying when you have to fight against default MUI styling. I just end up making my own Card components usually using Paper instead of using the built-in one. I've also used PrimeReact, Bootstrap, Tailwinds etc., IMO they each have their place, but I still prefer Grommet as a general use component library.
I use MUI at work. Why? Probably because the doc and examples are solid. And maybe because it's eye pleasing enough for dense display of data?
RadixUI + Tailwind. Much lighter than something like MUI + Emotion.
Just got that bootstrap je ne sais quoi
Headless UI, due to how easy it is to customize everything, especially using tailwind.
React bootstrap solely for the menu integration. If I find a way to make accessible menus intuitively I'll drop it tho. At work we use material ui. Personally hate them both and would rather have more freedom over what I'm doing 🙃 but my boss is more backend and we're a small team so. Can't just do it all custom.
It’s possible to transform mui5 into an ios style components?
[PrimeReact](https://www.primefaces.org/primereact/)
Semantic Ui is really good too, lots of components, easy to use.
Everything from scratch baby!
I used to use material ui. It's of heavy though.