Material-UI vs Ant Design vs Fluent UI vs Semantic UI vs Grommet vs Blueprint vs Rebass
Component Libs
- 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.
- 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)
- 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
- 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.
- 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
- 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
- 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