Crafting your next React project and wondering what UI library or framework to choose.

Check out the following options:

Tailwind css

Tailwind css is amazing. It has become the default option for all my new projects. It simplifies building slick user interfaces at ease.

Tailwind is a utility first CSS framework and packed with "well" named classes. The classes are almost intuitive but there is a little bit of learning attached with it. You can completely design your site without writing CSS Styles.

❤️

• Easier to style your components
• Provides CSS-handlers for animations, transitions, transformations, interactivities with HTML elements
• More advanced options with Functions and Directives

💔

• Initial learning curve is steeper and getting used to class names
• It is just a CSS framework not a full-fledged UI component framework. If you are looking for complete UI component library check out headlessUI

Overall

• Type: CSS framework
• Responsive: ✅
• Optimisation: ⭐️ ⭐️ ⭐️ ⭐️ ⭐️
• Customisation: ⭐️ ⭐️ ⭐️ ⭐️ ⭐️
• Accessibility: ⭐️ ⭐️ ★ ★ ★

If I had to recommend a way of getting into programming today, it would be HTML + CSS with @tailwindcss

The RoI is just incredible. This responsive demo is just ~21 custom CSS props. The whole thing is mostly built-in tailwind classes and vanilla HTML.https://t.co/S7U1OFzoxc pic.twitter.com/9opFHPdryq

— Guillermo Rauch (@rauchg) February 7, 2020

Radix UI

Radix UI is a minimal UI component library. It provides an unstyled, accessible, and customisable UI components. One of the standout feature of Radix UI is its support for accessibility.

❤️

• Components are un-styled and allows full customisation
• Supports animation with both CSS and JS libraries
• Amazing accessibility conformance and thoughtful API design
• Allows server side rendering of components along with responsive styles (thanks to stitchesjs)
• Allows including components individually (modular NPM packages), thus enabling incremental adoption.

💔

• Few components like select, toast are missing yet
• Too many customisation options
• Components are unstyled

Overall

• Type: UI Component library
• Responsive: ✅
• Optimisation: ⭐️ ⭐️ ⭐️ ★ ★
• Customisation: ⭐️ ⭐️ ⭐️ ⭐️ ⭐️
• Accessibility: ⭐️ ⭐️ ⭐️ ⭐️ ⭐️

5. Radix Primitiveshttps://t.co/ELi2rUjvLb

This is a *phenomenal* set of accessibility-focused UI primitives. All of the really-hard-to-get-right stuff like dialogs, accordions, menus, scroll containers. Bring your own styles.

The team is wonderful, too! pic.twitter.com/2K2SKPAq8v

— Josh W. Comeau (@JoshWComeau) January 4, 2022

Next UI

Next UI is a theme-able React UI library. It is simple, elegant UI library that makes it easier to build modern, fast web applications.

❤️

• Components are themeable with default styles
• Good accessibility defaults and thoughtful API design
• Sensible utilities with stitchesjs
• Optimises for the runtime performance by removing unnecessary styles

💔

• Few components like dropdown, navbar are missing yet
• Do not Allow including components individually

Overall

• Type: CSS framework
• Responsive: ✅
• Optimisation: ⭐️ ⭐️ ⭐️ ⭐️ ★
• Customisation: ⭐️ ⭐️ ⭐️ ⭐️ ★
• Accessibility: ⭐️ ⭐️ ⭐️ ★ ★

Hey Guys 👋

NextUI is finally launching on Product Hunt!! 🚀🎉

If you like using NextUI please support us ❤️

Thanks!! 🙏https://t.co/Xdr6m9SmFh

— NextUI (@getnextui) January 26, 2022

Chakra UI

Chakra UI focuses on building simple and composable components. Chakra UI has a cleaner API and provides complete components.

❤️

• Sensible accessibility defaults out of the box
• Allows including components individually (modular NPM packages)
• Components are themeable and composable
• Amazing docs that help you to get started
• as and style props on the components are amazing

💔

• Bundle size is slightly bigger than other frameworks. (Refer here)
• Steeper learning curve

Overall

• Type: UI components library
• Responsive: ✅
• Optimisation: ⭐️ ⭐️ ★ ★ ★
• Customisation: ⭐️ ⭐️ ⭐️ ★ ★
• Accessibility: ⭐️ ⭐️ ⭐️ ⭐️ ★

What is your favorite CSS framework / library? tweet them @sendilkumarn :)