Mantine

# Mantine — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Mantine. "Mantine" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Mantine
**Owner:** Mantine
**Official documentation:** https://mantine.dev/
**Visual character:** Batteries-included pragmatism: ten-step palettes for every hue, hooks for everything, and defaults that ship a product tonight.

---

## Summary

Comprehensive React UI library with one of the best hook collections.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blue 6 / Primary | `#228be6` | `--mantine-color-blue-6` | Primary actions (default primaryColor) |
| Dark 9 Text | `#141517` | `--mantine-color-dark-9` | Darkest text |
| Gray 7 | `#495057` | `--mantine-color-gray-7` | Secondary text |
| White | `#ffffff` | `--mantine-color-white` | Surfaces |
| Gray 0 | `#f8f9fa` | `--mantine-color-gray-0` | Subtle background |
| Gray 3 Border | `#dee2e6` | `--mantine-color-gray-3` | Borders |
| Red 6 | `#fa5252` | `--mantine-color-red-6` | Errors |
| Green 6 | `#40c057` | `--mantine-color-green-6` | Success |
| Yellow 6 | `#fab005` | `--mantine-color-yellow-6` | Warnings |

## Typography

- **Body:** System stack — weights 400, 500, 700 — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif`
- **Mono:** ui-monospace — weights 400 — `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `34px` | `44px` |
| h2 | `26px` | `34px` |
| h3 | `22px` | `29px` |
| md (body) | `16px` | `24px` |
| sm | `14px` | `21px` |
| xs | `12px` | `17px` |

## Spacing

Base unit: `16px (md)`

Scale: `10px` · `12px` · `16px` · `20px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| sm | `4px` |
| md | `8px` |
| lg | `16px` |
| xl | `32px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| sm | `0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1)` |
| md | `0 1px 3px rgba(0,0,0,0.05), 0 8px 16px -8px rgba(0,0,0,0.15)` |

## Motion

| Name | Value |
| --- | --- |
| default | `100ms ease` |

## Quick start (CSS)

```css
/* Mantine — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://mantine.dev/ */

:root {
  /* Color */
  --mantine-color-blue-6: #228be6; /* Primary actions (default primaryColor) */
  --mantine-color-dark-9: #141517; /* Darkest text */
  --mantine-color-gray-7: #495057; /* Secondary text */
  --mantine-color-white: #ffffff; /* Surfaces */
  --mantine-color-gray-0: #f8f9fa; /* Subtle background */
  --mantine-color-gray-3: #dee2e6; /* Borders */
  --mantine-color-red-6: #fa5252; /* Errors */
  --mantine-color-green-6: #40c057; /* Success */
  --mantine-color-yellow-6: #fab005; /* Warnings */

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale */
  --text-h1: 34px /* line-height 44px */;
  --text-h2: 26px /* line-height 34px */;
  --text-h3: 22px /* line-height 29px */;
  --text-md-body-: 16px /* line-height 24px */;
  --text-sm: 14px /* line-height 21px */;
  --text-xs: 12px /* line-height 17px */;

  /* Spacing */
  --space-1: 10px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 32px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
  --shadow-md: 0 1px 3px rgba(0,0,0,0.05), 0 8px 16px -8px rgba(0,0,0,0.15);

  /* Motion */
  --motion-default: 100ms ease;
}
```

## Origin

Vitaly Rtishchev started Mantine in 2021. It rapidly grew into a substantial React UI library — over 100 components plus 50+ hooks — with a consistent API and good TypeScript support. v7 (2023+) introduced PostCSS modules and dropped runtime CSS-in-JS.

## Governance

Maintainer-led, open source. Public roadmap on GitHub. Major versions (v6 → v7) ship breaking changes intentionally; the migration paths are documented.

## Known for

- Hook library — `@mantine/hooks` is widely used even by teams that don't adopt the component library.
- Notifications system — one of the best out-of-the-box toast / notification stacks in the ecosystem.
- Form management via `@mantine/form` — lightweight, schema-friendly, integrates with any validator.

## Underrated

- RichText editor (`@mantine/tiptap`) ships a solid Tiptap-based rich text editor without the integration cost of building one.
- DatesPickerInput and NumberInput handle locale, formatting, and validation in ways most React date pickers don't.

## Watch out for

- v7's switch from Emotion to CSS modules is significant — projects on v6 face a real migration.
- The component library is large; full adoption can mean shipping more JS than equivalent shadcn-style copy-the-component approaches.

## Components worth studying

- **DataTable (mantine-datatable)** — Community-backed data grid that fills Mantine's gap for enterprise tables.
- **Notifications** — Stack + queue + per-notification styling with a single API.
- **useForm** — Form state with built-in validation, field arrays, and Zod/Yup integration.

## When to choose Mantine

Pick Mantine when you want a batteries-included React UI library with strong TypeScript and good defaults. For minimal-footprint projects or teams who want to own component source, prefer shadcn/ui or Radix primitives.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Mantine by Mantine — Comprehensive React UI library with one of the best hook collections. Character: Batteries-included pragmatism: ten-step palettes for every hue, hooks for everything, and defaults that ship a product tonight. Use a primary colour near #228be6, the typeface "System stack" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 16px (md) base. Lean into what it's known for: Hook library — `@mantine/hooks` is widely used even by teams that don't adopt the component library. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Mantine docs](https://mantine.dev/)
- [Mantine on GitHub](https://github.com/mantinedev/mantine)
- [Mantine hooks](https://mantine.dev/hooks/package/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/mantine) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._