Mantine

Build fully functional accessible web applications faster than ever – Mantine includes more than 120 customizable components and hooks to cover you in any situation

Free and open source

All packages have MIT license, you can use Mantine in any project

TypeScript based

Build type safe applications, all components and hooks export types

No annoying focus ring

Focus ring will appear only when user navigates with keyboard

Get started

GitHub

Explore examples

Core components library

Mantine core library includes all essential components: inputs, buttons, modals, popovers, typography elements, layout management, etc.

Custom select

Autocomplete

Number input

Color input

Slider and RangeSlider

Theming

Extend default theme with any amount of additional colors, replace shadows, radius, spacing, fonts and many other properties to match your design requirements.

Mantine theme is just an object, you can subscribe to it in any part of application via context and use it to build your own components.

Learn more about theming

Bright pink badge

import { Badge, Button, MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{
      fontFamily: 'Greycliff CF, sans-serif',
      colors: {
        'ocean-blue': ['#7AD1DD', '#5FCCDB', '#44CADC', '#2AC9DE', '#1AC2D9', '#11B7CD', '#09ADC3', '#0E99AC', '#128797', '#147885'],
        'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
      },
    }}>
      <Button color="ocean-blue">Ocean blue button</Button>
      <Badge color="bright-pink" variant="filled">Bright pink badge</Badge>
    </MantineProvider>
  );
}

Dark theme

Add dark theme to your application with just a few lines of code – Mantine exports global styles both for light and dark theme, all components support dark theme out of the box.

Learn how to setup dark theme

Hooks library

Mantine comes with more than 30 hooks to manage state and UI to help you build custom components.

All hooks that are used to build Mantine components are exported from @mantine/hooks package, hooks do not depend on components packages, you can use them independently in any react application.

use-scroll-lock hook

import { useScrollLock } from '@mantine/hooks';
import { Button } from '@mantine/core';

function Demo() {
  const [scrollLocked, setScrollLocked] = useScrollLock();
  const label = scrollLocked ? 'Unlock scroll' : 'Lock scroll';
  return <Button onClick={() => setScrollLocked((c) => !c)}>{label}</Button>;
}

use-click-outside hook

import { useState } from 'react';
import { Paper, Button } from '@mantine/core';
import { useClickOutside } from '@mantine/hooks';

function Demo() {
  const [opened, setOpened] = useState(false);
  const ref = useClickOutside(() => setOpened(false));
  return (
    <>
      <Button onClick={() => setOpened(true)}>Open dropdown</Button>
      {opened && <Paper ref={ref} shadow="sm">Click outside to close</Paper>}
    </>
  );
}

Transitions API

Animate presence with premade transition or build your own animation with simple API, all Mantine components support custom transitions

Learn more about Transition component

Use premade transitions with any component

Or create your own transitions

const scaleY = {
  in: { opacity: 1, transform: 'scaleY(1)' },
  out: { opacity: 0, transform: 'scaleY(0)' },
  common: { transformOrigin: 'top' },
  transitionProperty: 'transform, opacity',
};

<Modal transition={scaleY} transitionDuration={300}>
  <AuthenticationForm />
</Modal>

Notifications system

A fully featured notifications system integrates seamlessly with your Mantine theme.

Get started with @mantine/notifications

import { Button } from '@mantine/core';
import { useNotifications } from '@mantine/notifications';

function Demo() {
  const notifications = useNotifications();
  const showNotification = () => notifications.showNotification({
    title: 'Default notification',
    message: 'Hey there, your code is awesome! 🤥',
  });

  return (
    <Button onClick={showNotification}>
      Show notification
    </Button>
  );
}

Rich text editor

A Quill.js based rich text editor: handles images uploads, supports embedded video, integrates seamlessly with your Mantine theme

Get started with @mantine/rte

Explore Mantine UI

Mantine UI is a set of more than 120 responsive components built with Mantine. All components support dark/light color scheme and Mantine theme customizations. Mantine UI is free for everyone.

View components

Source code

Components customization

Each Mantine component supports styles overriding for every internal element inside with classes or inline styles. This feature alongside other customization options allows you to implement any visual modifications to components and adapt them to fit almost any design requirements.

Default slider styles

20%

50%

80%

<Slider defaultValue={40} marks={marks} />

Find elements that you need to change in styles API table

Name	Description
root	Root element
track	Track element, contains all other elements
bar	Filled part of the track
thumb	Main control
dragging	Styles added to thumb while dragging
label	Label element, displayed above thumb
markWrapper	Wrapper around mark, contains mark and mark label
mark	Mark displayed on the track
markFilled	Styles added to mark when it is located in filled area
markLabel	Mark label, displayed below track

Then apply styles and add other props:

20%

50%

80%

<Slider
  defaultValue={40}
  marks={marks}
  labelTransition="fade"
  size={2}
  styles={(theme) => ({
    track: { '&::before': { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1] } },
    mark: { width: 6, height: 6, borderRadius: 6, transform: 'translateX(-3px) translateY(-2px)', borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1] },
    markFilled: { borderColor: theme.colors.blue[6] },
    markLabel: { fontSize: theme.fontSizes.xs, marginBottom: 5, marginTop: 0 },
    thumb: { height: 16, width: 16, backgroundColor: theme.white, borderWidth: 1, boxShadow: theme.shadows.sm },
  })}
/>

Learn more about Styles API

Use anywhere

Mantine works in all modern environments – get started instantly with Next.js, Gatsby.js, create-react-app, Vite or Remix by following getting started guide:

Join the community

Mantine has a very friendly community, we are always open to new ideas and feedback. Join us on Discord or GitHub Discussions to get any kind of help or on Twitter to get notified about releases.

GitHub Discussions

Join Discord community

Follow Mantine on Twitter

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community