DEV Community

Ségolène Alquier
Ségolène Alquier

Posted on

Which CSS libraries do you use with React? 🧐

Hi folks,

I'm starting a new project on RoR / React and was wondering which CSS library to use.
I've worked with Material-UI before but would consider trying something else!

Which CSS libraries do you use for your React (or not) projects and why do you love them? 😍

Top comments (14)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Tailwind CSS seems to be pretty popular these days alongside Bootstrap. Personally I just prefer to use plain CSS with styled-components but the other two are great options.

Collapse
 
segolenealquier profile image
Ségolène Alquier

I totally understand, a lib can add another layer of complexity but I was curious about discovering a new one 🤓
Thanks for tailwind, I'll take a look!

Collapse
 
michaelgee profile image
Michael Gee

Do you mean a React component library? From mentioning Material-UI I will assume so and the answer will definitely vary from person to person.

Everybody has their own opinions about the look and developer experience for each library. In my experience after gathering advice from other people I usually gravitate back to the library that I would have personally chosen in the beginning.

The one downside there is a lot of options: blog.logrocket.com/top-10-react-co...

I would recommend researching your preferences based on which components look the best and which ones will get the job done for what you need. I personally have used and been happy with Semantic-UI-React for a while now but for sure will keep an open mind and look into other options on future projects!

Collapse
 
segolenealquier profile image
Ségolène Alquier

Yes, I meant a React component library, thanks!
I'll read that article carefully, thank you 🤓.
I'll check Semantic-UI, you're not the first one to recommend it!

Collapse
 
dance2die profile image
Sung M. Kim

Tailwind CSS but for Gatsby, I used Theme-UI for my website.

Collapse
 
segolenealquier profile image
Ségolène Alquier

I only heard good things about Tailwind, will definitely take a look 👀. Thanks!

Collapse
 
dance2die profile image
Sung M. Kim

You're welcome. There are other "utility" CSS frameworks but as I've seen Tailwind being discussed a lot, thought it was easier to get started especially when you have an issue.

Collapse
 
stereoplegic profile image
Mike Bybee • Edited

React Native StyleSheet API, often with Extended StyleSheet or Size Matters. I've been focusing on single-codebase React Native across mobile, web, and desktop for a long time, before web support dropped in Expo (though it's become amazing there the last few SDK releases).

Collapse
 
stereoplegic profile image
Mike Bybee • Edited

@segolenealquier your like notification reminded me that I didn't clarify. Those aren't UI component libraries, but that's because I've been working on building my own that will work as well with React Native Web as it will with React Native on mobile apps.

There are several for React Native that are very good - the most popular likely being React Native Paper, React Native Elements, NativeBase, Nachos UI, UI Kitten; others with potential and at least some web support are Material Bread, Paramount, Galio, and a few slipping my mind ATM - but I seem to run into a showstopper with each of them when it comes to universal design between mobile, web, and desktop.

As for why universal? One, because I work with a lot of bootstrapping startups who need to get up and running on web and mobile (if not desktop) as quickly as possible, for as little cost as possible, and I need to be able to train whatever dev team they hire on quickly after I've handed off the project. Two, because I always seek to eliminate as much complexity as possible; fragmenting development teams is adding a great deal of complexity right away. Three, because any time I hear about a web frontend based on React (or Vue, or Angular, or whatever), my first question is "What's your mobile strategy?"

React Native has solved all of these concerns for me.

Collapse
 
kr4idle profile image
Pete Steven

Instead of using css frameworks, you can use Desech Studio to speed up you web development process. This will keep you code clean and visually create html/css.

You can also integrate it with react. Have a look at the github repository on github for the react plugin

Collapse
 
edabrito7 profile image
Eduardo Brito

I've worked with Semantic-UI-React wich has an easy and fast way to get what you need. its design is pretty good and I really like the variety of props that makes it very customizable.

Collapse
 
segolenealquier profile image
Ségolène Alquier

All of that sounds reeeeally good, I'll definitely check Semantic-UI-React! Thanks 🙏

Collapse
 
hemant profile image
Hemant Joshi

In my case Stackoverflow decides

Collapse
 
segolenealquier profile image
Ségolène Alquier

What do you mean? 🧐