Metis UI：下一代 React 组件库，重新定义前端开发体验

Metis UI：下一代 React 组件库，重新定义前端开发体验

在快速发展的前端生态中，开发者们一直在寻找既能提高开发效率，又能保证代码质量和用户体验的解决方案。今天，我们很兴奋地向大家介绍 Metis UI 一个基于 Tailwind CSS 构建，继承 Ant Design 交互逻辑的现代 React 组件库。

为什么选择 Metis UI ？

在众多组件库中，Metis UI 独树一帜，它不是简单的重复造轮子，而是在继承优秀设计理念的基础上，带来了全新的开发体验：

继承经典，超越传统

Metis UI 基于 Ant Design 久经考验的组件逻辑构建，确保了交互模式的一致性和可靠性。同时，我们抛弃了传统的 CSS-in-JS 方案，全面拥抱 Tailwind CSS ，为开发者带来了前所未有的样式自由度。

极致的开发体验

import { Button, Input, Form } from 'metis-ui'; // 简洁的 API ，强大的功能 <Button type="primary" className="hover:scale-105 transition-transform" > 自定义样式，轻而易举 </Button> 

无需学习复杂的主题配置，直接使用 Tailwind 类名即可实现个性化定制。

技术亮点

1. 完美的 TypeScript 支持

interface ButtonProps { type?: 'primary' | 'default' | 'dashed'; size?: 'small' | 'middle' | 'large'; loading?: boolean; ... } 

每个组件都提供完整的类型定义，让你的开发过程更加安全和高效。

2. Tailwind CSS 深度集成

<Button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"> 渐变按钮 </Button> 

利用 Tailwind 的强大功能，轻松实现复杂的样式效果。

3. 文档驱动开发

• 详细的 API 文档
• 可交互的代码示例
• 多语言支持
• 移动端友好的浏览体验

快速开始

安装

# npm npm install metis-ui # pnpm (推荐) pnpm add metis-ui # yarn yarn add metis-ui 

配置

向你的入口 CSS 文件添加一个 @plugin 以导入 Metis UI 。

@import 'tailwindcss'; @source './node_modules/metis-ui/es'; @plugin 'metis-ui/plugin'; 

开始使用

import { Alert } from 'metis-ui'; const App = () => ( <div className="h-screen w-screen"> <Alert type="info" banner message="Hello" description="Welcome to metis-ui" /> </div> ); export default App; 

主题定制

Metis UI 只针对颜色进行主题定制，默认提供了两套主题：light 和 dark。您还可以创建自己的自定义主题或修改内置主题。

您可以在 CSS 文件中的 @plugin "metis-ui/plugin" 后添加括号来管理主题，详细介绍。

Metis Plus - 企业中后台系统模板

我们提供了一套开箱即用的企业中后台系统模板，基于 React、react-router、TypeScript、Vite、TailwindCSS、Zustand、faker-js、MSW 等技术栈构建。它内置了开箱即用的数据流、国际化、菜单、模拟数据、权限管理、主题切换等功能，助力企业快速搭建高质量的中后台应用。

├── .husky # Husky 钩子配置目录 ├── public # 公共静态资源目录 ├── src # 源码目录 │ ├── apis # 服务端接口请求相关 │ ├── assets # 静态资源（图片、SVG 等） │ ├── components # 通用组件 │ ├── hooks # 自定义 hooks │ ├── layouts # 页面布局组件 │ ├── locale # 国际化资源 │ ├── mocks # Mock 数据与服务 │ ├── pages # 页面组件 │ ├── store # Zustand 状态管理 │ ├── types # TypeScript 类型定义 │ ├── utils # 工具函数与工具类 │ ├── loading.tsx # 全局 Loading 组件 │ ├── main.tsx # 应用入口文件 │ ├── routes.tsx # 路由和菜单配置 │ └── vite-env.d.ts # Vite 环境类型声明 ├── .env # 环境变量配置文件 ├── .lintstagedrc # lint-staged 配置文件 ├── .prettierignore # Prettier 忽略文件配置 ├── .prettierrc # Prettier 代码格式化配置 ├── commitlint.config.js # 提交规范校验配置 ├── eslint.config.js # ESLint 代码规范配置 ├── index.html # 项目入口 HTML ├── package.json # 项目依赖与脚本配置 ├── tailwind.css # TailwindCSS 全局样式入口 ├── tsconfig.app.json # TS 应用配置 ├── tsconfig.json # TS 根配置 ├── tsconfig.node.json # TS Node 配 

官方资源

• 官方网站 - 完整文档和示例
• GitHub 仓库 - 源码和问题反馈
• Metis Plus - 企业中后台系统模板
• Metis Plus GitHub 仓库 - 企业中后台系统模板

tips: 网站匀部属在 Github Pages, 访问可能需要梯子