# 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673888614103/f98a415a-1c77-4041-acc9-90df1c5b416c.png align="center")

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.

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

Index.js

```javascript
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/](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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673890825952/f6a1bec1-1637-4050-9a8e-82a790fcf924.png align="center")

### Features

1. Beautiful Components
    
2. Dark mode
    
3. Easy Next js Support
    
4. [Stitches](https://stitches.dev/) CSS customization
    

### Adding To Your Project

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

```javascript
npm i @nextui-org/react
```

index.js

```javascript
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/](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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673892861272/d26cd451-56e7-4e6f-b4d9-6c94fbe9edcd.png align="center")

### 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.

```javascript
npm install @headlessui/react
```

\[yourcomponent\].js

```javascript
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/](https://headlessui.com/)