earlymorning.dev / Mantine / Overview
Switch to infinite scroll (Full book)

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/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.

Layout components and hooks, on the other hand, can be used in any design.

mantine's packages

Mantine provides several packages. Mantine's core and hooks are the two main ones. Source code:

terminology: components and component variants

Mantine provides components, and for some of them, variants. For example, it provides the Button component, and for it, it provides the outline and filled variants.

terminology: inner-elements

Components are constructed through inner-elements, each with a name, the first being the root element.

For example, Slider is built on top of root (which happens to be a <div>), and various other inner-elements such as mark, track and bar. The point of having named inner-elements is for styling: we target inner-elements with their name.

In this document, and because the root element is special, we sometimes exclude it from the inner-elements category to treat it differently.

The component is polymorphic when we can change which HTML element is used as the component's root element (we set it in the component prop). For example, we can ask to use an anchor tag <a> for the root of a Button instead of <button> , when the action is really navigation.

customization routes

There are three main ways to customize style:

  • Per-instance customization: the scope of the change is local to a single instance of a component.
  • Component global override: override a Mantine component globally, affecting all instances.
  • Global override of style primitives: override a style primitive, affecting all components (and instances) that depend on it.

shipped stylesheets

The stylesheets shipped on npm have been processed by PostCSS.

Mantine ships two kind of stylesheets:

  • it ships a standalone 232kb stylesheet that includes style for all core elements.
  • it also ships smaller stylesheets, focusing on one or more components.
earlymorning logo

© Antoine Weber 2026 - All rights reserved

earlymorning.dev / Mantine / Overview

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/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.

Layout components and hooks, on the other hand, can be used in any design.

mantine's packages

Mantine provides several packages. Mantine's core and hooks are the two main ones. Source code:

terminology: components and component variants

Mantine provides components, and for some of them, variants. For example, it provides the Button component, and for it, it provides the outline and filled variants.

terminology: inner-elements

Components are constructed through inner-elements, each with a name, the first being the root element.

For example, Slider is built on top of root (which happens to be a <div>), and various other inner-elements such as mark, track and bar. The point of having named inner-elements is for styling: we target inner-elements with their name.

In this document, and because the root element is special, we sometimes exclude it from the inner-elements category to treat it differently.

The component is polymorphic when we can change which HTML element is used as the component's root element (we set it in the component prop). For example, we can ask to use an anchor tag <a> for the root of a Button instead of <button> , when the action is really navigation.

customization routes

There are three main ways to customize style:

  • Per-instance customization: the scope of the change is local to a single instance of a component.
  • Component global override: override a Mantine component globally, affecting all instances.
  • Global override of style primitives: override a style primitive, affecting all components (and instances) that depend on it.

shipped stylesheets

The stylesheets shipped on npm have been processed by PostCSS.

Mantine ships two kind of stylesheets:

  • it ships a standalone 232kb stylesheet that includes style for all core elements.
  • it also ships smaller stylesheets, focusing on one or more components.