Originally published in sendilkumarn.com

Crafting your next React project and wondering what UI library or framework to choose. Check out the following options:

sendilkumarn

@sendilkumarn

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

🧵👇

22:54 PM - 31 Jan 2022

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

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

Guillermo Rauch

@rauchg

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.

codepen.io/maizzle/pen/zm…

02:47 AM - 07 Feb 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

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

Josh W. Comeau

@joshwcomeau

5. Radix Primitives
radix-ui.com/docs/primitive…

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!

17:42 PM - 04 Jan 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

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

NextUI

@getnextui

Hey Guys 👋

NextUI is finally launching on Product Hunt!! 🚀🎉

If you like using NextUI please support us ❤️

Thanks!! 🙏

producthunt.com/posts/nextui

12:37 PM - 26 Jan 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

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

Ryan Florence

@ryanflorence

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. twitter.com/thesegunadebay…

14:44 PM - 04 Sep 2019

Sage ⚡️ @thesegunadebayo

🚀 Introducing Chakra UI ⚡️ I’m very excited to share my latest project, Chakra UI. A React-based Component Library. I’ve created over 40+ composable and accessible components to help you create React apps and website with speed. Check it out here: https://t.co/ntrRBvfo2R https://t.co/Kq0cgbrCMr

What is your favorite CSS framework / library? Please comment them below :)