Mantine UI Library

When to use

• Building React applications with a comprehensive UI library
• Need TypeScript-first component library with full type safety
• Want native dark/light theme support with CSS variables
• Building forms with validation (useForm hook)
• Need utility hooks for common React patterns
• Working with Vite as build tool

Focus

• Vite + TypeScript setup (not Next.js or CRA)
• CSS modules with PostCSS preset
• Vitest for testing
• ESLint with eslint-config-mantine

Quick Start (Vite Template)

# Use official template (recommended)
git clone https://github.com/mantinedev/vite-template my-app
cd my-app
yarn install
yarn dev

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install @mantine/core @mantine/hooks
npm install -D postcss postcss-preset-mantine postcss-simple-vars

Required Packages

# Core packages
npm install @mantine/core @mantine/hooks

# Optional packages (as needed)
npm install @mantine/form          # Form management
npm install @mantine/dates dayjs   # Date components
npm install @mantine/charts recharts # Charts
npm install @mantine/notifications  # Toast notifications
npm install @mantine/modals        # Modal manager
npm install @mantine/dropzone      # File upload
npm install @mantine/spotlight     # Command palette
npm install @mantine/tiptap @tiptap/react @tiptap/pm @tiptap/starter-kit  # Rich text editor

PostCSS Configuration

postcss.config.cjs

module.exports = {
  plugins: {
    "postcss-preset-mantine": {},
    "postcss-simple-vars": {
      variables: {
        "mantine-breakpoint-xs": "36em",
        "mantine-breakpoint-sm": "48em",
        "mantine-breakpoint-md": "62em",
        "mantine-breakpoint-lg": "75em",
        "mantine-breakpoint-xl": "88em",
      },
    },
  },
};

App Setup

// src/App.tsx
import "@mantine/core/styles.css";
// Other style imports as needed:
// import '@mantine/dates/styles.css';
// import '@mantine/notifications/styles.css';

import { MantineProvider, createTheme } from "@mantine/core";

const theme = createTheme({
  // Theme customization here
});

function App() {
  return <MantineProvider theme={theme}>{/* Your app */}</MantineProvider>;
}

Critical Prohibitions

• Do NOT skip MantineProvider wrapper — all components require it
• Do NOT forget to import

  @mantine/core/styles.css

  — components won't style without it
• Do NOT mix Mantine with other UI libraries (e.g., Chakra, MUI) in same project
• Do NOT use inline styles for theme values — use CSS variables or theme object
• Do NOT skip PostCSS setup — responsive mixins won't work
• Do NOT forget

  key={form.key('path')}

  when using uncontrolled forms

Core Concepts

1. MantineProvider

2. Theme Object

3. Style Props

mt

p

c

bg

4. CSS Variables

--mantine-color-blue-6

5. Polymorphic Components

component

Definition of Done

• MantineProvider wraps the app
• Styles imported (

  @mantine/core/styles.css

  )
• PostCSS configured with mantine-preset
• Theme customization in createTheme
• Color scheme (light/dark) handled
• TypeScript types working
• Tests pass with Vitest + custom render

References (Detailed Guides)

Setup & Configuration

• getting-started.md — Installation, Vite setup, project structure
• styling.md — MantineProvider, theme, CSS modules, style props, dark mode

Core Features

• components.md — Core UI components patterns
• hooks.md — @mantine/hooks utility hooks
• forms.md — @mantine/form, useForm, validation

Development

• testing.md — Vitest setup, custom render, mocking
• eslint.md — eslint-config-mantine setup

Links

• Official docs: https://mantine.dev
• GitHub: https://github.com/mantinedev/mantine
• Vite template: https://github.com/mantinedev/vite-template
• ESLint config: https://github.com/mantinedev/eslint-config-mantine
• LLM docs: https://mantine.dev/llms.txt