The right question is: is there added value in reinventing the wheel? (button, form controls, badge, card, spinner, modal...). The existing wheels will probably ride better than yours.
I would go with vanilla Bootstrap (just the Sass part, not the JS part).
Bootstrap CSS utilities are very nice: same principles as Tailwind CSS.
- Neutral look
- Well maintained since 2011: twbs/bootstrap#23586
- Well documented
- Well tested
- Very well coded and thought: https://github.com/twbs/bootstrap/blob/v5.2.3/scss/_buttons.scss
- Comes with CSS utilities like Tailwind CSS: https://getbootstrap.com/docs/5.2/utilities/
- Not bloated contrary to popular believe: https://getbootstrap.com/docs/5.2/customize/sass/#importing
- The most popular
Small example app: https://github.com/tkrotoff/MarvelHeroes (React with hooks, Bootstrap, TypeScript, React Router, Jest)
You will read only good things about it on Reddit, Twitter... people love it. See it as lower level compared to Bootstrap, it does not come with a UI: you have to code it yourself (you could re-create Bootstrap using it). Fits perfectly if you need to code your own design system.
Use React Bootstrap/Reactstrap only when needed (collapse for example): one layer less to learn and maintain.
Does not bring that much value (<button className="btn btn-primary"> vs <Button variant="primary">) + you will be able to update Bootstrap without waiting for React Bootstrap/Reactstrap to catch up.
Very popular right now (and well done, well maintained, well tested and documented, full of features...) but kind of bloated: JSS, generates a big and ugly DOM, more concepts to grasp...
Too minimalist, quite verbose (is-three-quarters, is-three-fifths, is-primary, has-icons-left...), with very limited utility classes.
Less popular than Material-UI, too new and does not come with unit tests: https://github.com/chakra-ui/chakra-ui/tree/v0/packages/chakra-ui/tests. I would never invest time using a UI library that is not properly tested.
Less popular than Material-UI, huge bundle:
- https://www.reddit.com/r/reactjs/comments/brld44/antd_adds_546kb_to_my_app_after_adding_only_one/
- https://unpkg.com/browse/antd@4.1.0/dist/ vs https://unpkg.com/browse/@material-ui/core@4.9.9/umd/
- https://bundlephobia.com/result?p=antd@4.1.0 vs https://bundlephobia.com/result?p=@material-ui/core@4.9.8
And they did that: https://blog.shunliang.io/frontend/2018/12/25/the-ant-design-xmas-egg-that-went-wrong.html (!!!)
https://www.jetbrains.com/lp/devecosystem-2019/javascript/ https://www.jetbrains.com/lp/devecosystem-2020/javascript/ https://www.jetbrains.com/lp/devecosystem-2021/javascript/
https://www.npmtrends.com/@emotion/core-vs-@emotion/react-vs-styled-components-vs-tailwindcss
https://frontpagemetrics.com/r/tailwindcss
styled-components
- v1.0: 2016/10/13
Emotion
- v1.0: 2017/06/02
Tailwind CSS
- first alpha: 2017/11/01
- v1.0: 2019/05/13
As of 2022/06/22, Emotion (@emotion/react) is used by MUI (Material UI) and Chakra UI
AgnosticUI — Accessible React component primitives that also work with Vue 3, Svelte, and Angular.