Skip to content

Instantly share code, notes, and snippets.

@tkrotoff
Last active March 18, 2024 04:26
Show Gist options
  • Save tkrotoff/1ca4caeb7b2cf5cf225af45a2796a4dc to your computer and use it in GitHub Desktop.
Save tkrotoff/1ca4caeb7b2cf5cf225af45a2796a4dc to your computer and use it in GitHub Desktop.
CSS Frameworks (Bootstrap, Tailwind CSS, Bulma, React Bootstrap, Chakra UI, Ant Design)

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

Bootstrap CSS utilities are very nice: same principles as Tailwind CSS.

Small example app: https://github.com/tkrotoff/MarvelHeroes (React with hooks, Bootstrap, TypeScript, React Router, Jest)

https://www.npmtrends.com/@chakra-ui/core-vs-@material-ui/core-vs-antd-vs-bootstrap-vs-bulma-vs-react-bootstrap-vs-tailwindcss-vs-@mui/material

npm trends

https://star-history.com/#twbs/bootstrap&tailwindlabs/tailwindcss&mui/material-ui&ant-design/ant-design&jgthms/bulma&react-bootstrap/react-bootstrap&chakra-ui/chakra-ui&Date

GitHub stars history

https://insights.stackoverflow.com/trends?tags=bootstrap-5%2Cbootstrap-4%2Creact-bootstrap%2Cmaterial-ui%2Cantd

Tailwind CSS

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.

React Bootstrap/Reactstrap

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.

Material-UI

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...

Bulma

Too minimalist, quite verbose (is-three-quarters, is-three-fifths, is-primary, has-icons-left...), with very limited utility classes.

Chakra UI

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.

Ant Design

Less popular than Material-UI, huge bundle:

And they did that: https://blog.shunliang.io/frontend/2018/12/25/the-ant-design-xmas-egg-that-went-wrong.html (!!!)

Stats and dates

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

https://star-history.com/#tailwindlabs/tailwindcss&emotion-js/emotion&styled-components/styled-components

https://trends.google.com/trends/explore?cat=31&date=today%205-y&q=Tailwind,styled-components,emotion,Material%20UI

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

@roblevintennis
Copy link

AgnosticUI — Accessible React component primitives that also work with Vue 3, Svelte, and Angular.

@image72
Copy link

image72 commented Jan 14, 2023

@Irishgeoff11
Copy link

Here is a good bulma Vs tailwind comparison https://dev.to/irishgeoff11/bulma-vs-tailwind-32c8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment