Guide · Open source
How to use Mantine: install, components and hooks for React
Updated · written with AI from the project's own documentation and checked against our catalogue data
Mantine is an open-source React component library written in TypeScript. It provides ready-made interface parts such as buttons, forms and modals, plus a set of helper hooks for common state and UI tasks. This guide explains what is in the package set, what you need before you start, and how to decide which parts to use.
Mantinemantinedev/mantine · ★ 31.9k · MIT Install options & downloads Quick start
- 1Check prerequisites. Make sure you have Node.js and a React project, or a framework that uses React.
- 2Read the documentation. Open https://mantine.dev/ to find the install steps for your setup.
- 3Install the packages you need. Start with @mantine/core and add hooks, forms or notifications as your project requires.
- 4Apply dark mode and theming. Follow the documentation to enable the built-in dark mode and theme settings.
- 5Build your interface. Use the components for buttons, forms and modals, and the hooks for common state and UI tasks.
- 6Ask for help if needed. Use the Discord community or GitHub Discussions for questions.
What do you need before you use Mantine?
Mantine is only for React. The project's own summary says it is a library for building websites and apps with React and TypeScript, so you need a React project or a framework that uses React. You also need Node.js, which the install prerequisites list.
- Node.js
- A React project, or a framework that uses React
- Basic React knowledge (the library is not meant for people with no React experience)
Which Mantine packages should you install?
Mantine is split into separate packages, so you only add what you need. The core package holds the component library, and the hooks package holds the helper hooks. Other packages cover forms, charts, notifications and more.
- @mantine/core: core components library, 100+ components
- @mantine/hooks: collection of 80+ hooks for state and UI management
- @mantine/form: forms management library
- @mantine/notifications: a fully featured notifications system
- @mantine/modals: centralized modals manager
- @mantine/charts: recharts based charts library
- @mantine/dropzone: manages files drag 'n' drop to an area or entire screen
- @mantine/spotlight: Ctrl + K command center for your application
Install Mantine in a React project
The README's install instructions point to the documentation at mantine.dev for setup in a project. The only command shown in the README is for cloning the repository to get source access. Use the official documentation for the package install steps for your project setup.
If you want to read or modify the source itself, clone the repository.
- Open the documentation at https://mantine.dev/ for installation steps
- Use your package manager to add the packages you need
git clone https://github.com/mantinedev/mantineUse Mantine components and hooks in your app
Components cover common interface needs such as buttons, forms and modals. Hooks provide reusable logic for state and UI behaviour. Mix them as your project requires instead of writing each piece from scratch.
The @mantine/form package is a dedicated forms management library, so you can handle form state with it rather than building your own.
- Start with @mantine/core for the basic interface parts
- Add @mantine/form when you need form state handling
- Add @mantine/notifications for a notifications system
- Add @mantine/modals for a centralized modals manager
Set up dark mode and theming
Mantine includes dark mode and theming support built in, which the project highlights as a reason teams choose it. Check the documentation at https://mantine.dev/ for the exact provider and configuration steps.
Where to get help with Mantine
The maintainers point users to the Discord community, where questions are usually answered in about 30 minutes according to the README. You can also use GitHub Discussions to ask questions or give feedback, and the Changelog lists releases.
- Discord: https://discord.gg/wbH82zuWMN
- GitHub Discussions: https://github.com/mantinedev/mantine/discussions
- Changelog: https://mantine.dev/changelog/all-releases
What people use it for
- Building a React web app with many components out of the box
- Adding forms with @mantine/form and notifications with @mantine/notifications
- Adding charts with @mantine/charts, which is based on recharts
- Adding a Ctrl + K command center with @mantine/spotlight
- Building a rich text editor with @mantine/tiptap
Frequently asked questions
Is Mantine free to use?
Yes. Mantine is an MIT-licensed open source project, according to its README. The project is funded by backers on OpenCollective.
What do I need to install Mantine?
The install prerequisites are Node.js and a React project, or a framework that uses React. Mantine is only for React code.
Can I use Mantine without React?
No. The library is only for React, so it is not suitable for people who are not writing React code.
Is Mantine good for TypeScript projects?
Mantine is written in TypeScript and is described as suitable for projects written in TypeScript.
What are alternatives to Mantine?
Comparable projects named in the source are Chakra UI, Material UI, Ant Design and shadcn/ui. Compare them against the components, theming and licensing you need.
Where can I get help if Mantine is not working?
Join the Discord community, which the README says usually answers questions in about 30 minutes, or ask on GitHub Discussions.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Mantine suits React developers who want many components, dark mode and theming, forms and notifications built in, especially in TypeScript projects. It is not a good choice for people who do not write React, for beginners without React basics, or for projects that need a very different look without customization work.
Install options & downloads