Overview

Mantine provides pre-styled React UI components.

benefits

• solid, unremarkable, 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 override some style, 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 may use them in any design or project.

mantine's packages

Mantine provides distinct packages. The main ones are Mantine core and Mantine hooks.

• Mantine's core components source-code
• Mantine's hooks source-code

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: component's inner-elements

A component is constructed through several, named, inner-elements. For example, Slider is built upon a mark, a track and a bar. We may style the inner-elements distinctively.

customization patterns

We have three main patterns:

• (Local) customization of an instance: the scope of the change is local and limited.
• (Global) override of a Mantine component: it affects all sites that use these components.
• (Global) customization of style primitives, also called theming, which affects several components.