Overview
Mantine provides an infrastructure to build React apps efficiently, with pre-styled UI components and feature-rich utilities.
benefits
- solid UI defaults: neutral, minimalist, functional style
- easy-to-use, consistent API (DX)
- rapid development of utilitarian and productivity apps
mantine style is opinionated and cohesive
Mantine brings a set of cohesive style defaults.
If we aim to do a partial style override, we should make it compatible with the Mantine overall look.
Some components, such as layout components and Mantine hooks, don't have a visible style, so we can use them in any design.
mantine's packages
Mantine provides distinct packages. The main ones are Mantine core and Mantine hooks.
terminology: components and component variants
Mantine provides components, and for some of them, variants. For example, it provides the Button component, for which it provides the outline and filled variants.
terminology: root element and inner-elements
A component is constructed through a top level element (root) and several, named, inner-elements. For example, Slider is built upon a root top level element, and has various inner elements such as mark, track and bar. We can style inner-elements.
When the component is polymorphic, it has a flexible top level element, that we can set through the component prop. For example, we can change the Button top element to be <a> instead.
customization patterns
We have three main patterns:
- (Local change) customize a single instance: the scope of the change is local and limited to that instance.
- (Global change) override a Mantine component: it affects all its instances.
- (Global change) override style primitives, also called theming: it affects several components and their instances.