mantine-dev

• 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

This skill focuses on:

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

```bash

# Use official template (recommended)

git clone https://github.com/mantinedev/vite-template my-app

cd my-app

yarn install

yarn dev

```

Or manual setup:

```bash

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

```

```bash

# 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

```

Create postcss.config.cjs:

```js

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",

},

},

},

};

```

```tsx

// 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 {/ Your app /};

}

```

• 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

1. MantineProvider

Wraps your app, provides theme context and color scheme management.

2. Theme Object

Customize colors, typography, spacing, component default props.

3. Style Props

All components accept style props like mt, p, c, bg, etc.

4. CSS Variables

All theme values exposed as CSS variables (e.g., --mantine-color-blue-6).

5. Polymorphic Components

Many components support component prop to render as different elements.

• [ ] 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

Setup & Configuration

• [getting-started.md](references/getting-started.md) — Installation, Vite setup, project structure
• [styling.md](references/styling.md) — MantineProvider, theme, CSS modules, style props, dark mode

Core Features

• [components.md](references/components.md) — Core UI components patterns
• [hooks.md](references/hooks.md) — @mantine/hooks utility hooks
• [forms.md](references/forms.md) — @mantine/form, useForm, validation

Development

• [testing.md](references/testing.md) — Vitest setup, custom render, mocking
• [eslint.md](references/eslint.md) — eslint-config-mantine setup

• 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