mantine-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mantine UI Library

Mantine UI库

Mantine is a fully-featured React components library with TypeScript support. It provides 100+ hooks and components with native dark mode, CSS-in-JS via CSS modules, and excellent accessibility.

Mantine是一个功能完备的React组件库，支持TypeScript。它提供100多个Hooks和组件，原生支持深色模式，通过CSS模块实现CSS-in-JS，并且具备出色的可访问性。

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

构建React应用时需要一个全面的UI库
需要优先支持TypeScript、具备完整类型安全的组件库
希望原生支持深色/浅色主题切换，且使用CSS变量实现
构建带验证功能的表单（使用useForm Hook）
需要用于常见React模式的工具类Hooks
使用Vite作为构建工具

Focus

重点内容

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

本技能重点关注：

Vite + TypeScript 环境搭建（不包含Next.js或CRA）
搭配PostCSS预设的CSS模块
使用Vitest进行测试
配置eslint-config-mantine的ESLint

Quick Start (Vite Template)

快速开始（Vite模板）

bash

undefined

bash

undefined

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

git clone https://github.com/mantinedev/vite-template my-app cd my-app yarn install yarn dev


或者手动搭建：

```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

Required Packages

必备依赖包

bash

undefined

bash

undefined

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

undefined

npm install @mantine/form # 表单管理 npm install @mantine/dates dayjs # 日期组件 npm install @mantine/charts recharts # 图表组件 npm install @mantine/notifications # 提示通知 npm install @mantine/modals # 模态框管理器 npm install @mantine/dropzone # 文件上传 npm install @mantine/spotlight # 命令面板 npm install @mantine/tiptap @tiptap/react @tiptap/pm @tiptap/starter-kit # 富文本编辑器

undefined

PostCSS Configuration

PostCSS配置

Create

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

创建

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

应用配置

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 <MantineProvider theme={theme}>{/* Your app */}</MantineProvider>;
}

tsx

// src/App.tsx
import "@mantine/core/styles.css";
// 按需导入其他样式：
// import '@mantine/dates/styles.css';
// import '@mantine/notifications/styles.css';

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

const theme = createTheme({
  // 在这里自定义主题
});

function App() {
  return <MantineProvider theme={theme}>{/* 你的应用内容 */}</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

不要跳过MantineProvider包裹——所有组件都依赖它
不要忘记导入
```
@mantine/core/styles.css
```
——没有它组件不会被正确样式化
不要在同一个项目中混合使用Mantine和其他UI库（例如Chakra、MUI）
不要为主题值使用内联样式——请使用CSS变量或主题对象
不要跳过PostCSS配置——响应式混合器将无法工作
在使用非受控表单时，不要忘记添加
```
key={form.key('path')}
```

Core Concepts

核心概念

1. MantineProvider

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

包裹你的应用，提供主题上下文和配色方案管理。

2. Theme Object

2. 主题对象

Customize colors, typography, spacing, component default props.

自定义颜色、排版、间距、组件默认属性。

3. Style Props

3. 样式属性

All components accept style props like

mt

bg

, etc.

所有组件都支持

mt

、

bg

等样式属性。

4. CSS Variables

4. CSS变量

All theme values exposed as CSS variables (e.g.,

--mantine-color-blue-6

所有主题值都以CSS变量的形式暴露（例如

--mantine-color-blue-6

）。

5. Polymorphic Components

5. 多态组件

Many components support

component

prop to render as different elements.

许多组件支持

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

应用已被MantineProvider包裹
已导入样式文件（
```
@mantine/core/styles.css
```
）
已配置带mantine预设的PostCSS
已在createTheme中自定义主题
已处理配色方案（浅色/深色）
TypeScript类型正常工作
测试通过（使用Vitest + 自定义渲染）

References (Detailed Guides)

参考资料（详细指南）

Setup & Configuration

安装与配置

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

getting-started.md — 安装、Vite环境搭建、项目结构
styling.md — MantineProvider、主题、CSS模块、样式属性、深色模式

Core Features

核心功能

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

components.md — 核心UI组件模式
hooks.md — @mantine/hooks工具类Hooks
forms.md — @mantine/form、useForm、验证

Development

开发相关

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

testing.md — Vitest配置、自定义渲染、模拟
eslint.md — eslint-config-mantine配置

mantine-dev

Original

Translation

Mantine UI Library

Mantine UI库

When to use

适用场景

Focus

重点内容

Quick Start (Vite Template)

快速开始（Vite模板）

Use official template (recommended)

使用官方模板（推荐）

Required Packages

必备依赖包

Core packages

核心依赖

Optional packages (as needed)

可选依赖（按需安装）

PostCSS Configuration

PostCSS配置

App Setup

应用配置

Critical Prohibitions

重要注意事项（禁止操作）

Core Concepts

核心概念

1. MantineProvider

1. MantineProvider

2. Theme Object

2. 主题对象

3. Style Props

3. 样式属性

4. CSS Variables

4. CSS变量

5. Polymorphic Components

5. 多态组件

Definition of Done

完成标准

References (Detailed Guides)

参考资料（详细指南）

Setup & Configuration

安装与配置

Core Features

核心功能

Development

开发相关

Links

相关链接