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

Looking for some new UI libraries/components to explore for your next @reactjs project.

🧵👇

— sendilkumarn (@sendilkumarn) January 31, 2022

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: ⭐️ ⭐️ ⭐️ ⭐️ ★

People throw React component libraries and design systems at me regularly.

This might be the best one I've seen. The APIs are simple but composable and the accessibility on the couple components I looked is complete.

Great work @thesegunadebayo, really inspiring work. https://t.co/0oagLyIfxg

— Ryan Florence (@ryanflorence) September 4, 2019

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