Mantine Design System

# Mantine — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: high
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/mantine
sources:
  - https://mantine.dev/
  - https://mantine.dev/theming/colors/
  - https://mantine.dev/theming/typography/
  - https://github.com/mantinedev/mantine
```

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

_Editorial confidence: high. Values are drawn from well-documented public token references. Checked against @mantine/core 9.6.0 on 2026-09-05. Relative sizes and shadows resolve the default theme.scale = 1; they are not fixed pixel values or a promise about customized providers. Line heights are the package ratios. Unreviewed role descriptions and motion remain unknown. Field-level evidence: 36/83 claims source-linked, 36/83 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=mantine)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blue 6 / Primary | `#228be6` | `--mantine-color-blue-6` | Primary actions (default primaryColor) |
| Dark 9 | `#141414` | `--mantine-color-dark-9` | Dark palette shade 9; component text uses semantic theme variables |
| Gray 7 | `#495057` | `--mantine-color-gray-7` | Secondary text |
| White | `#fff` | `--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, 600, 700 — `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji`
- **Mono:** ui-monospace — weights 400 — `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `2.125rem` | `1.3` |
| h2 | `1.625rem` | `1.35` |
| h3 | `1.375rem` | `1.4` |
| md (body) | `1rem` | `1.55` |
| sm | `0.875rem` | `1.45` |
| xs | `0.75rem` | `1.4` |

## Spacing

Base unit: `1rem`

Scale: `0.625rem` · `0.75rem` · `1rem` · `1.25rem` · `2rem`

## Corner radius

| Name | Value |
| --- | --- |
| sm | `0.25rem` |
| md | `0.5rem` |
| lg | `1rem` |
| xl | `2rem` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| sm | `0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem` |
| md | `0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem` |

## 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. Native dp/sp values are omitted, never silently converted.
   Official reference: https://mantine.dev/
   Reference scope: Checked against @mantine/core 9.6.0 on 2026-09-05. Relative sizes and shadows resolve the default theme.scale = 1; they are not fixed pixel values or a promise about customized providers. Line heights are the package ratios. Unreviewed role descriptions and motion remain unknown.
   Field evidence: https://www.designsystems.one/api/style-spec?system=mantine */

:root {
  /* Color */
  --mantine-color-blue-6: #228be6; /* Primary actions (default primaryColor) */
  --mantine-color-dark-9: #141414; /* Dark palette shade 9; component text uses semantic theme variables */
  --mantine-color-gray-7: #495057; /* Secondary text */
  --mantine-color-white: #fff; /* 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, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

  /* Type scale */
  --text-h1: 2.125rem; /* line-height 1.3 */
  --text-h2: 1.625rem; /* line-height 1.35 */
  --text-h3: 1.375rem; /* line-height 1.4 */
  --text-md-body-: 1rem; /* line-height 1.55 */
  --text-sm: 0.875rem; /* line-height 1.45 */
  --text-xs: 0.75rem; /* line-height 1.4 */

  /* Spacing */
  --space-1: 0.625rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
  --space-5: 2rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 2rem;

  /* Elevation */
  --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem;
  --shadow-md: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem;

  /* 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 0.25rem, a spacing rhythm on a 1rem 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._