Meet Mantine: A TS-Based Open-Source React Components Library
Tailwind? Material? Chakra? You must hear a lot about the different kinds of UI choices for your projects. The better the experience and performance, the more popular it will be.
Developers keep building awesome UIs for users who can be more productive and have an improved experience. This is so we can save more time to create new generational masterpieces. In this regard, I found the UI named Mantine which was published in 2021 and which keeps releasing new functions for now.
Mantine is a React components library focused on providing a great user and developer experience and that comes with native dark theme support.
In 2021, the number of users kept increasing.
The UI can work with different frameworks such as Next.js, Vite, Create React App, Remix and Gatsby. Or can start without the framework.
Packages
@mantine/hooks– collection of 40+ hooks for state and UI management
@mantine/styles– emotion based css-in-js library that is used in all Mantine components
@mantine/core– core components library – 100+ components, exports everything from@mantine/styles
@mantine/form– forms management library
@mantine/notifications– a fully featured notifications system
@mantine/spotlight–Ctrl + Kcommand center for your application
@mantine/prism– code highlight built with prism-react-renderer
@mantine/rte– a Quill based rich text editor
@mantine/dropzone– manages files drag 'n' drop to an area or entire screen
@mantine/carousel– Carousel component
@mantine/nprogress– navigation progress
@mantine/modals– centralized modals manager
@mantine/ssr– server side rendering utilities
@mantine/next– server side rendering utilities for Next.js
@mantine/remix– server side rendering utilities for Remix
gatsby-plugin-mantine– Gatsby plugin to setup server side rendering
eslint-config-mantine– ESLint and Prettier configuration that is used in all Mantine projects
More in the Documentation
How to get started?
npm install @mantine/core @mantine/hooks @emotion/reactWrap your application root component with the MantineProvider:
import { MantineProvider } from '@mantine/core';function Demo() {return (<MantineProvider withGlobalStyles withNormalizeCSS><App /></MantineProvider>);}
All set! You can now import and use Mantine components anywhere in your application:
import { Button } from '@mantine/core';function Demo() {return <Button>Click me!</Button>;}
For the framework users, it would be easier to apply. Such as Create react app:
First, generate the new app,
npx create-react-app my-mantine-app — template typescriptThen install Mantine,
npm install @mantine/core @mantine/hooks @emotion/reactReplace the contents of App.tsx with:
import { MantineProvider, Text } from '@mantine/core';export default function App() {return (<MantineProvider withGlobalStyles withNormalizeCSS><Text>Welcome to Mantine!</Text></MantineProvider>);}
All set! Start the development server:
npm run devThe awesome part of the UI is that there are 123 responsive components built with it.
It’s super easy to use the prebuilt components in your projects without a headache.
More components to look up here.
Which do you think is better? Mantine or Material UI? Let’s compare them.
1. Mantine is a React components library with native dark theme support (by mantinedev). Whereas MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components. (by mui).
2. Mantine is built with TypeScript with dark theme mode. Material UI is built with JavaScript.
Here is a review about them:
What are some alternatives?
Listed below are some alternatives sourced from libhunt that you can also consider when comparing Material UI and Mantine for projects.
antd — An enterprise-class UI design language and React UI library
chakra-ui — ⚡️ Simple, Modular & Accessible UI Components for your React Applications
Tailwind CSS — A utility-first CSS framework for rapid UI development.
rsuite — 🧱 A suite of React components .
daisyui — ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ The most popular, free and open-source Tailwind CSS component library
primereact — The Most Complete React UI Component Library
Ionic Framework — A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
react-admin — A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design
vechaiui — A set of high-quality accessible React UI components with the built-in dark mode using Tailwind CSS. Pre-designed headless ui and radix-ui.
styled-components — Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
I can not wait to try them for my next projects!
Keep up doing what you want. Say hi to all of us on the road to the peak.
Please follow and be my study buddy. Peace.✌️
