Mantine by Kengo

Mantine

v.Kengo

+ K

A fully featured React components library

Build fully functional accessible web applications faster than ever –Mantine includes more than 100 customizable components and 40 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

Use anywhere

Mantine supports all modern frameworks: Next.js, Remix, etc.

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

Use anywhere

Mantine supports all modern frameworks: Next.js, Remix, etc.

100 + COMPONENTS

Inputs

20+ input components

Date pickers

Calendar, date pickers, time inputs

Overlays & Navigation

Modal, HoverCard, Tabs, Stepper

Content

Accordion, Timeline

Rich text editor

Tiptap based rich text editor

Carousel

Embla based carousel

Text input

Password input

Color input

Native select

Custom select

Searchable select

Custom multi select

Autocomplete

With description

Every input can have description...

With error

...and error

Text input

Password input

Color input

Native select

Custom select

Searchable select

Custom multi select

Autocomplete

With description

Every input can have description...

With error

...and error

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 theme={{ colorScheme: 'light' }}>
      <App />
    </MantineProvider>
  );
}

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 theme={{ colorScheme: 'light' }}>
      <App />
    </MantineProvider>
  );
}

STYLES OVERRIDING

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%

function Demo() {
  const 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 },
  });

  return (
    <Slider
      defaultValue={40}
      marks={marks}
      labelTransition="fade"
      size={2}
      styles={styles}
    />
  );
}

Then apply styles and add other props:

20%

50%

80%

function Demo() {
  const 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 },
  });

  return (
    <Slider
      defaultValue={40}
      marks={marks}
      labelTransition="fade"
      size={2}
      styles={styles}
    />
  );
}

FLEXIBLE THEMING

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

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

BASED ON EMOTION

Mantine is based on emotion 👩‍🎤, take advantage of core emotion features: auto vendor-prefixing, critical css extraction during server side rendering, lazy evaluation, dynamic theming, type safe styles with TypeScript and more.

Add inline styles to any component with sx prop:

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

  function Demo() {
    return (
      <Text
        sx={{
          fontSize: 18,
  
          '&:hover': {
            backgroundColor: '#eee',
          },
  
          '@media (max-width: 755px)': {
            fontSize: 14,
          },
        }}
      >
        My custom text
      </Text>
    );
  }

HOOKS LIBRARY

use-element-size

Subscribe to element size changes

use-debounced-value

Debounce value changes

use-idle

Detect if user does nothing

use-fullscreen

Enter/exit fullscreen

use-scroll-lock

Lock scroll at current position

use-form

Forms management library

Resize textarea by dragging its right bottom corner

import { useElementSize } from '@mantine/hooks';

    function Demo() {
      const { ref, width, height } = useElementSize();
    
      return (
        <>
          <textarea ref={ref} style={{ width: 400, height: 120 }} />
          <div>Width: {width}px, height: {height}px</div>
        </>
      );
    }

Resize textarea by dragging its right bottom corner

import { useElementSize } from '@mantine/hooks';

    function Demo() {
      const { ref, width, height } = useElementSize();
    
      return (
        <>
          <textarea ref={ref} style={{ width: 400, height: 120 }} />
          <div>Width: {width}px, height: {height}px</div>
        </>
      );
    }

BUILD EVEN FASTER WITH MANTINE UI

120+ responsive components

built with Mantine

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

READY TO GET STARTED?

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:

Next.js

Vite

Create React App

Remix

Gatsby

JOIN THE COMMUNITY

Join Discord community

Ask questions, participate in new features discussions, see what people have built

Follow on Twitter

Get notified about new minor and major releases

Start a discussion

Request new features, ask questions and provide feedback with GitHub discussions

Join Discord community

Ask questions, participate in new features discussions, see what people have built

Follow on Twitter

Get notified about new minor and major releases

Start a discussion

Request new features, ask questions and provide feedback with GitHub discussions

Mantine

Build fully functional accessible web applications faster than ever

About

Contribute

About Mantine

Changelog

Releases

Community

Chat on Discord

Follow on Twitter

About Mantine

Follow on Github

GitHub discussions

Project

About

Mantine UI

Documentation

Github organization

pm organization

About

Contribute

About Mantine

Changelog

Releases

Community

Chat on Discord

Follow on Twitter

About Mantine

Follow on Github

GitHub discussions

Project

About

Mantine UI

Documentation

Github organization

pm organization

Built by Vitaly Rtishchev and these awesome people