Mantine

React 现代主流 UI 库的代表、TypeScript-first 工程体验最佳的全家桶组件库——由乌克兰开发者 Vitaly Rtishchev 于 2019 年 在 GitHub 创建并开源，从一开始就坚持 TypeScript-first、Hooks-first、a11y-first 三大设计原则，是 React 生态中 hooks 套件最丰富、单文档站集成度最高 的现代组件库。最新稳定版 v9.x（截至 2026 年 5 月已发布 v9.2.1，主流生产实践仍是 v8.x → v9.x 渐进升级——文档中绝大多数最佳实践都来自 v8.0 之后，v9 是 2026 年初的小步快跑版本），完全基于 React 18 / 19 + TypeScript 5+ + CSS Modules + PostCSS（v7.0 起重大架构变更：从 Emotion CSS-in-JS 迁移到 CSS Modules + CSS Variables——零运行时样式开销），核心 @mantine/core 提供 130+ 组件 覆盖 Layout / Inputs / Combobox / Buttons / Navigation / Feedback / Overlays / Data Display / Typography / Miscellaneous 十大类别，@mantine/hooks 70+ 实用 React Hooks 是 Mantine 的独门绝技，GitHub 28k+ Star。核心生态矩阵：@mantine/core（130+ 组件） / @mantine/hooks（70+ 实用 hooks，可独立使用） / @mantine/form（轻量级表单库，支持 controlled / uncontrolled 双模式） / @mantine/dates（日期选择器套件，依赖 dayjs） / @mantine/notifications（通知系统，支持队列 / drag 关闭） / @mantine/modals（集中式 Modal 管理器，支持 confirm / context / 嵌套） / @mantine/spotlight（命令面板 ⌘K 风格搜索） / @mantine/charts（基于 Recharts 的图表封装：BarChart / LineChart / AreaChart / PieChart / DonutChart / RadarChart / ScatterChart / BubbleChart / FunnelChart / RadialBarChart / CompositeChart / Sparkline / Heatmap） / @mantine/dropzone（拖拽上传） / @mantine/tiptap（基于 Tiptap 的富文本编辑器） / @mantine/code-highlight（代码高亮，基于 highlight.js） / @mantine/carousel（基于 Embla 的轮播） / @mantine/nprogress（页面顶部进度条）。核心特性：TypeScript-first（所有组件 / hooks / theme / styles 完整 TS 类型，IDE 智能提示完美） / CSS Modules + CSS Variables（v7+ 重大架构）（彻底告别 Emotion 运行时、所有样式预编译、bundle 体积减小约 30%） / MantineProvider + createTheme（colors / primaryColor / fontFamily / defaultRadius / spacing / fontSizes / headings / shadows / breakpoints / components defaults 十大配置类别） / 暗色模式一等公民（defaultColorScheme="auto" + ColorSchemeScript 防 SSR 闪烁 + useMantineColorScheme() 切换 hook + lightHidden / darkHidden 组件级 prop） / Style Props 系统（m / mt / px / w / h / c / bg / fz 等 30+ Box 工具 props，响应式对象语法 w={{ base: 200, sm: 400 }}） / Styles API（classNames 命名插槽 + styles 内联 + vars CSS 变量覆盖三重定制） / Polymorphic component（component="a" 一行变身锚点 / Router Link，TypeScript 泛型推导 props） / 完整 SSR（Next.js App Router / Remix / Vite SSR 一键集成，mantineHtmlProps 解决 hydration warning） / a11y 优先（所有组件遵循 ARIA 规范，useFocusTrap / useFocusReturn 焦点管理 hooks） / @mantine/hooks 独门绝技（useDisclosure / useClickOutside / useHotkeys / useDebouncedValue / useDidUpdate / useScrollIntoView / useEyeDropper / useClipboard / useLocalStorage / useMediaQuery 等 70+ hooks，可与任何 React 项目独立使用）。典型用户群：Mantine UI 官方组件站（ui.mantine.dev 提供 123 个免费 MIT 业务级组件：82 个 App UI + 30 个营销页 + 11 个博客） / 海外现代 SaaS 项目 / 设计驱动 React 应用 / TypeScript-first 团队 —— 如果你的项目追求 Mantine UI 风格 + 完整 hooks 套件 + TypeScript 极致体验，那 Mantine 是最不会让你失望的选择。截至 2026 年的 v9.x 处于「稳定演进期」，v7（CSS Modules 重构）+ v8（form 重写 / 性能优化）+ v9（小步快跑）—— 是 React 中后台 / SaaS 项目里最现代、最完整、TypeScript 体验最好的免费开源组件库。

评价

优点

• TypeScript-first 体验业界顶级：从第一天起 Mantine 就是 TypeScript 写的——所有组件 props、theme 类型、styles API、hooks 返回值都有完整 TS 类型，IDE 智能提示 / 自动补全比 MUI、Chakra 都更精准。useForm 的类型推导贯穿表单全生命周期、createTheme 的 components 配置完美类型联动
• @mantine/hooks 70+ 实用 Hooks 独门绝技：React 生态最完整的 Hooks 套件之一——useDisclosure（boolean 开关）/ useClickOutside（外部点击）/ useHotkeys（快捷键）/ useDebouncedValue（防抖）/ useDidUpdate（跳过首次 effect）/ useScrollIntoView（滚动到指定位置）/ useEyeDropper（取色器）/ useClipboard（剪贴板）/ useLocalStorage（持久化）/ useMediaQuery（媒体查询）/ useFocusTrap（焦点陷阱）—— 可独立 pnpm add @mantine/hooks 使用、不依赖任何 UI 组件
• v7+ CSS Modules 重大架构升级：从 Emotion CSS-in-JS 彻底迁移到 CSS Modules + PostCSS + CSS Variables —— 零运行时样式开销、bundle 体积减小约 30%、SSR 一致性显著提升、与 Tailwind / 用户 CSS 优先级冲突大幅缓解。这是 Mantine 区别于 MUI / Chakra（仍依赖 Emotion）的关键架构优势
• 130+ 组件覆盖完整业务场景：Layout（AppShell / Container / Flex / Grid / Group / Stack）+ Inputs（28+ 组件：TextInput / NumberInput / PasswordInput / PinInput / FileInput / Switch / Slider / Rating 等）+ Combobox（8 个：Select / MultiSelect / Autocomplete / TagsInput / TreeSelect 等）+ Navigation（11 个：Tabs / Stepper / Pagination / Breadcrumbs / NavLink 等）+ Feedback / Overlays / Data Display / Typography / Miscellaneous —— 企业级 CRUD + SaaS 设计驱动场景全部覆盖
• Style Props 系统优雅简洁：Box / Flex / Stack 等所有组件支持 30+ 内联样式 props —— <Box mt="md" p="xs" c="blue.6" bg="gray.0"> 直接表达「上外边距 + 内边距 + 文字色 + 背景色」，响应式语法 w={{ base: 200, sm: 400, lg: 500 }}。比 Chakra 的 style prop 更克制、比 MUI sx 更易读
• MantineProvider + createTheme 完整主题系统：colors（自定义色板，每色 10 个 shade）/ primaryColor / fontFamily / defaultRadius / spacing（xs/sm/md/lg/xl）/ fontSizes / headings（h1-h6 完整配置）/ shadows / breakpoints / components defaults（每个组件的默认 props、默认 classNames、默认 styles）+ other（用户自定义任意字段）—— 比 MUI createTheme 更简洁、比 Chakra extendTheme 更类型友好
• CSS Variables 模式默认开启：v7+ 所有 theme token 自动生成 --mantine-color-blue-6、--mantine-spacing-md、--mantine-radius-sm 等 CSS 变量 —— 主题切换无需重新渲染、可在原生 CSS / SCSS / Tailwind 中直接使用
• 暗色模式一等公民：MantineProvider 的 defaultColorScheme="auto" 即开启系统跟随、ColorSchemeScript 防 SSR 闪烁、useMantineColorScheme() Hook 切换、useComputedColorScheme() 解算 auto → light/dark 实际值、lightHidden / darkHidden 组件级 prop —— 完整端到端方案、零额外配置
• Polymorphic component (component prop)：<Button component="a" href="/...">、<Button component={Link} to="/..."> —— 一个 prop 改变底层标签同时保留所有 Button 样式，TypeScript 泛型 props 智能推导（component prop 决定其余 props 类型）
• Styles API 三重定制：classNames（命名插槽：{ root: 'x', label: 'y' } 给内部 DOM 加类名） + styles（内联样式同结构） + vars（CSS 变量覆盖：{ '--button-color': 'red' }） —— 组件内部任何元素都可精准定制、无需 !important
• 完美 SSR 支持：Next.js App Router（ColorSchemeScript + mantineHtmlProps 一行集成）/ Remix / Vite SSR / Astro 全覆盖 —— CSS Modules 天然 SSR 友好、无 cssinjs SSR 收集复杂度
• @mantine/form 轻量级表单库：useForm + initialValues + validate + onSubmit + getInputProps —— 比 React Hook Form 更轻、与 Mantine 输入组件零适配（{...form.getInputProps('email')} 直接展开）、支持 controlled / uncontrolled 双模式
• @mantine/notifications 现代通知：notifications.show() + 队列 limit + position + autoClose + drag/scroll 关闭 + 暂停 reset + 自定义 icon —— 比 react-hot-toast 更完整、与主题系统融合
• @mantine/modals 集中式管理：modals.open() / modals.openConfirmModal() / modals.openContextModal() —— 三种模式覆盖 95% 业务场景、支持多层嵌套 / 动态更新 / TypeScript 类型化 context modals
• @mantine/spotlight 命令面板：Ctrl/⌘ + K 风格搜索 + actions / groups / 自定义 filter / fuse.js 模糊搜索 —— 现代 SaaS / 后台必备，比 cmdk 集成度更高
• @mantine/charts 基于 Recharts：BarChart / LineChart / AreaChart / PieChart / DonutChart / RadarChart / ScatterChart / BubbleChart / FunnelChart / RadialBarChart / CompositeChart / Sparkline / Heatmap 13 种图表 —— Recharts 强大底层 + Mantine 主题集成
• @mantine/tiptap Tiptap 集成：基于 ProseMirror 的现代富文本编辑器封装 —— 比 MUI 缺失富文本生态、比 Ant Design BraftEditor（已停维）领先一代
• a11y 优先：所有交互组件遵循 WAI-ARIA 规范、useFocusTrap / useFocusReturn / useRovingIndex 焦点管理 hooks —— 比 Element Plus / Naive UI 的 a11y 更扎实
• Mantine UI 官方组件库免费 MIT：ui.mantine.dev 提供 123 个业务级组件（82 App UI + 30 营销页 + 11 博客）—— 比 shadcn/ui blocks 更系统、比 MUI Templates 商业模板 ($59+) 完全免费
• 持续高频迭代 + 单人维护奇迹：核心维护者 Vitaly Rtishchev 一人持续 7 年（2019-2026）保持 v1 → v9 9 个大版本迭代、文档 / 示例 / TypeScript 类型同步更新 —— 海外个人 OSS 项目里最稳定可靠
• 海外文档英文质量极高：mantine.dev —— **每个组件都有「Usage」「Props」「Styles API」「Examples」**结构清晰、CodeSandbox 在线编辑、Migration Guide 详尽

缺点

• 国内市场份额远不如 Ant Design：Mantine 在海外 React 社区是 MUI 之外的次主流、但国内 React 中后台市场 95% 以上仍是 Ant Design —— 招聘市场、培训、面试、第三方集成都围绕 antd，国内项目选 Mantine 的人才储备稀缺
• 设计语言不强绑定：Mantine 不像 MUI 严格遵循 Material Design、也不像 Ant Design 严格遵循 Ant Design 规范——默认风格中性偏现代，但没有一个完整的设计 token 规范文档（vs Google Material 3 spec / Ant Design 设计价值观）
• vs MUI：MUI Material Design 严格遵循 + MUI X Data Grid 业界最强表格 + Pigment CSS Zero Runtime 探索；Mantine TypeScript 类型推导更精准 + hooks 套件齐全 + CSS Modules 已 Zero Runtime + bundle 更小 —— 设计驱动选 Mantine、Material 风格选 MUI、企业 Data Grid 必选 MUI（Mantine 的 Table 是基础组件不是 DataGrid）
• vs Ant Design：Ant Design 国内事实标准 + 70+ 企业级组件 + Pro Components 中后台杀器；Mantine 130+ 组件 + 70+ hooks + TypeScript-first——国内中后台选 Ant Design、海外 SaaS 选 Mantine、需要 Pro Components 等价物（ProForm / ProTable）选 Ant Design
• vs Chakra UI：Chakra 可访问性 (a11y) 业界顶级 + style prop API 更激进 + 与 Tailwind 设计哲学接近；Mantine 130+ 组件 vs Chakra 80+、hooks 套件远胜 Chakra——两者都是 SaaS / 设计驱动场景的优选、Mantine 组件更全、Chakra style props 更激进
• vs shadcn/ui：shadcn 拷贝代码到项目而非安装包 + Tailwind + Radix UI 底层 + 最大设计自由度；Mantine 传统安装包模式 + CSS Modules + 主题对象 API—— shadcn 给设计师自由度、Mantine 给开箱即用
• vs HeroUI（NextUI）：HeroUI（原 NextUI）Vercel 系 + Tailwind + 现代设计；Mantine 生态更老、组件更全、hooks 独门绝技 —— 追求 Vercel 美学选 HeroUI、追求功能完整选 Mantine
• DataTable 不如 MUI Data Grid / Ant Design Table：Mantine 的 Table 仅是基础语义化表格组件 —— 没有内置分页 / 排序 / 筛选 / 列固定 / 虚拟滚动，企业级数据表格需要搭配 mantine-react-table（社区第三方、TanStack Table 底层封装）或 AG Grid / TanStack Table 自行实现
• @mantine/dates 强绑定 dayjs：不支持 date-fns / luxon —— 存量项目用 date-fns 的需要混用两个库
• CSS Modules 学习曲线：v7+ 迁移到 CSS Modules + PostCSS 后，深度自定义需理解 :where() 选择器、CSS 变量、postcss-preset-mantine 配置 —— 比 MUI styled / sx prop 入门陡峭
• PostCSS 配置必需：v7+ 必须在项目根目录添加 postcss.config.cjs + 安装 postcss-preset-mantine + postcss-simple-vars —— 新人安装时容易忽略导致响应式变量不生效
• 个人维护风险（虽然稳定但理论上）：核心维护者 Vitaly Rtishchev 一人主导 —— 虽然过去 7 年保持高频迭代，但理论上的「bus factor 1」风险比 MUI（公司化）、Ant Design（蚂蚁集团）更高
• Polymorphic component TypeScript 泛型限制：<Button component={CustomLink} customProp={...}> 中 customProp 类型有时需要手动 as 断言 —— TypeScript 不能 100% 推导所有 polymorphic 用例
• @mantine/charts 基于 Recharts 性能瓶颈：Recharts 大数据集（10k+ 点）性能不如 ECharts / D3.js —— 大数据可视化场景需要替换底层
• 没有官方 Mobile 版：vs Ant Design antd-mobile —— Mantine 专注 Desktop / Web、没有官方 Mobile 优化，移动端 H5 项目优选 antd-mobile / Vant
• 国内 CDN / 文档站访问偶有延迟：mantine.dev 部署在 Vercel —— 国内偶发慢、但通过 GitHub 镜像 + 本地缓存可缓解
• @mantine/form 不如 React Hook Form 强大：Mantine 自家表单库轻量但性能 / 复杂场景（嵌套表单 / 异步校验 / 动态 schema）不如 React Hook Form + Zod 组合 —— 复杂表单建议用 react-hook-form + mantine-react-hook-form-adapter（社区方案）

文档地址

Mantine 官网 | 入门指南 | Vite 集成 | Next.js 集成 | React Router 集成 | 主题对象 | Color Schemes | Styles API | Style Props | Polymorphic Components | CSS Modules | 组件总览 | Hooks 总览 | Form | Dates | Notifications | Modals | Spotlight | Charts | Tiptap 富文本 | Mantine UI 业务组件 | FAQ 帮助站

GitHub 地址

mantinedev/mantine（主仓库，28k+ Star） | mantinedev/ui.mantine.dev（123 业务组件） | mantinedev/mantine-next-template（Next.js App Router 模板） | mantinedev/vite-template（完整 Vite 模板含 Vitest + Storybook） | mantinedev/vite-min-template（最小 Vite 模板） | icflorescu/mantine-datatable（社区流行的数据表格） | KevinVandy/mantine-react-table（基于 TanStack Table 的高级表格）

学习路径

• 入门：pnpm add @mantine/core @mantine/hooks + postcss postcss-preset-mantine 安装 / PostCSS 配置文件 / 第一个 <Button> / MantineProvider 包根 / ColorSchemeScript 防 SSR 闪烁 / mantineHtmlProps 解决 hydration / Vite 集成（推荐 SPA）/ Next.js App Router 集成（推荐 SSR）/ React Router 集成 / TypeScript 基础（自动类型推导）/ 暗色模式一行启用（defaultColorScheme="auto"）/ 第一个表单（@mantine/form）/ 第一个通知（@mantine/notifications）/ Style Props 入门（mt="md" p="xs" c="blue.6"）
• 指南：核心：Mantine 10 大组件分类（Layout / Inputs / Combobox / Buttons / Navigation / Feedback / Overlays / Data Display / Typography / Miscellaneous）/ Style Props 完整 API（30+ Box props + 响应式对象语法 + 主题值引用）/ Styles API 三重定制（classNames / styles / vars）/ createTheme 完整选项（colors / primaryColor / fontFamily / defaultRadius / spacing / fontSizes / headings / shadows / breakpoints / components defaults / other）/ Color Scheme 完整方案（defaultColorScheme / useMantineColorScheme / useComputedColorScheme / ColorSchemeScript / lightHidden / darkHidden）/ @mantine/form 完整方案（useForm / initialValues / validate / getInputProps / setValues / onSubmit / 嵌套 / Zod resolver）/ @mantine/notifications 完整 API（notifications.show / hide / update / clean / queue / position / autoClose）/ @mantine/modals 三种模式（open / openConfirmModal / openContextModal + TypeScript 类型化）/ Combobox 系列深度（Select / MultiSelect / Autocomplete / TagsInput / TreeSelect + 自定义 Combobox）/ DataTable 方案选择（基础 Table / mantine-datatable / mantine-react-table）/ @mantine/dates 完整方案（DatePickerInput / DateTimePicker / MonthPickerInput / DatesProvider / dayjs locale）/ @mantine/spotlight 命令面板 / @mantine/charts Recharts 集成 / @mantine/tiptap 富文本 / Polymorphic component（component prop + TypeScript 泛型推导）/ CSS Variables 深度（自动生成 / 自定义引用）/ Next.js App Router 完整集成 / Vite 集成最佳实践 / @mantine/hooks 70+ 实用 hooks 速览（useDisclosure / useClickOutside / useHotkeys / useDebouncedValue / useScrollIntoView 等高频使用）/ 常见踩坑（PostCSS 配置缺失 / CSS Modules 学习曲线 / SSR 闪烁 / Polymorphic TypeScript / Tailwind 优先级）
• 参考：API 速查：130+ 组件清单（10 大类）/ 70+ hooks 清单（4 大类）/ Style Props 完整表 / createTheme 完整选项树 / MantineProvider 完整选项 / Styles API（classNames / styles / vars）/ useMantineColorScheme / useComputedColorScheme / @mantine/form 完整 API / @mantine/notifications 完整 API / @mantine/modals 完整 API / @mantine/spotlight 完整 API / @mantine/dates 组件清单 / @mantine/charts 13 种图表清单 / TypeScript 核心类型（MantineTheme / MantineColorScheme / MantineColor / MantineSize / MantineRadius）