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
Mantine UI
NextUI
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
100+ components
Predefined hooks
Provides React Form (Mantine form)
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
Beautiful Components
Dark mode
Easy Next js Support
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
Lightweight
Easy Transitions
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/
Top comments (0)