DEV Community

Sendil Kumar
Sendil Kumar

Posted on

UI libraries for your next React project

Originally published in sendilkumarn.com

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

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

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

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

Type: UI components library
Responsive: βœ…
Optimisation: ⭐ ⭐ β˜… β˜… β˜…
Customisation: ⭐ ⭐ ⭐ β˜… β˜…
Accessibility: ⭐ ⭐ ⭐ ⭐ β˜…

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

Discussion (0)