DEV Community

loading...
Cover image for 10 UI Frameworks for your Next React Project

10 UI Frameworks for your Next React Project

Sunny Golovine
Mobile + Frontend. Specializing in React + React Native
・Updated on ・3 min read

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.

Github | Website

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.

Github | Website

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.

Github | Website

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.

Github | Website


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.

Github | Website

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.

Github | Website

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.

Github | Website


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.

Github | Website

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.

Website

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

Github | Demo

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.

Github | Website


If you liked this post you should check out Awesome Devtools. A larger collection of devtools for web developers.

​

Discussion (7)

Collapse
anubra266 profile image
Abraham Anuoluwapo

Wow... Chakra UI isn't here.

Collapse
sgolovine profile image
Sunny Golovine Author

I've actually never used Chakra UI and completley forgot about it while doing the write up πŸ€¦β€β™‚οΈ. I'll have to update the article.

Collapse
sm0ke profile image
Sm0ke

MVP.css looks great.
Thanks for sharing!

Collapse
michaelandreuzza profile image
michael-andreuzza • Edited

using CSS frameworks doesn't make youa designer either...

Collapse
trangchongcheng profile image
trangchongcheng

Wow. Antd isn't here

Collapse
zakiazfar profile image
Mohd Ahmad
Collapse
techguy profile image
Techguy