A fully featured React
components library

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

120+ components

Build your next app faster with high-quality, well-tested components. Mantine includes everything you need to create complex we applications with ease: custom select, date pickers, notifications, modals, and more.

ReactVue

Hooks library

70+ hooks for handling tricky and common parts of your application

Browse all hooks

use-move

use-move hook handles move behavior over given element, can be used to build custom sliders

30
70
import { useState } from 'react';
import { IconGripVertical } from '@tabler/icons-react';
import { clamp, useMove } from '@mantine/hooks';
import classes from './Demo.module.css';

function Demo() {
  const [value, setValue] = useState(0.3);
  const { ref } = useMove(({ x }) => setValue(clamp(x, 0.1, 0.9)));
  const labelFloating = value < 0.2 || value > 0.8;

  return (
    <div className={classes.root}>
      <div className={classes.track} ref={ref}>
        <div
          className={classes.filled}
          style={{
            width: `calc(${value * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`,
          }}
        >
          <span className={classes.label} data-floating={labelFloating || undefined} data-filled>
            {(value * 100).toFixed(0)}
          </span>
        </div>

        <div
          className={classes.empty}
          style={{
            width: `calc(${(1 - value) * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`,
          }}
        >
          <span className={classes.label} data-floating={labelFloating || undefined}>
            {((1 - value) * 100).toFixed(0)}
          </span>
        </div>

        <div
          className={classes.thumb}
          style={{ left: `calc(${value * 100}% - var(--thumb-width) / 2)` }}
        >
          <IconGripVertical stroke={1.5} />
        </div>
      </div>
    </div>
  );
}

use-resize-observer

use-resize-observer hook tracks element size and position changes

Resize me!
Resize element by dragging its right bottom corner
PropertyValue
width0
height0
import { Text, Code } from '@mantine/core';
import { useResizeObserver } from '@mantine/hooks';

function Demo() {
  const [ref, rect] = useResizeObserver();

  return (
    <div className={classes.root}>
      <Group justify="center">
        <div ref={ref} className={classes.demo}>
          Resize me!
        </div>
      </Group>

      <Table
        captionSide="top"
        data={{
          caption: 'Resize element by dragging its right bottom corner',
          head: ['Property', 'Value'],
          body: [
            ['width', rect.width],
            ['height', rect.height],
          ],
        }}
      />
    </div>
  );
}

use-hotkeys

use-hotkeys hook allows binding keyboard shortcuts to actions

Ctrl
+
K
โ€“ Open search
Ctrl
+
J
โ€“ Toggle color scheme
import { useHotkeys } from '@mantine/hooks';
import { spotlight } from '@mantine/spotlight';
import { useMantineColorScheme } from '@mantine/core';
import { Shortcut } from './Shortcut';

function Demo() {
  const { toggleColorScheme } = useMantineColorScheme();

  useHotkeys([
    ['mod + K', () => spotlight.open()],
    ['mod + J', () => toggleColorScheme()],
    ['mod + shift + alt + X', () => secret()],
  ]);

  return (
    <>
      <Shortcut symbol="K" description="Open search" />
      <Shortcut symbol="J" description="Toggle color scheme" />
    </>
  );
}

use-eye-dropper

use-eye-dropper hook allows picking colors from anywhere on the screen

EyeDropper API is not supported in your browser

import { useState } from 'react';
import { ActionIcon, Group, ColorSwatch, Text } from '@mantine/core';
import { IconColorPicker } from '@tabler/icons-react';
import { useEyeDropper } from '@mantine/hooks';

function Demo() {
  const [color, setColor] = useState('');
  const [error, setError] = useState<Error | null>(null);
  const { supported, open } = useEyeDropper();

  const pickColor = async () => {
    try {
      const { sRGBHex } = (await open())!;
      setColor(sRGBHex);
    } catch (e) {
      setError(e as Error);
    }
  };

  if (!supported) {
    return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
  }

  return (
    <Group>
      <ActionIcon variant="default" onClick={pickColor} size="xl" radius="md">
        <IconColorPicker size={16} stroke={1.5} />
      </ActionIcon>
      {color ? (
        <Group gap="xs">
          <ColorSwatch color={color} />
          <Text>Picked color: {color}</Text>
        </Group>
      ) : (
        <Text>Click the button to pick color</Text>
      )}
      {error && <Text c="red">Error: {error?.message}</Text>}
    </Group>
  );
}

Flexible styling

Mantine components are built with native CSS โ€“ styles are performant and easy to override

Learn more about styles

Built with CSS

Mantine styles are exposed as .css files โ€“ styles are performant and do not have any runtime overhead

Override anything

All Mantine components support Styles API which allows to override any part of component styles with inline styles of classes

PostCSS preset

postcss-preset-mantine includes mixins and functions to apply dark/light, rtl and responsive styles

Compatible with any styling solution

You can bring your own library to style Mantine components (Emotion, Vanilla Extract, Sass, etc.) โ€“ you are not limited to any specific tool

.root {
  border-top-left-radius: var(--mantine-radius-xl);
  border-bottom-left-radius: var(--mantine-radius-xl);
  padding-left: 4px;

  /* The following styles will be applied only when button is disabled */
  &[data-disabled] {
    /* You can use Mantine PostCSS mixins inside data attributes */
    @mixin light {
      border: 1px solid var(--mantine-color-gray-2);
    }

    @mixin dark {
      border: 1px solid var(--mantine-color-dark-4);
    }

    /* You can target child elements that are inside .root[data-disabled] */
    & .section[data-position='left'] {
      opacity: 0.6;
    }
  }
}

.section {
  /* Apply styles only to left section */
  &[data-position='left'] {
    --section-size: calc(var(--button-height) - 8px);

    background-color: var(--mantine-color-body);
    color: var(--mantine-color-text);
    height: var(--section-size);
    width: var(--section-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mantine-radius-xl);
  }

  &[data-position='right'] {
    @mixin rtl {
      transform: rotate(180deg);
    }
  }
}

Dark color scheme

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.

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider defaultColorScheme="dark">
      <App />
    </MantineProvider>
  );
}

Combobox component

Combobox is a composable component which can be used to create custom select, multiselect, autocomplete, tags input and other similar components. It provides a lot of flexibility and gives you full control over the UI and behavior while keeping your codebase clean and simple.

Explore all 50+ Combobox examples

Autocomplete with search highlight

View example code

Multiselect with selected items limit

View example code
Pick one or more values

Creatable Multiselect

View example code

Select with search in dropdown

View example code

Select with custom option component

View example code

Transfer list with inline options list

View example code
๐ŸŽ Apples
๐ŸŒ Bananas
๐Ÿ“ Strawberries
๐Ÿฅฆ Broccoli
๐Ÿฅ• Carrots
๐Ÿฅฌ Lettuce

Extensions

Extensions are additional packages that provide extra functionality to Mantine, such as rich text editor, notifications system, charts, modals manager and more. They are built to be easily integrated into your application and provide a seamless experience.

Browse all extensions

Rich text editor

TipTap based rich text editor

Notifications system

Show/update/hide notifications at any part of your application

Spotlight

Ctrl + K command palette, can be used for search or common actions

Carousel

Embla based carousel component

Form library

@mantine/form โ€“ performant form library designed for Mantine components. Works out of the box with all Mantine inputs.

Explore all form features

Seamless integration

useForm hook works out of the box with all Mantine inputs

Excellent performance

useForm rerenders only for validation and status changes, usually only 2-3 times per form lifecycle

Lightweight

6.3kb minified + gzipped, no dependencies except React

Fully featured

useForm supports lists and nested objects, multiple validation approaches (including schema based with zod) and an easy way to manage subscriptions to values updates

import { Button, Checkbox, Group, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      email: '',
      termsOfService: false,
    },

    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
    },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <TextInput
        withAsterisk
        label="Email"
        placeholder="your@email.com"
        key={form.key('email')}
        {...form.getInputProps('email')}
      />

      <Checkbox
        mt="md"
        label="I agree to sell my privacy"
        key={form.key('termsOfService')}
        {...form.getInputProps('termsOfService', { type: 'checkbox' })}
      />

      <Group justify="flex-end" mt="md">
        <Button type="submit">Submit</Button>
      </Group>
    </form>
  );
}

Build even faster with Mantine UI

120+ responsive components
built with Mantine

Build your next website even faster with premade responsive components designed and built by Mantine maintainers and community. All components are free forever for everyone.

Loved by the community

Mantine is used by thousands of developers from all over the world. It is a community-driven project with more than 500 contributors.

View all reviews from the community
You nailed it!

Man, I've been doing Front-End for 20 years. This is, hands-down, the best component library I've ever used. What's more, the parts that I didn't like (Styling from JS Objects, slow with big forms) have been addressed in v7. Please keep it up, this library deserves more exposure, it just works and works well and beautifully. Many thanks to @rtivital and the contributors!

Absurdly good

Hope this kind of post is ok - just wanted to say thank you.

I've been writing software professionally for 25 years, with the last 15 in web (mostly internal projects in my company). This is easily the best component library I've ever used.

In every other instance I've run into the boundaries of what the library does and have to spend a lot of time and energy customizing or extending it. Not only does Mantine provide easy access to everything under the hood, but 99% the things you need are provided as default options. I've started to lose count of the "guess I'd better build my standard xyz... oh wait, they have that too" moments. Also the docs are perfect.

Bravo, thank you.

Thank you mantine ๐Ÿ’˜

Dear Mantine Team, thank you for putting this library together. I have started to use and love Mantine in my free time, and bringing this great library to good use in our company now. All the developers are very pleased with the development experience, the time savings for any bigger project is insane. The amount of flexibility we have with our designers and developers will result in great products. All thanks to every contributor. Continue the good work!

A solution for every problem

Mantine has a solution for every problem Iโ€™ve needed to solve in my web app. Components and props are named clearly, design choices promote simplicity, and it looks beautiful out of the box. Thank you for jump starting my application in a big way!

Thank you Mantine!

Out of all react component libraries that I have ever seen this one is the most straight forward, easy to use, well documented and really beautiful. I plan on switching and using this full time. Just wanted to say huge thanks to the people that made this.

Join the community

Mantine is an open-source project with a growing community of developers and contributors. Join us on GitHub, Discord, Twitter and other platforms to stay updated and get help with your projects.

Ready to get started?

Mantine can be used with any modern React framework or build tool: get started with Next.js, Vite, React Router and other tools in minutes by following the installation guide or using one of the available templates.

Get started without a framework