Learn the basics
This guide will help you get familiar with core Mantine concepts. Please read this guide and theming section before starting development to learn about all available theming features and components props.
Getting help
Mantine has a very friendly community, we are always happy to help you get started:
- Join the Discord community – it is the easiest way to get help, all questions are usually answered in about 30 minutes.
- GitHub Discussions – ask anything about the project or give feedback.
Using documentation
Mantine documentation includes more than 150 pages, to use it efficiently remember 2 keyboard shortcuts:
⌘ + K
orCtrl + K
– focus search field, searching components and hooks is the best way to jump straight to the page you are looking for.⌘ + J
orCtrl + J
– toggle color scheme (light/dark). All components support both light and dark color schemes, using this shortcut is the easiest way to preview both color schemes.
Mantine packages
@mantine/hooks
– collection of 30+ react hooks for state and UI management.@mantine/styles
– emotion based css-in-js library that is used in all Mantine components. Usually this package is installed automatically and exported from@mantine/core
– there is no need to install it separately, learn more about createStyles here.@mantine/core
– core components library – 100+ components, exports everything from@mantine/styles
.@mantine/notifications
– a fully featured notifications system.@mantine/prism
– code highlight built with prism-react-renderer.@mantine/rte
– a Quill based rich text editor.@mantine/dropzone
– manages files drag 'n' drop of files to an area or the entire screen.@mantine/ssr
– server side rendering utilities.@mantine/next
– components and ssr utils for Next.js integration.gatsby-plugin-mantine
– Gatsby plugin to setup ssr.@mantine/eslint-config
– ESLint and Prettier configuration that the Mantine project uses.
Theming
Mantine theming supports changing colors, spacing, box-shadows, font families, font sizes and many other properties. To configure theme, wrap your app with a MantineProvider component:
Learn more about MantineProvider and extending theme.
Dark color scheme
All Mantine components support light and dark color scheme out of the box. You can edit the details of each color scheme via MantineProvider:
To learn how to implement color scheme changes via context follow dark theme guide.
Writing styles
createStyles
Mantine is built with a css-in-js library based on emotion. You can use any other styling solution but we recommend working with createStyles to avoid styles collisions.
createStyles
usage demo:
Styling components internals with Styles API
Styles API lets you add styles to any internal part of a component:
Components props
Shared props
All Mantine components support these props:
className
– adds class to root element.style
– adds style to root element.- Margin props:
m
– setsmargin
property on root element.my
– setsmargin-top
andmargin-bottom
properties on root element.mx
– setsmargin-right
andmargin-left
properties on root element.mt
– setsmargin-top
property on root element.mb
– setsmargin-bottom
property on root element.ml
– setsmargin-left
property on root element.mr
– setsmargin-right
property on root element.
- Padding props:
p
– setspadding
property on root elementpy
– setspadding-top
andpadding-bottom
properties on root elementpx
– setspadding-right
andpadding-left
properties on root elementpt
– setspadding-top
property on root elementpb
– setspadding-bottom
property on root elementpl
– setspadding-left
property on root elementpr
– setspadding-right
property on root element
Margin props can get value from theme.spacing
:
Same is applied to padding props:
Color prop
Mantine components work with colors defined in theme.colors.
theme.colors
is an object that contains an array of 10 shades per each color. To use predefined colors in components set color
prop:
You can extend theme with any amount of your colors:
Note that component appearance usually depends on variant
prop and current theme.colorScheme
.
Sizes
Most Mantine components support size
prop with xs, sm, md, lg and xl values:
The size
prop controls various css properties across all supported components.
In some components where size is associated with only one value, you can set it in px:
Spacing and padding
Components that have padding get values from theme.spacing, default values are:
To change these values set spacing
property on theme:
Later when you use Mantine components you can reference these values in spacing
or other similar props or set the spacing in px:
Shadows
Components that use the box-shadow property get values from theme.shadows, default values are:
To change these values set the shadows
property on theme:
Later when you use Mantine components you can reference these values in shadow
prop or define your own shadow:
Polymorphic components
Some Mantine components support changing root element with component
prop,
you can pass html element or React component to the prop:
To use Mantine components with Next.js Link:
- set
component
prop toa
- wrap it with Link
If you use polymorphic with TypeScript you will also need to set type for full types coverage, otherwise you will have untyped event handlers and ref props:
Getting element ref
You can get ref of most components with their ref
prop:
Server side rendering
To setup server side rendering follow one of these guides
- Server side rendering with Next.js
- Server side rendering with Gatsby.js
- Server side rendering with express server
TypeScript
Exported types
@mantine/core package export types to help you build components and styles with TypeScript:
MantineTheme
– theme interface defined in MantineProvider.ColorScheme
– union of'light' | 'dark'
.MantineColor
– union of all default colors, also accepts any string.MantineGradient
– gradient interface used in Button, ThemeIcon and other components.MantineShadow
– union of all default shadows.MantineSize
– union of'xs' | 'sm' | 'md' | 'lg' | 'xl'
.MantineNumberSize
– union ofMantineSize | number
.
Components props
You can import props type of any component by adding Props
to the component name:
Polymorphic components types
@mantine/core package exports PolymorphicRef
and PolymorphicComponentProps
types to help you build
custom components with ref forwarding: