Welcome to Mantine!

Framework guides

Get started without framework

Choose packages that you will use in your application:
Hooks for state and UI management
Core components library: inputs, buttons, overlays, etc.
Form management library
Date inputs, calendars
Notifications system
Code highlight with your theme colors and styles
Rich text editor based on Quill.js
Capture files with drag and drop
Embla based carousel component
Overlay command center
Centralized modals manager
Navigation progress
Install dependencies:
yarn add @mantine/core @mantine/hooks @emotion/react
npm install @mantine/core @mantine/hooks @emotion/react

Wrap your application root component with MantineProvider:

import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<App />

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>;

Start learning