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
Build type safe applications, all components and hooks export types
Mantine supports all modern frameworks: Next.js, Remix, etc.
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.
Every Mantine component supports visual customizations with props – you can quickly prototype and experiment by just modifying component props:
You've created new branch fix-notifications from master
2 hours ago
You've pushed 23 commits to fix-notifications branch
52 minutes ago
You've submitted a pull request Fix incorrect notification message (#187)
34 minutes ago
Robert Gluesticker left a code review on your pull request
12 minutes ago
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
Find elements that you need to change in styles API table
|track||Track element, contains all other elements|
|bar||Filled part of the track|
|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:
View more examples
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
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.
Subscribe to theme object in sx prop or createStyles function to use theme tokens in component styles:
Resize textarea by dragging its right bottom corner
Width: 0px, height: 0px