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

Get started GitHub

100 components

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 defaultColorScheme="dark">
      <App />
    </MantineProvider>
  );
}

Customize components

Every Mantine component supports visual customizations with props – you can quickly prototype and experiment by modifying component props:

New branch

You've created new branch fix-notifications from master

2 hours ago

Commits

You've pushed 23 commits to fix-notifications branch

52 minutes ago

Pull request

You've submitted a pull request Fix incorrect notification message (#187)

34 minutes ago

Code review

Robert Gluesticker left a code review on your pull request

12 minutes ago

Color

Radius

Active

Reverse active

Line width

Bullet size

Align

Left

Right

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

function Demo() {
  return (
    <Timeline active={1} bulletSize={25}>
      {/* items */}
    </Timeline>
  );
}

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%

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

const marks = [
  { value: 20, label: '20%' },
  { value: 50, label: '50%' },
  { value: 80, label: '80%' },
];

function Demo() {
  return <Slider defaultValue={40} marks={marks} />;
}

Find elements that you need to change in styles API table

Name	Description
root	Root element
label	Thumb label
thumb	Thumb element
trackContainer	Wraps track element
track	Slider track
bar	Track filled part
markWrapper	Contains `mark` and `markLabel` elements
mark	Mark displayed on track
markLabel	Label of the associated mark, displayed below track

Then apply styles and add other props:

20%

50%

80%

.track {
  &::before {
    background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));
  }
}

.mark {
  width: rem(6px);
  height: rem(6px);
  border-radius: rem(6px);
  transform: translateX(rem(-3px)) translateY(rem(-2px));
  border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));

  &[data-filled] {
    border-color: var(--mantine-color-blue-6);
  }
}

.markLabel {
  font-size: var(--mantine-font-size-xs);
  margin-bottom: rem(5px);
  margin-top: 0;
}

.thumb {
  height: rem(16px);
  width: rem(16px);
  background-color: var(--mantine-color-white);
  border-width: rem(1px);
  box-shadow: var(--mantine-shadow-sm);
}

View more examples

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, createTheme } from '@mantine/core';

const theme = createTheme({
  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'],
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Button color="ocean-blue">Ocean blue button</Button>
      <Badge color="bright-pink" variant="filled">Bright pink badge</Badge>
    </MantineProvider>
  );
}

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.

Explore components View on GitHub

Hooks library

Resize textarea by dragging its right bottom corner

Width: 0, height: 0

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

function Demo() {
  const { ref, width, height } = useElementSize();

  return (
    <>
      <textarea ref={ref} style={{ width: rem(400), height: rem(120) }} />
      <div>Width: {width}, height: {height}</div>
    </>
  );
}

What people say

@sideral

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!

@smsuraj100

One of the best UI libraries I've come across.

I am a senior Frontend Developer and wanted to use something new instead of Material UI and came across this, it has been well thought of all the different scenarios you and come across, and the hooks are just pure love :)

Thank you so much for this.

@leighton-carr

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.

@Gitgud6969

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!

@SeeSharpCode

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!

@OmkoBass

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.

@wvha

Mantine >>>

I started using Mantine for a personal project and it covers so many cases!! Enjoying every part of it so far and can't wait to get more in-depth with it.

@adamhp

Insane documentation

I just have to say that the level of documentation, examples, and pure utility this provides is insane. Thanks to all the contributors.

View more user feedback

Ready to get started?

Mantine can be used both for SPA and SSR applications. Follow one of the getting started guides to build an application with Mantine using Vite, Next.js, Remix, RedwoodJS or Gatsby:

Recommended

Vite

Best choice for a single page application (SPA)

Recommended

Next.js

Best choice for an application with SSR

Remix

Get started with Remix

Redwood

Get started with RedwoodJS

Gatsby

Get started with Gatsby