Sapan Diwakar

Software developer

Follow me on Twitter Check out my code on GitHub View some of my designs on Dribbble Take a look at my Linked In profile

Best React Component Libraries

Material-UI vs Ant Design vs Fluent UI vs Semantic UI vs Grommet vs Blueprint vs Rebass

Component Libs

Material-UI (website)(github)

  • One of the most popular React frameworks
  • It is fully open source and maintenance is funded by corporate and community sponsors.
  • Material Look based on Google’s Material design
  • Huge list of clean, minimal components
  • Easily customizable. Material-UI gives 3 different styling solutions to choose from.
  • Great community and documentation (including TypeScript);
  • Uses CSS as the style language
  • Bundle size is decent w.r.t. other frameworks and tree-shaking should dial it down too
  • All styles namespaced under Mui- prefix, so shouldn't conflict with existing styles (if you already have some).
  • Basic form validation (only required supported).
  • Provides types, so code intelligence is available in the editor.

Ant Design (website)(github)

  • One of the most popular React frameworks
  • Backed by Alipay/Alibaba Group
  • Takes your project off the ground very fast
  • Huge list of clean, minimal components
  • API is pretty clear and well thought out, most of the time
  • Customizing the theme and styling is pretty hard (possible through CSS). Component styling can be be done through styled-components, but will require knowledge of the underlying DOM that it renders (Browser DevTools is your friend here).
  • Has pro version with more components for admin dashboards, charts, etc.
  • Has a library of scaffolds (reusable components made with ant design)
  • Huge bundle size (-) but tree-shaking should dial it down to only the used components.
  • Uses less as the style language
  • Styles scoped under ant- prefix. But there are global styles (e.g. targetting body) which will conflict with existing styles. There are some workarounds.
  • Inbuilt form validation (rule-based validation with a comprehensive API) with support for custom error messages.
  • Developed in Typescript (so good code intelligence in the editor)

Fluent UI (website)(github)

  • Backed by Microsoft
  • Fluent UI itself is very young, but has been forked (essentially renamed) from Fabric UI which has been around since 2016.
  • While the design language might not go away (it seems that MS is focusing on the design language quite a bit), there's still a small chance that MS moves away from using React to another framework that will essentially kill the project. But from their talk in Build 2020, they are focusing on React Native too for native Win/Mac development, so it does look like it will be supported for some time.
  • Developed in Typescript (so good code intelligence in the editor)
  • Has a portfolio of really complex apps (including Office 365), so the component library is very comprehensive.
  • The API has lots of callbacks (for many possible situations and to support customization)
  • Most of the styles (not all) seem to be scoped under ms- prefix, so shouldn't conflict with our existing styles.
  • Only boot time theming possible at the moment. Some components (e.g. button) do provide styling with the props, but not all (e.g. calendar).
  • It might be a little difficult to find an external library for components that are not available in the library.
  • All components are styled on the Windows look and feel

Semantic UI (website)(github)

  • According to Semantic, “helps create beautiful, responsive layouts using human-friendly HTML.
  • Integrates Semantic UI with React, meaning you can write in JSX
  • You don’t have much control over the customization unless you design your own themes and layouts.

Grommet (website)(github)

  • Well-rounded set of additional tooling (theming, prototyping))
  • React.js is used for the underlying UI and Sketch is used for the underlying UX
  • It adopts a mobile-first strategy.
  • It minimizes visual fiddling.
  • Lots of components
  • Easily themable
  • Big Community

Blueprint (website)(github)

  • This framework is optimized for building complex data-dense reusable interfaces for desktop browsers.
  • Support for light and dark theme mode
  • Native typescript, really well designed, consistently good API
  • NOT mobile friendly
  • Lots of components
  • Easily themable

Rebass (website)(github)

  • Minimalist (it provides only the basic building blocks) but very extensible (powered by styled-system). Styled-system provides the base design system and API, Rebass adds primitive components on top of it.
  • Needs a theming library for customization
  • Very few out of the box components