React UI libraries to try in 2021

Interested in a new UI library that’s not Bootstrap, MaterialUI, or SemanticUI? Look no further than these two highlighted libraries which provide easy customization for a unique interface

Photo by Kelly Sikkema on Unsplash

Mantine 2.0

This library offers ‘fully featured React components and hooks’, which are customizable and make it easy and fast to get an accessible application up and running.

Its components include all the essentials, including: buttons, modals, drawers, inputs, tabs, accordions, cards.

from Mantine.dev

And some of its built-in hooks include:

• use-toggle — to switch between states
• use-form — to manage forms, including handlers to set and validate values
• use-click-outside — to detect click/touch events outside a designated element
• use-window-scroll — returns current scroll position and a function to scroll to a specified position
• use-scroll-lock — scroll is locked at the current location

Windmill UI

Based on Tailwind CSS, Windmill UI is a great option for quick development of easily customizable and accessible (it is built listening to a real screen reader) interfaces as well. Tailwind, a utility-first CSS framework, allows you to never leave your HTML as you style.

Since it is built on top of Tailwind, you’ll need to go through the Tailwind installation first, which can be found here. Once Tailwind is installed, follow these instructions for the Windmill install.

I’ve used Windmill before and can say it is quite effective at fast development with easy accessibility breakpoints, all in the same JS file.