Top 3 React UI Libraries in 2023

There are so many Ui libraries that we are using in our React projects like Material UI, Chakra UI, etc. but you might be interested to explore new UI libraries which are easy to use like MUI or ChakraUI.

So today I want to share some underrated Ui libraries which you should definitely try.

Libraries Used in the article

1. Mantine UI

2. NextUI

3. HeadlessUI

1. Mantine UI

Mantine Ui is an underrated Ui library, Even I have started using Mantine UI in my personal projects.

The main advantage of using Matine UI is the Components. The components provided by the Mantine UI are lit 🔥, unlike ChakraUI the MantineUI provides 100+ components which is crazy

Mantine Ui is not only limited to components but also provides React Hooks which are useful and saves lots of time. Hooks like use-pagination for pagination use-local-storage to access local storage, use-Toggle for Toggling in the state

Features

1. 100+ components

2. Predefined hooks

3. Provides React Form (Mantine form)

4. Easy-to-use CSS

Adding To Your Project

For installing Mantine UI in your React project these steps need to be followed

npm install @mantine/core @mantine/hooks @emotion/react

Index.js

import { MantineProvider, ColorSchemeProvider } from "@mantine/core";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <MantineProvider>
            <App />
        </MantineProvider>
    </React.StrictMode>
);

That's It, I will try to make a separate Article about Matine UI installation, dark theme, hooks, etc.

Link: https://mantine.dev/

2. Next UI

NextUI is a new UI library system that can be used for both React and NextJs but NextUI gives an edge if you are using NextJs. NextUI is still in beta version which is not recommended to use in production but you can try it as a side project

Features

1. Beautiful Components

2. Dark mode

3. Easy Next js Support

4. Stitches CSS customization

Adding To Your Project

For installing NextUI in your React project these steps need to be followed

npm i @nextui-org/react

index.js

import { NextUIProvider } from '@nextui-org/react';
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
         <NextUIProvider>
            <App />
         </NextUIProvider>
    </React.StrictMode>
);

Link: https://nextui.org/

3. HeadlessUI

Most of us have moved to tailwind CSS as a goto library for writing custom CSS but the problem with custom CSS is when we start making menus, switch, model boxes, etc we need to write custom javascript to handle state. HeadlessUI will solve this problem by providing basic components which are important when writing custom CSS which saves lot of time

Features

1. Lightweight

2. Easy Transitions

3. works with both react and vue

Adding To Your Project

For installing HeadlessUI in your React project these steps need to be followed

npm install @headlessui/react

[yourcomponent].js

import { Popover } from '@headlessui/react'

function MyPopover() {
  return (
    <Popover className="relative">
      <Popover.Button>Solutions</Popover.Button>

      <Popover.Panel className="absolute z-10">
        <div className="grid grid-cols-2">
          <a href="/analytics">Analytics</a>
          <a href="/engagement">Engagement</a>
          <a href="/security">Security</a>
          <a href="/integrations">Integrations</a>
        </div>

        <img src="/solutions.jpg" alt="" />
      </Popover.Panel>
    </Popover>
  )
}

Link: https://headlessui.com/