Learn the basics
This guide will help you get familiar with core Mantine concepts. Please read this guide, theming and styles sections before starting development to learn about all available theming and styling features.
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.⌘ + Shift + L
orCtrl + Shift + L
– toggle text direction (LTR/RTL)
Theming
Theme object supports changing colors, spacing, box-shadows, font families, font sizes and many other properties. To configure theme, wrap your app with a MantineProvider component:
Dark color scheme
All Mantine components support light and dark color scheme out of the box. 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.
Core createStyles
features overview:
Styling components internals with Styles API
Styles API lets you add styles to any internal part of a component with inline styles or classes:
Components 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:
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 Remix
- General approach to setup ssr in any other environment
TypeScript
Exported types
@asuikit/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: