React UI Libraries for your next project 2022

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

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

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

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 :)


யாதும் ஊரே யாவரும் கேளிர்! தீதும் நன்றும் பிறர்தர வாரா!!

@sendilkumarn