Mantine：一个完整的 React 组件和 hooks 工具集

React 生态里组件库不少，Mantine 的做法是把覆盖面做全。它提供 100 多个组件和 80 多个 hooks，从基础 UI 到表单、图表、富文本编辑、文件拖放，都包含在同一套工具里。项目 Star 数超过 31000，采用 MIT 协议。

核心包

Mantine 的代码拆分为多个 npm 包，按需安装，不必引入整个库：

• @mantine/core：核心组件库，100 多个组件，覆盖按钮、表单、布局、弹窗等常见场景
• @mantine/hooks：80 多个 hooks，处理状态管理和 UI 交互逻辑
• @mantine/form：表单管理，提供字段校验、提交处理、初始值填充等能力
• @mantine/charts：基于 recharts 的图表组件，折线、柱状、散点图都有现成封装

样式方面，Mantine 用 CSS Modules 做隔离，不依赖全局 CSS 变量，也不强制引入任何 CSS 框架。

扩展功能

基础包之外，Mantine 还维护了一批独立功能包，解决特定场景的问题：

• @mantine/notifications：通知系统，支持多种通知样式、自动关闭和手动操作
• @mantine/spotlight：Ctrl+K 命令面板，类似 VS Code 的全局搜索体验
• @mantine/tiptap：基于 Tiptap 的富文本编辑器，开箱即用
• @mantine/code-highlight：代码高亮，底层用 highlight.js
• @mantine/dropzone：文件拖放区域，处理文件上传前的预览和校验
• @mantine/carousel：轮播组件
• @mantine/nprogress：页面加载进度条
• @mantine/modals：集中式弹窗管理，避免弹窗逻辑散落在各组件中
• @mantine/schedule：日程展示组件

这些包可以单独安装，也可以组合使用，彼此之间没有依赖冲突。

设计选择

Mantine 在技术选型上有几个明确的偏好。样式层用 CSS Modules 加上 PostCSS，没有引入 Tailwind 或 styled-components。状态管理方面，hooks 包提供了一组独立的工具函数，不绑定 Redux 或 Zustand。图表基于 recharts，富文本基于 Tiptap，代码高亮基于 highlight.js，每个依赖都是各自领域里被广泛使用的库。

这种组合方式的好处是，如果后续要替换某个模块，改动范围可控。比如把 recharts 换成 ECharts，只需要处理 @mantine/charts 这一层，不影响其他组件。

社区和文档

Mantine 的文档在 mantine.dev，每个组件都有独立的文档页和在线示例。遇到问题可以在 Discord 社区提问，响应速度通常在半小时以内。GitHub Discussions 也开放给用户反馈和讨论。

项目有活跃的贡献者群体，版本更新节奏稳定。

上手

安装核心包：

npm install @mantine/core @mantine/hooks

项目基于 React，需要 React 18 或更高版本。初始化时按文档引入 Provider 组件即可开始使用。

如果项目需要一套覆盖全、维护活跃、风格统一的组件方案，Mantine 值得认真考虑。

er 组件即可开始使用。

如果项目需要一套覆盖全、维护活跃、风格统一的组件方案，Mantine 值得认真考虑。