9 ms·

This list was posted a few weeks ago, but here is a fairly definitive list of similar UI frameworks: https://element.eleme.io/ https://element.eleme.io/ https

This list was posted a few weeks ago, but here is a fairly definitive list of similar UI frameworks: https://element.eleme.io/ https://element.eleme.io/ https://ant.design/ https://ant.design/ https://quasar-framework.org/ https://quasar-framework.org/ https://at-ui.github.io/at-ui/ https://at-ui.github.io/at-ui/ https://developer.microsoft.com/en-us/fabric https://developer.microsoft.com/en-us/fabric https://vmware.github.io/clarity/ https://vmware.github.io/clarity/ http://appnexus.github.io/lucid/ http://appnexus.github.io/lucid/ https://ng-lightning.github.io/ng-lightning/ https://ng-lightning.github.io/ng-lightning/ https://blueprintjs.com/ https://blueprintjs.com/ http://www.jetbrains.org/ring-ui/ http://www.jetbrains.org/ring-ui/ https://www.lightningdesignsystem.com/ https://www.lightningdesignsystem.com/ https://elastic.github.io/eui/ https://elastic.github.io/eui/ https://atlaskit.atlassian.com/ https://atlaskit.atlassian.com/

shimms 8y ago
Thanks - that's a great list. Some of them (atlaskit, MS fabric, Jetbrains, vmware etc) are geared towards building an integration withing those company's products. Whilst they can be used independently (without assets in Fabrics case, and other restrictions in the others), my take is the Evergreen (and ant, etc) are geared towards isolated products, similar to Bootstrap. If you're building an addon for use in an Atlassian product, or an Office 365 product, these are a great way to stay consistent with the host application's look and feel.
- threeseed 8y ago
  Definitely be careful when using some of them e.g. Atlaskit because they are designed specifically for integration. And if you use it for something else you may not comply with the license.
hardwaresofton 8y ago
I can recommend Element (the top of the list) -- I've used it on two projects now and it's been pretty refreshingly easy to use and relatively easy to integrate with (when you need to hook into components to make them act a certain way, for example a paginated table).
ui-explorer12 8y ago
I looked at many of these for an assessment at my company. We started a little broader with some css-only solutions as well but they tend to only take you so far; the controls are nice. Key aspects for us were (1) React-based, (2) TypeScript support (bonus for native TS), (3) Applicable to data-dense engineering apps, and (4) a broad-based, healthy ecosystem. I also evaluated Semantic-UI React. I really like Blueprint JS but I think we'll end up building on top of Ant Design. It's a huge collection of work; they've also started to push Ant Pro which is higher-order components targeting building of admin apps (more opinionated, more than just a UI facade).
- mstijak 8y ago
  Have you looked at CxJS? CxJS offers chart controls and advanced data tables which makes it perfect for building admin apps. https://cxjs.io/ https://cxjs.io/
- nemothekid 8y ago
  I'm in a similar boat as you. We actually started building on top of Ant. However, we first started out by building out our Admin pages and they were built with Blueprint. I like Blueprint a lot more than Ant, but Blueprint doesn't pretend to support responsive applications[1], which was somewhat important to us. Blueprint exposes a couple building blocks (like PopOver) which really help in building more custom functionality. It actually looks like Evergreen be closer to Blueprint in this regard so I might piss off all the devs and evaluate Evergreen. [1]https://github.com/palantir/blueprint/wiki/Frequently-asked-questions#1-is-there-support-for-mobile-browsers https://github.com/palantir/blueprint/wiki/Frequently-asked-...
  - marpstar 8y ago
    I've been using Blueprint and pairing it with Basscss for some responsive assistance and it's been successful (and a lot of fun).
    - arvinsim 8y ago
      I will look into this since I am on BP3 on a project and it seems that they will eventually want responsive support.
acemarke 8y ago
We've been happy with http://react.semantic-ui.com/ http://react.semantic-ui.com/ so far.
- sdegutis 8y ago
  I liked Semantic-UI a lot in terms of looks, but the React aspect of it is separate, so even though it's done by the same people as the core team, it inherently always lags behind a bit in feature completeness. I especially ran into this with transitions and animations, and migrated to Blueprint.js instead, which I was extremely happy with from a feature-completeness perspective, but which I couldn't figure out how to theme.
  - jhall1468 8y ago
    It's not done by the core team. It was a separate project by separate people that was brought under Semantic UI's umbrella. That's actually the major reason for the lagging behind: Semantic UI is designed for a circa 2008 jQuery website. It's a beautiful UI, but the CSS uses a horribly dated model which obligates child elements being aware of the parent elements. End of the day, until it's rewritten with modularity in mind it will always be a drag to properly implement it in React.
    - jscheel 8y ago
      I can second this. Semantic was never set up with real modularity in mind. There is tons of relational knowledge you need to have to make anything work well.
dmortin 8y ago
The question is: how many of these will be maintained several years later? Can you build a long term project on these? Or the expectation is that one has to make a new UI anyway every several years to keep up with the changing fashion, so rewrites are inevitable?
- ggregoire 8y ago
  If you pick one made by a big company, it should be fine.
  - _eht 8y ago
    That's what I thought when I integrated Google Wave into my companies workflow... /s
    - quickthrower2 8y ago
      Google is the exception that proves the rule.
      - mkozlows 8y ago
        How's your Silverlight app working out for you? Does it still connect to your WebObjects server?
        quickthrower2 8y ago
        I prefer WPF :-). Touche, but Google has more of a habit of killing off perfectly good stuff. But MS does it too. With Silverlight market forces, especially HTML5/mobile and Apple policies most likely killed it.
    - Cthulhu_ 8y ago
      I noticed the sarcasm, but, Google Wave never got out of beta (iirc) so anyone seriously adopting it knew what they were getting into. Same with gmail which was in beta for years for some reason - probably because they wanted to avoid liability for lost data etc.
batuhanicoz 8y ago
https://grommet.io/ https://grommet.io/ is awesome too.
zwily 8y ago
Another to add to the list: https://instructure.design https://instructure.design (Disclaimer: made by my coworkers)
- dagi3d 8y ago
  feedback: if I click on any of the sample buttons, the page is reloaded
- wlesieutre 8y ago
  Scrolling momentum is broken on iOS for me, it makes the page very frustrating to read.
  - junyper 8y ago
    Thanks for the feedback. I’m on the team building out this library. We have plans to overhaul our documentation soon and we’ll be sure to address this.
jameslk 8y ago
Shopify also has one: https://polaris.shopify.com https://polaris.shopify.com Personally, I've found Ant Design to be the most comprehensive, feature and behavior-wise.
onursenture 8y ago
What about PrimeReact? https://www.primefaces.org/primereact https://www.primefaces.org/primereact
- darekkay 8y ago
  From a 5 min glance, this framework looks really inaccessible. Most outlines ("focus rings") are removed and it's really hard to navigate the components with a keyboard, even as a sighted person. The focus indicator for buttons is just another shade, which is not sufficient. I was not able to set a value in the "Rating" component using my keyboard. All those things can be fixed, but I would rather go with a library with accessibility in mind.
austinjp 8y ago
Do any of these produce finished output that is less than a few kB, and works reliably in say the past two major versions of browsers? Bundle sizes are getting ridiculous. Is there a React UI framework that focuses on tiny build size and browser compatibility?
- isakkeyten 8y ago
  Wouldn't any of those fit the case if you just do tree-shaking?
  - wild_preference 8y ago
    You have to specifically write code that supports that, so no. Look at the limitations of tree-shaking for more info.
- deltron3030 8y ago
  Rebass.
- jhabdas 8y ago
  Not sure what their bundle size looks like but my understanding is they're using PJAX so the site output should function without JS. Problem is good luck maintaining that stack and remaining secure. And then there's the fact there's no conceivable way it could scale properly for large sites static which would need something like Go/Rust to actually generate quickly then there's the matter of caching. Basically this all leads to headaches just in different places.
drej 8y ago
Just clicked around and here's a note from the elastic/eui repo " WARNING While open source, the intended consumers of this repository are Elastic products. Read the FAQ for details." Doesn't instill confidence.
- jamil7 8y ago
  The point of the warning is to indicate that it's intended purpose is to be used with other elastic open source projects like elasticsearch and kibana. It's not a general purpose UI kit like the rest of those links.
- snide 8y ago
  Hi. I maintain the library along with some others at Elastic. That warning is essentially us being good open source citizens and being very clear about how we maintain it. A lot of these other libraries are built specifically for their own products, no different then us. We just wanted to make it clear that the direction of the library and its maintenance is primarily driven by the needs of Elastic, rather than as some general community UI kit. All that said, it certainly works fine as a general kit, and we build it with that practicality, it's just not something we officially support. As far as stability, my team is pretty well resourced (and growing if there are any engineers interested!). We're using the library in many places around Elastic and its not going away anytime soon. I've looked through most of the kits out there and they all have their pros and cons. Likely our biggest selling point is that it aims to be fully accessible and comes with a lot of fun charting libs. That puts its sweet spot for use in enterprise applications. It's also completely themable with about 8 lines of Sass variables.
  - drej 8y ago
    Ace, thanks for elaborating. You could perhaps add a shorter version of this explanation to your README to make it clearer to others as well.
jhabdas 8y ago
Here are some more, separated out by React, React Native and Universal: https://habd.as/awesome-react-components/ https://habd.as/awesome-react-components/ https://habd.as/awesome-react-boilerplates/ https://habd.as/awesome-react-boilerplates/ Just added evergreen to the components list as it doesn't look like more than a UI kit.
hesarenu 8y ago
google material components https://github.com/material-components/material-components-web https://github.com/material-components/material-components-w...
evrydayhustling 8y ago
Great list but missed a big one: https://material-ui.com/ https://material-ui.com/
nobody271 8y ago
Yeah but how many of them are modern and elegant?
cheapsteak 8y ago
I made a graph showing download counts of those packages on npm - https://npmcharts.com/compare/carbon-react,material-ui,antd,@blueprintjs/core,office-ui-fabric-react,reactstrap,semantic-ui-react,rebass,grommet,react-onsenui,element-ui,quasar-framework,at-ui,@clr/ui,lucid-ui,ng-lightning,@jetbrains/ring-ui,@salesforce-ux/design-system,@elastic/eui,@atlaskit/theme,evergreen-ui,@shopify/polaris https://npmcharts.com/compare/carbon-react,material-ui,antd,... Obviously don't use that as a sole factor to determine what to go with, but with this many options, heuristics may be helpful to narrow down which ones to further investigate
- olivtassinari 8y ago
  material-ui is deprecated, try with @material-ui/core.
  - cheapsteak 8y ago
    Hot damn https://npmcharts.com/compare/carbon-react,antd,@blueprintjs/core,office-ui-fabric-react,reactstrap,semantic-ui-react,rebass,grommet,react-onsenui,element-ui,quasar-framework,at-ui,@clr/ui,lucid-ui,ng-lightning,@jetbrains/ring-ui,@salesforce-ux/design-system,@elastic/eui,@atlaskit/theme,evergreen-ui,@shopify/polaris,@material-ui/core?undefined https://npmcharts.com/compare/carbon-react,antd,@blueprintjs...
    - Androider 8y ago
      Material-UI is by far the most complete of the frameworks in my opinion having used a bunch of them, and constantly updated. It's a joy to work with.
maga_2020 8y ago
Wouldn't React-native-web ( https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web ) qualify into this list ? It offers APIs compatible with React-native (which is obviously a huge time saver for cross platform UI dev). Its disadvantage is that it does not offer (by intent and philosophy) any components outside of React native.
manigandham 8y ago
I posted this list. FYI: It was specifically about UI frameworks backed by big companies, not every major framework available. There are lots of purely community-owned projects too.
hazdiego 8y ago
I'd also include https://reakit.io https://reakit.io
jbfr 8y ago
Would also throw https://www.carbondesignsystem.com/ https://www.carbondesignsystem.com/ into the mix! We're the design system for IBM :)
xadhix 8y ago
And SAP's OpenUI5 - https://openui5.org/ https://openui5.org/ - https://openui5.hana.ondemand.com/#/controls https://openui5.hana.ondemand.com/#/controls :)

shimms 8y ago

Thanks - that's a great list. Some of them (atlaskit, MS fabric, Jetbrains, vmware etc) are geared towards building an integration withing those company's products. Whilst they can be used independently (without assets in Fabrics case, and other restrictions in the others), my take is the Evergreen (and ant, etc) are geared towards isolated products, similar to Bootstrap. If you're building an addon for use in an Atlassian product, or an Office 365 product, these are a great way to stay consistent with the host application's look and feel.

threeseed 8y ago
Definitely be careful when using some of them e.g. Atlaskit because they are designed specifically for integration. And if you use it for something else you may not comply with the license.

hardwaresofton 8y ago

I can recommend Element (the top of the list) -- I've used it on two projects now and it's been pretty refreshingly easy to use and relatively easy to integrate with (when you need to hook into components to make them act a certain way, for example a paginated table).

ui-explorer12 8y ago

I looked at many of these for an assessment at my company. We started a little broader with some css-only solutions as well but they tend to only take you so far; the controls are nice. Key aspects for us were (1) React-based, (2) TypeScript support (bonus for native TS), (3) Applicable to data-dense engineering apps, and (4) a broad-based, healthy ecosystem. I also evaluated Semantic-UI React. I really like Blueprint JS but I think we'll end up building on top of Ant Design. It's a huge collection of work; they've also started to push Ant Pro which is higher-order components targeting building of admin apps (more opinionated, more than just a UI facade).

mstijak 8y ago
Have you looked at CxJS? CxJS offers chart controls and advanced data tables which makes it perfect for building admin apps. https://cxjs.io/ https://cxjs.io/
nemothekid 8y ago
I'm in a similar boat as you. We actually started building on top of Ant. However, we first started out by building out our Admin pages and they were built with Blueprint. I like Blueprint a lot more than Ant, but Blueprint doesn't pretend to support responsive applications[1], which was somewhat important to us. Blueprint exposes a couple building blocks (like PopOver) which really help in building more custom functionality. It actually looks like Evergreen be closer to Blueprint in this regard so I might piss off all the devs and evaluate Evergreen. [1]https://github.com/palantir/blueprint/wiki/Frequently-asked-questions#1-is-there-support-for-mobile-browsers https://github.com/palantir/blueprint/wiki/Frequently-asked-...
- marpstar 8y ago
  I've been using Blueprint and pairing it with Basscss for some responsive assistance and it's been successful (and a lot of fun).
  - arvinsim 8y ago
    I will look into this since I am on BP3 on a project and it seems that they will eventually want responsive support.

acemarke 8y ago

We've been happy with http://react.semantic-ui.com/ http://react.semantic-ui.com/ so far.

sdegutis 8y ago
I liked Semantic-UI a lot in terms of looks, but the React aspect of it is separate, so even though it's done by the same people as the core team, it inherently always lags behind a bit in feature completeness. I especially ran into this with transitions and animations, and migrated to Blueprint.js instead, which I was extremely happy with from a feature-completeness perspective, but which I couldn't figure out how to theme.
- jhall1468 8y ago
  It's not done by the core team. It was a separate project by separate people that was brought under Semantic UI's umbrella. That's actually the major reason for the lagging behind: Semantic UI is designed for a circa 2008 jQuery website. It's a beautiful UI, but the CSS uses a horribly dated model which obligates child elements being aware of the parent elements. End of the day, until it's rewritten with modularity in mind it will always be a drag to properly implement it in React.
  - jscheel 8y ago
    I can second this. Semantic was never set up with real modularity in mind. There is tons of relational knowledge you need to have to make anything work well.

dmortin 8y ago

The question is: how many of these will be maintained several years later? Can you build a long term project on these? Or the expectation is that one has to make a new UI anyway every several years to keep up with the changing fashion, so rewrites are inevitable?

ggregoire 8y ago
If you pick one made by a big company, it should be fine.
- _eht 8y ago
  That's what I thought when I integrated Google Wave into my companies workflow... /s
  - quickthrower2 8y ago
    Google is the exception that proves the rule.
    - mkozlows 8y ago
      How's your Silverlight app working out for you? Does it still connect to your WebObjects server?
      - quickthrower2 8y ago
        I prefer WPF :-). Touche, but Google has more of a habit of killing off perfectly good stuff. But MS does it too. With Silverlight market forces, especially HTML5/mobile and Apple policies most likely killed it.
  - Cthulhu_ 8y ago
    I noticed the sarcasm, but, Google Wave never got out of beta (iirc) so anyone seriously adopting it knew what they were getting into. Same with gmail which was in beta for years for some reason - probably because they wanted to avoid liability for lost data etc.

batuhanicoz 8y ago

https://grommet.io/ https://grommet.io/ is awesome too.

zwily 8y ago

Another to add to the list: https://instructure.design https://instructure.design (Disclaimer: made by my coworkers)

dagi3d 8y ago
feedback: if I click on any of the sample buttons, the page is reloaded
wlesieutre 8y ago
Scrolling momentum is broken on iOS for me, it makes the page very frustrating to read.
- junyper 8y ago
  Thanks for the feedback. I’m on the team building out this library. We have plans to overhaul our documentation soon and we’ll be sure to address this.

jameslk 8y ago

Shopify also has one: https://polaris.shopify.com https://polaris.shopify.com Personally, I've found Ant Design to be the most comprehensive, feature and behavior-wise.

onursenture 8y ago

What about PrimeReact? https://www.primefaces.org/primereact https://www.primefaces.org/primereact

darekkay 8y ago
From a 5 min glance, this framework looks really inaccessible. Most outlines ("focus rings") are removed and it's really hard to navigate the components with a keyboard, even as a sighted person. The focus indicator for buttons is just another shade, which is not sufficient. I was not able to set a value in the "Rating" component using my keyboard. All those things can be fixed, but I would rather go with a library with accessibility in mind.

austinjp 8y ago

Do any of these produce finished output that is less than a few kB, and works reliably in say the past two major versions of browsers? Bundle sizes are getting ridiculous. Is there a React UI framework that focuses on tiny build size and browser compatibility?

isakkeyten 8y ago
Wouldn't any of those fit the case if you just do tree-shaking?
- wild_preference 8y ago
  You have to specifically write code that supports that, so no. Look at the limitations of tree-shaking for more info.
deltron3030 8y ago
Rebass.
jhabdas 8y ago
Not sure what their bundle size looks like but my understanding is they're using PJAX so the site output should function without JS. Problem is good luck maintaining that stack and remaining secure. And then there's the fact there's no conceivable way it could scale properly for large sites static which would need something like Go/Rust to actually generate quickly then there's the matter of caching. Basically this all leads to headaches just in different places.

drej 8y ago

Just clicked around and here's a note from the elastic/eui repo " WARNING While open source, the intended consumers of this repository are Elastic products. Read the FAQ for details." Doesn't instill confidence.

jamil7 8y ago
The point of the warning is to indicate that it's intended purpose is to be used with other elastic open source projects like elasticsearch and kibana. It's not a general purpose UI kit like the rest of those links.
snide 8y ago
Hi. I maintain the library along with some others at Elastic. That warning is essentially us being good open source citizens and being very clear about how we maintain it. A lot of these other libraries are built specifically for their own products, no different then us. We just wanted to make it clear that the direction of the library and its maintenance is primarily driven by the needs of Elastic, rather than as some general community UI kit. All that said, it certainly works fine as a general kit, and we build it with that practicality, it's just not something we officially support. As far as stability, my team is pretty well resourced (and growing if there are any engineers interested!). We're using the library in many places around Elastic and its not going away anytime soon. I've looked through most of the kits out there and they all have their pros and cons. Likely our biggest selling point is that it aims to be fully accessible and comes with a lot of fun charting libs. That puts its sweet spot for use in enterprise applications. It's also completely themable with about 8 lines of Sass variables.
- drej 8y ago
  Ace, thanks for elaborating. You could perhaps add a shorter version of this explanation to your README to make it clearer to others as well.

jhabdas 8y ago

Here are some more, separated out by React, React Native and Universal: https://habd.as/awesome-react-components/ https://habd.as/awesome-react-components/ https://habd.as/awesome-react-boilerplates/ https://habd.as/awesome-react-boilerplates/ Just added evergreen to the components list as it doesn't look like more than a UI kit.

hesarenu 8y ago

google material components https://github.com/material-components/material-components-web https://github.com/material-components/material-components-w...

evrydayhustling 8y ago

Great list but missed a big one: https://material-ui.com/ https://material-ui.com/

nobody271 8y ago

Yeah but how many of them are modern and elegant?

cheapsteak 8y ago

I made a graph showing download counts of those packages on npm - https://npmcharts.com/compare/carbon-react,material-ui,antd,@blueprintjs/core,office-ui-fabric-react,reactstrap,semantic-ui-react,rebass,grommet,react-onsenui,element-ui,quasar-framework,at-ui,@clr/ui,lucid-ui,ng-lightning,@jetbrains/ring-ui,@salesforce-ux/design-system,@elastic/eui,@atlaskit/theme,evergreen-ui,@shopify/polaris https://npmcharts.com/compare/carbon-react,material-ui,antd,... Obviously don't use that as a sole factor to determine what to go with, but with this many options, heuristics may be helpful to narrow down which ones to further investigate

olivtassinari 8y ago
material-ui is deprecated, try with @material-ui/core.
- cheapsteak 8y ago
  Hot damn https://npmcharts.com/compare/carbon-react,antd,@blueprintjs/core,office-ui-fabric-react,reactstrap,semantic-ui-react,rebass,grommet,react-onsenui,element-ui,quasar-framework,at-ui,@clr/ui,lucid-ui,ng-lightning,@jetbrains/ring-ui,@salesforce-ux/design-system,@elastic/eui,@atlaskit/theme,evergreen-ui,@shopify/polaris,@material-ui/core?undefined https://npmcharts.com/compare/carbon-react,antd,@blueprintjs...
  - Androider 8y ago
    Material-UI is by far the most complete of the frameworks in my opinion having used a bunch of them, and constantly updated. It's a joy to work with.

maga_2020 8y ago

Wouldn't React-native-web ( https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web ) qualify into this list ? It offers APIs compatible with React-native (which is obviously a huge time saver for cross platform UI dev). Its disadvantage is that it does not offer (by intent and philosophy) any components outside of React native.

manigandham 8y ago

I posted this list. FYI: It was specifically about UI frameworks backed by big companies, not every major framework available. There are lots of purely community-owned projects too.

hazdiego 8y ago

I'd also include https://reakit.io https://reakit.io

jbfr 8y ago

Would also throw https://www.carbondesignsystem.com/ https://www.carbondesignsystem.com/ into the mix! We're the design system for IBM :)

xadhix 8y ago

And SAP's OpenUI5 - https://openui5.org/ https://openui5.org/ - https://openui5.hana.ondemand.com/#/controls https://openui5.hana.ondemand.com/#/controls :)