Mantine UI

Mantine UI 提供 123 个基于 Mantine 组件库构建的响应式预置组件，覆盖应用界面、博客、登录页等常见场景，每个组件附带可复现代码和暗色主题支持，由 Mantine 维护者与社区共同维护，MIT 开源免费。

组件规模与分类

Mantine UI 按使用场景将 123 个组件划分为三大类别：Application UI（82 个组件）、Page sections（30 个组件）、Blog UI（11 个组件）。Application UI 下细分 15 个子类，包括导航栏（9 个）、页头（6 个）、页脚（4 个）、网格（3 个）、用户信息与控制（8 个）、输入框（14 个）、按钮（6 个）、滑块（6 个）、拖放（3 个）、轮播（2 个）、统计卡片（9 个）、表格（4 个）、应用卡片（7 个）、投放区（1 个）等。Page sections 包含英雄区（6 个）、特性展示（5 个）、认证（4 个）、常见问题（4 个）、联系我们（3 个）、错误页面（5 个）、横幅（3 个）。Blog UI 包含文章卡片（7 个）、目录（2 个）、评论（2 个）。

• 组件总数：123 个响应式组件
• 大型子类：输入框 14 个，导航栏 9 个，用户信息与控制 8 个
• 最小子类：投放区 1 个，轮播 2 个，评论 2 个
• 分类依据：Application UI / Page sections / Blog UI

主题与暗色模式

所有组件默认同时支持浅色与暗色主题，无需额外配置。组件样式基于 Mantine 主题系统，可通过修改 colors、fonts、shadows 等属性全局调整外观。每个组件提供独立的 CSS Module 文件（如 ActionToggle.module.css），使用 light-dark 函数和 @mixin 指令实现主题切换。

• 主题切换：组件默认支持暗色与浅色模式
• 样式定制：通过 Mantine theme 对象修改颜色、字体、阴影
• 代码示例：ActionToggle 组件使用 useComputedColorScheme 动态切换图标

代码质量与可访问性

每个组件均附带 TypeScript 源文件（.tsx）、CSS Module（.module.css）和测试文件（.test.tsx）。测试文件使用 axe 进行可访问性检测，并包含基础渲染测试。组件属性通过 attributes.json 定义，支持 canvas 居中布局与大型宽度限制。

• 测试覆盖：每个组件包含 axe 可访问性测试
• 类型安全：所有组件导出 TypeScript 类型
• 代码结构：每个组件包含 tsx、css、test.tsx 三个文件

使用方式与许可

Mantine UI 所有组件永久免费，MIT 许可证允许商用、修改和再分发。组件可直接从 GitHub 仓库克隆或通过 npm 安装。官网提供在线预览和代码复制功能，支持 Ctrl+K 搜索组件。

• 许可：MIT 许可证，永久免费
• 获取方式：GitHub 仓库或 npm 安装

常见问题

Q1：Mantine UI 与 Mantine 核心库是什么关系？

A1：Mantine UI 是基于 Mantine 核心库（120+ 组件和 hooks）构建的预置组件集合，核心库负责底层主题、暗色模式、hooks 等基础设施，UI 库提供可直接使用的页面级组件。两者均使用 MIT 许可证。

Q2：Mantine UI 的组件是否支持暗色主题？

A2：支持。所有 123 个组件默认同时支持浅色和暗色主题，无需额外配置。组件通过 CSS Module 中的 light-dark 函数和 @mixin 指令实现主题切换。

Q3：Mantine UI 的组件可以商用吗？

A3：可以。所有组件基于 MIT 许可证发布，永久免费，允许用于商业项目、修改和再分发。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。