DEV Community

Cover image for Top 3 React UI Libraries in 2023
Tejaswan Kalluri
Tejaswan Kalluri

Posted on • Originally published at blog.tejaswan.me

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

image

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
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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

image

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
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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

image

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
Enter fullscreen mode Exit fullscreen mode

[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>
  )
}
Enter fullscreen mode Exit fullscreen mode

Link: https://headlessui.com/

Top comments (0)