Overview

Mantine provides infrastructure for building 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 can be used in any design.

mantine's packages

Mantine provides several 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, and for it the outline and filled variants.

terminology: root element and inner-elements

A component is constructed through a root element and several, named, inner-elements. For example, Slider is built on top of a root element (which happens to be a <div>), and various inner-elements such as mark, track and bar. We can style inner-elements individually.

The component is polymorphic when we can change the HTML element used by the root element. We set it in the component prop. For example, we can set the Button's root to be <a> instead of <button>.

customization patterns

There are three main patterns:

Per-instance customization: the scope of the change is local and limited to that instance.
Component global customization: override a Mantine component globally and affect all instances.
Style primitive global customization: override a style primitive to affect all components and instances that depend on it.