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
Download more icon variants from https://tabler-icons.io/i/scale
Free and open source
All packages have MIT license, you can use Mantine in any project
Download more icon variants from https://tabler-icons.io/i/lifebuoy
TypeScript based
Build type safe applications, all components and hooks export types
Download more icon variants from https://tabler-icons.io/i/rocket
Use anywhere
Mantine supports all modern frameworks: Next.js, Remix, etc.

100+ components

Every input can have description...

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

Customize components

Every Mantine component supports visual customizations with props – you can quickly prototype and experiment by just 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
xs
sm
md
lg
xl
Align
import { Timeline } from '@mantine/core';
function Demo() {
return (
<Timeline active={1}>
{/* 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%
<Slider defaultValue={40} marks={marks} />
Find elements that you need to change in styles API table
NameDescription
rootRoot element
trackTrack element, contains all other elements
barFilled part of the track
thumbMain control
draggingStyles added to thumb while dragging
labelLabel element, displayed above thumb
markWrapperWrapper around mark, contains mark and mark label
markMark displayed on the track
markFilledStyles added to mark when it is located in filled area
markLabelMark 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}
/>
);
}
View more examplesDownload more icon variants from https://tabler-icons.io/i/arrow-right

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>
);
}
For more complex styles use createStyles function to separate styles from markup:
import { createStyles } from '@mantine/core';
const useStyles = createStyles({
parent: {
backgroundColor: 'pink',
'&:hover': {
backgroundColor: 'orange',
},
},
child: {
fontSize: 14,
lineHeight: 1.45,
},
active: {
backgroundColor: 'white',
},
});
function Demo() {
const { classes, cx } = useStyles();
return (
<div className={classes.parent}>
<div className={classes.child}>Child</div>
<div className={cx(classes.child, classes.active)}>Active child</div>
</div>
);
}
Subscribe to theme object in sx prop or createStyles function to use theme tokens in component styles:
import { Text } from '@mantine/core';
function Demo() {
return (
<Text
sx={(theme) => ({
backgroundColor: theme.colors.gray[0],
fontSize: theme.fontSizes.sm,
'@media (max-width: 755px)': {
fontSize: theme.fontSizes.xs,
}
})}
>
My custom text
</Text>
);
}
You can use theme functions anywhere where Mantine theme is available:
import { Text } from '@mantine/core';
function Demo() {
return (
<Text
sx={(theme) => ({
background: theme.fn.linearGradient(24, '#000', '#fff'),
[theme.fn.smallerThan('sm')]: {
color: theme.fn.rgba('#fff', 0.5),
},
})}
>
My custom text
</Text>
);
}
Add context styles with MantineProvider that will be applied to every component:
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
components: {
Button: {
styles: (theme) => ({
root: {
backgroundColor: theme.colors.indigo[7],
color: theme.white,
},
}),
},
TextInput: {
styles: (theme) => ({
label: {
color: theme.colors.gray[7],
fontSize: theme.fontSizes.xs,
textTransform: 'uppercase',
},
}),
},
},
}}
>
<App />
</MantineProvider>
);
}
Use styled components syntax with Mantine theme and @emotion/styled:
import styled from '@emotion/styled';
const StyledComponent = styled.div`
text-align: center;
background-color: ${({ theme }) =>
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0]};
padding: 30px;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: ${({ theme }) =>
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]};
}
`;
function Demo() {
return <StyledComponent />;
}

Hooks library

Resize textarea by dragging its right bottom corner
Width: 0px, height: 0px
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

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.

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: