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)
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.
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!
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!
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!
Tailwind CSS but for Gatsby, I used Theme-UI for my website.
I only heard good things about Tailwind, will definitely take a look 👀. Thanks!
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.
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).
@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.
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
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.
All of that sounds reeeeally good, I'll definitely check Semantic-UI-React! Thanks 🙏
In my case Stackoverflow decides
What do you mean? 🧐