What's your experience and what do you use?
Today I've decided to set up my UI design system, do a short research on what would be
right fit for my use case and once install do a small example.
Checkboxes I wanted to fill:
it's easily compatible with
styled-componentshave a wide react UI ready to use components library
it's easy to tweak CSS styles of #2 (preferably with
styled-components)
I've stumbled upon a lot of react component libraries but only these ones
made happy and they left in the last decision steps.
Just use styled-components
This was my first choice I prefer this one over the others, but I don't want to spend time designing my own it will be just a waste of time.
I would love to have one but I want to build it over time while I'm working on a project.
Also, I plan to use styled-component to overwrite styles of the below whatever UI libraries I choose from. Meaning that I won't import components from below libraries, instead, I will wrap them around styled component and export that.
Ant.Design
I liked the design of this one clean, simple, beautiful. A lot of components to choose from and the documentation were just amazing with a wide range of examples.
I was ready to go with this one, but then I heard that voice in my mind 🙃 "Search up for style overwrites with styled comp." its a good practice to do that and it can save you some time. Just search for issues for whatever package you might use 😄.
And there was some tricky integration with styled-components that I found and it did not work all of the time for some components from ant.design - so I decided to continue with my search.
Material-UI
Oh, this one ☝️ - it's ok. if I was looking for something like this 3 years back I would choose this one but now I just don't like the look of it. One thing that makes me have look at it once again is that I see a lot of people praise it. Will see - still don't like it 😁.
Reach-UI
I'm using this one in a big project and it works great with styled-components we have e UI/UX
senior dev that it's working on our UI library in combination with other react components and it works great. But once again it takes time so setup different components and I don't want to waste time on something that I can have easily (example ant.design)
This one is light and that's one thing that I can't say about the ant.design
There is one interesting library that I found Bit, it will extract component library from some of your projects and you can use it later one. I plan to try this one later on when I have built some of my components libraries.
Conclusion
Not decided yet - I've spent so much time researching and trying examples and can't decide yet.
What's your experience and what do you use?
Top comments (9)
We are in the process of evaluating design libraries in my team as well. From a dev perspective, we are leaning towards Ant Design due to the variety of components and rich functionality. However, a very important requirement we have is Accessibility, which is something that Ant doesn't do very well. You may want to consider that as well in your evaluation criteria.
Wow, this scared me a lot never thought In this direction...
In my case I usually use Material Ui and react bootstrap in the same project...
Is that a bad habit?, using multiple library in same app?
Also any views on Chakra Ui?
Yes that's a good point - that's why I'm leaning on Reach-UI
I find chakra ui a good one also I use Material UI and React-Bootstrap😁,
As I copy the html+ css from html CSS templates and they are majorly written in Bootstrap hence react bootstrap is now must in my works....
Omg I totally forgot 😂 about chakra UI thank you! Haha
I think this one tiks almost all of my checkboxses .
Hmm, is using
Chakra ui bootstrap and material ui in same project bad?
It's an overkill in my opinion and I like to keep things simple.
But from functionality stand point if it works for you then that's the way to go.
I also had this problem. Did hundreds of research and chose Material UI. It's also worth looking at react-bootstrap too. It based on Bootstrap, the most popular front-end framework up to now.
open-ui.org/
Comparison based on UI elts: The missing industry standard definition of UI.
This could bring some nice answers.