I'm a developer, not a designer. This means that I use CSS frameworks in most of my side project to make sure they don't look like poop. Here are 10 CSS frameworks that you should consider for your next React project. Some of these are built specifically for react, others are general purpose frameworks that work well with React.
React UI Frameworks
These are UI frameworks that are designed specifically for React. These are great if you are planning a big project or a full featured web app.
Material UI
Material UI is a full featured UI framework for React. It has support for every type of UI element from Material design and comes with it's own CSS-in-JS solution for writing CSS. Material UI currently has 68.9k stars on Github.
Semantic UI React
One of the oldest and most feature complete UI frameworks out there. If you need stability and best in class documentation, give Semantic UI a try. Semantic UI React has 12.3k stars on Github.
React Bootstrap
React bootstrap is a rebuilt version of Bootstrap that is made for React. While it has fantastic component support in React, it's not up to version 5 yet. React Bootstrap has 19.5k stars on Github.
Fluent UI React
In recent years Microsoft has quietly sneaked into the React scene and converted Office, and most of their other web apps to React. With such heavy React development, Microsoft has also released a pretty comprehensive UI framework that includes React bindings. Fluent UI has 11.5k stars on Github.
CSS Frameworks
These are CSS frameworks not built specifically for React, but work extremely well inside a React project. These are great if you are building a landing page or a blog and don't need a comprehensive UI framework like you would in a web app, but still need something to lean on for building the pages.
Bulma CSS
Bulma is a highly customizable CSS frameworks that gives you components for building responsive web pages. BulmaCSS has 43.7k stars on Github as of this writing so it's also safe to say it's a very popular framework.
Tailwind CSS
TailwindCSS is a utility first CSS framework that is packed with classes to build just about anything. While TailwindCSS is not a React specific UI framework, it integrates very nicely with React. TailwindCSS has 42.9k stars on Github.
Bootstrap
The official version of bootstrap. Not much else to be said here, bootstrap is a legendary CSS framework and just about every front-end dev will touch it as some point. Bootstrap has an impressive 151k stars on Github.
Minimal CSS Frameworks
While these are still CSS frameworks, I decided to put them into a different category because they serve a different purpose. If you want to put a webpage up with speed or just want to build and MVP without investing too much time, these minimal UI frameworks will help you get there.
MVP.css
A classless CSS framework that gives you some reasonable defaults to get started with.
W3 Core Styles
If you prefer to get your CSS styles directly from the source, look no further. While not the prettiest styles, these certainly work for some types of sites and you can bet that they will work.
Bamboo CSS
A classless CSS library that adds nice defaults to HTML elements, and uses normalize.css and sanitize.css under the hood for a consistent experience and supports dark mode with automatic theme detection out of the box
Water CSS
Water CSS is another classless CSS framework that gives you dark mode out of the box, gives you way better form elements and improves typography.
If you liked this post you should check out Awesome Devtools. A larger collection of devtools for web developers.
Top comments (7)
Wow... Chakra UI isn't here.
I've actually never used Chakra UI and completley forgot about it while doing the write up 🤦♂️. I'll have to update the article.
MVP.css looks great.
Thanks for sharing!
Wow. Antd isn't here
Why nextui.org not in the list ?
WindmillUI for reactjs
Syncfusion React UI Components