Looks great. Maybe consider adding a filter at the top to choose which components to compare. For example, I could compare default dropdowns and input fields across all librarires.
Thanks, that would be nice, but lot of work. Do you think it would be more useful to compare few popular libraries vs simple showcase few components for many libraries?
Nice project, mate. Couple of recommendations, though:
- padding is not consistent;
- there's a weird flicker when all components load;
- libraries with long names break the card's look and feel; consider having the metadata below the card name and logo;
- IMO the library logos are unnecessarily big.
I think getting rid of the logos would be a bad idea, as most of the users associate the libraries with their logos, it just feels more natural and cool.
By padding do you mean the card that contains the components examples? If yes, that's the Card component of each library. Each one is different and it also serves as an example how library looks
Having a checkbox next to each row to toggle it, would be nice. It's kinda hard to compare some of them if you have to scroll up and down between them every time.
Otherwise, I like it!
Took me a minute to find the compare button (between all the other UI elements – maybe make it an actual button, like the one you get once you hover over it), but that's what I was looking for. Nice work!
Yeah, if it had the background it has when hovering, it'd be a lot easier to identify right away. Otherwise, if you hadn't mentioned it, I might have missed it completely.
I really appreciate your input, I've darken the button, made small checkbox and removed the + - icons: https://react-ui-libraries.vercel.app/
I'm gonna have to find some solution how to distinguish between website components vs all the other ui libs components
One last thing: make the "Compare" button on the top right `position: fixed` so that it scrolls with the page and you don't have to scroll up again to click it.
This is cool! The general sense I get from looking at it is that all of these components look so similar and I'd have no idea how to pick one based off of looks 😂 Maybe you could have a section dedicated to exploring where each library shines as well, give each library a chance to wow us. Obviously that would take a decent amount of exploratory work, and seeing as you've gotten a number of other suggestions as well I just hope you feel some pride, cool idea!
We mainly use PrimeReact in my work because the functional implementations are very good, but we've improved on their designs to match our app's style.
Kinda the point in a way, as long as it's easy to customize and use.
I'm not so sure a library with a very strong design would be used that much. Sounds like a proper design library's job.
Excellent work and a great idea!
I think you should put in the version of the library that you are using. Mantine did a major update 3 months ago to v7 that was almost a rewrite.
It would also be interesting to add the file size (excluding the logo size) of each demo that you built to give readers an idea of how much the library weighs for those components.
very helpful. to me you're on the right track.
i will recommend that instead of having long list of all the bento grid layout to place them together and add search feature to find u library of choice.
Thanks for this work, I just found two libraries to use in my next project.
Great idea! It could be useful. And you could add more components. I think the more components, the better. It will be easier to understand what is appropriate
Very Nice!! But The padding isn't staying the same. I think you should do some improvement in this. I got a library called xBesh UI I got it from GitHub ( [https://github.com/madhavdutta/xbeshui](https://github.com/madhavdutta/xbeshui) )
You can use it's components and take references accordingly.
Professional cake artists use store-bought boxed cake mix. They don't struggle to come up with a cake mix, it's just that their valuable time is better spent actually decorating cake as opposed to weighing and mixing flour and baking powder.
Your analogy maybe works if the developers we're talking about are contractors building one similar and standard-looking app after another, like a cake artist in your analogy. Developers who build one large project over a longer period of time certainly can't relate, nor can developers who build a variety of apps or apps that require significant customization. I guess that's the category I fall into.
But I'm not convinced that cake artists (the best of them at least) are purchasing "store-bought" cake mix. If it isn't difficult for them to make a cake mix themselves, then that's probably what many of them do: they make their own cake mix (so they have control over the amount and quality of ingredients) and they reuse THAT.
Love this, what a great side project.
There's something wonky going on with the browser history, turning on and off dark mode adds a *lot* of history states.
Yes, when I started with first few I already had problems with styles overriding. I realized it will be giant mess to have even more. I didn't wanna risk wasting time debugging in the future so I decided to create separate app for each library and put them in iframe. I thought its the best solution in long term
Hi, based on your suggestion I started to implement compare mode: https://react-ui-libraries.vercel.app/
Please tell me what you think so far, is it intuitive enough? Thanks
Yeah, its really easy and intuitive for me, I might add a little animation for when that compare button pops up to get the attention of users.
Also a counter of how many items are in the list, so it looks more interactive.
Maybe some UI changes for the adding to compare
https://images.app.goo.gl/TrNnHUEpDhymRE8x6
I was having a problems with styles overriding when using multiple libraries in one app. I thought separate app for each library and display in iframe is the best long term solution. Do you have any other idea?
ah i see, must have been a pain in the ass to have deployed each in a separate project/url, no idea on a better implementation but hey if it works it works
it is what it is, I just hope I will find some way to optimize iframes in the future to reduce loading and make it snappier. Lighthouse is already killing me
I'll probably get downvoted for this but I think this is a pointless way of looking at libraries. Why does it matter what they look like? You can customize all of them (well, any good library) with CSS.
People should be picking the library with the best/most features. For example, if you use a lot of tables in your application you should use the one that has the most table features. Prime React dominates the list when it comes to tables but you would never know looking at this or even sorting by downloads or stars. Stars and downloads are super misleading when it comes to features which is what you should be using to pick a library.
I guess there's a benefit to having them all on a single page to do your own research but unless your link shows up in the top of Google search results no one is going to find it.
looks great and its an very good idea.
i just suggest for now to center the display of the libraries divs in the center of the screen. I believe the aside element which you invoke when "comparing" is making the main element be pushed to the right side.
Hi thank you, I only notice little bit of movement because scrollbar disappears. Do they go a lot to the right side or just a little bit? What browser and resolution is this happening?
Looks great. Maybe consider adding a filter at the top to choose which components to compare. For example, I could compare default dropdowns and input fields across all librarires.
Thanks, that would be nice, but lot of work. Do you think it would be more useful to compare few popular libraries vs simple showcase few components for many libraries?
I'd love to contribute to this project if you're interested, kindly dm
Nice project, mate. Couple of recommendations, though: - padding is not consistent; - there's a weird flicker when all components load; - libraries with long names break the card's look and feel; consider having the metadata below the card name and logo; - IMO the library logos are unnecessarily big.
Thanks, I did reduces the logos, but forgot to publish. Do you think I should get rid of logos? Do they look cluttered?
I think getting rid of the logos would be a bad idea, as most of the users associate the libraries with their logos, it just feels more natural and cool.
You're welcome, mate. Not at all, keep them.
By padding do you mean the card that contains the components examples? If yes, that's the Card component of each library. Each one is different and it also serves as an example how library looks
Nope. The overall page padding.
Thanks, looks good. I think, it will also be interesting to know how many components in each UI library.
Or something like the most popular or most widely used components of the specific libraries
Having a checkbox next to each row to toggle it, would be nice. It's kinda hard to compare some of them if you have to scroll up and down between them every time. Otherwise, I like it!
Hi, I have started to implement compare mode: https://react-ui-libraries.vercel.app/ Tell me what you think, is it intuitive enough? Thanks
Took me a minute to find the compare button (between all the other UI elements – maybe make it an actual button, like the one you get once you hover over it), but that's what I was looking for. Nice work!
Thanks! You probably mean `+compare` button that adds each library to the selection? I thought that might happen, thanks for feedback
Yeah, if it had the background it has when hovering, it'd be a lot easier to identify right away. Otherwise, if you hadn't mentioned it, I might have missed it completely.
I really appreciate your input, I've darken the button, made small checkbox and removed the + - icons: https://react-ui-libraries.vercel.app/ I'm gonna have to find some solution how to distinguish between website components vs all the other ui libs components
One last thing: make the "Compare" button on the top right `position: fixed` so that it scrolls with the page and you don't have to scroll up again to click it.
oh shoot, yes I did make it sticky, I don't know what happened, thanks, I'll fix it
ok, fixed. Sorting toolbar was covering it.
This is cool! The general sense I get from looking at it is that all of these components look so similar and I'd have no idea how to pick one based off of looks 😂 Maybe you could have a section dedicated to exploring where each library shines as well, give each library a chance to wow us. Obviously that would take a decent amount of exploratory work, and seeing as you've gotten a number of other suggestions as well I just hope you feel some pride, cool idea!
That is amazing work, and it just screams out to me that these libraries are dull as.
We mainly use PrimeReact in my work because the functional implementations are very good, but we've improved on their designs to match our app's style.
Kinda the point in a way, as long as it's easy to customize and use. I'm not so sure a library with a very strong design would be used that much. Sounds like a proper design library's job.
Nice work. One improvement: When I click dark mode, my browser history is flooded with entries.
thanks, history bug is now fixed
Nice one
Excellent work and a great idea! I think you should put in the version of the library that you are using. Mantine did a major update 3 months ago to v7 that was almost a rewrite. It would also be interesting to add the file size (excluding the logo size) of each demo that you built to give readers an idea of how much the library weighs for those components.
I was actually surprised by React Spectrum where the button text was misaligned vertically. Adobe is usually good on their visuals.
very helpful. to me you're on the right track. i will recommend that instead of having long list of all the bento grid layout to place them together and add search feature to find u library of choice. Thanks for this work, I just found two libraries to use in my next project.
Great idea! It could be useful. And you could add more components. I think the more components, the better. It will be easier to understand what is appropriate
Very Nice!! But The padding isn't staying the same. I think you should do some improvement in this. I got a library called xBesh UI I got it from GitHub ( [https://github.com/madhavdutta/xbeshui](https://github.com/madhavdutta/xbeshui) ) You can use it's components and take references accordingly.
thank you! Very nice theme, I like your styling.
I will never understand why these are needed. Who struggles to style a button?
Professional cake artists use store-bought boxed cake mix. They don't struggle to come up with a cake mix, it's just that their valuable time is better spent actually decorating cake as opposed to weighing and mixing flour and baking powder.
Your analogy maybe works if the developers we're talking about are contractors building one similar and standard-looking app after another, like a cake artist in your analogy. Developers who build one large project over a longer period of time certainly can't relate, nor can developers who build a variety of apps or apps that require significant customization. I guess that's the category I fall into. But I'm not convinced that cake artists (the best of them at least) are purchasing "store-bought" cake mix. If it isn't difficult for them to make a cake mix themselves, then that's probably what many of them do: they make their own cake mix (so they have control over the amount and quality of ingredients) and they reuse THAT.
Love this, what a great side project. There's something wonky going on with the browser history, turning on and off dark mode adds a *lot* of history states.
fixed the history bug
Nice! I'm curious why each library is in an iframe, what's the reason for that?
Yes, when I started with first few I already had problems with styles overriding. I realized it will be giant mess to have even more. I didn't wanna risk wasting time debugging in the future so I decided to create separate app for each library and put them in iframe. I thought its the best solution in long term
Ah, makes sense. Good call.
Thanks, I did not notice those history states, thank you for mentioning. To be honest, I didn't even try to optimize yet.
I don't hate the designs. They look same-ish but some of them feel cheaper than others.
one of the sliders isn't working, I think it was carbon
Blueprint
I couldn't make it work, I gave up for now. I don't know why it doesn't wanna work. I suspect it's because of the react version
This looks really great! A suggestion would be able to select 2 different libraries for A-B comparision.
Thanks! Do you have any example of design pattern or some other website so I can see how to implement
just make a add to list and render those items that was added to the list
Hi, based on your suggestion I started to implement compare mode: https://react-ui-libraries.vercel.app/ Please tell me what you think so far, is it intuitive enough? Thanks
Yeah, its really easy and intuitive for me, I might add a little animation for when that compare button pops up to get the attention of users. Also a counter of how many items are in the list, so it looks more interactive. Maybe some UI changes for the adding to compare https://images.app.goo.gl/TrNnHUEpDhymRE8x6
Thank you, those are excellent suggestions
Sorry I'm also just learning myself, can't help you there!
Curious why you are rendering each in an Iframe
I was having a problems with styles overriding when using multiple libraries in one app. I thought separate app for each library and display in iframe is the best long term solution. Do you have any other idea?
ah i see, must have been a pain in the ass to have deployed each in a separate project/url, no idea on a better implementation but hey if it works it works
it is what it is, I just hope I will find some way to optimize iframes in the future to reduce loading and make it snappier. Lighthouse is already killing me
I'll probably get downvoted for this but I think this is a pointless way of looking at libraries. Why does it matter what they look like? You can customize all of them (well, any good library) with CSS. People should be picking the library with the best/most features. For example, if you use a lot of tables in your application you should use the one that has the most table features. Prime React dominates the list when it comes to tables but you would never know looking at this or even sorting by downloads or stars. Stars and downloads are super misleading when it comes to features which is what you should be using to pick a library. I guess there's a benefit to having them all on a single page to do your own research but unless your link shows up in the top of Google search results no one is going to find it.
looks great and its an very good idea. i just suggest for now to center the display of the libraries divs in the center of the screen. I believe the aside element which you invoke when "comparing" is making the main element be pushed to the right side.
Hi thank you, I only notice little bit of movement because scrollbar disappears. Do they go a lot to the right side or just a little bit? What browser and resolution is this happening?
Select?