在快速发展的前端生态中,开发者们一直在寻找既能提高开发效率,又能保证代码质量和用户体验的解决方案。今天,我们很兴奋地向大家介绍 Metis UI ------ 一个基于 Tailwind CSS 构建,继承 Ant Design 交互逻辑的现代 React 组件库。
为什么选择 Metis UI?
在众多组件库中,Metis UI 独树一帜,它不是简单的重复造轮子,而是在继承优秀设计理念的基础上,带来了全新的开发体验:
继承经典,超越传统
Metis UI 基于 Ant Design 久经考验的组件逻辑构建,确保了交互模式的一致性和可靠性。同时,我们抛弃了传统的 CSS-in-JS 方案,全面拥抱 Tailwind CSS,为开发者带来了前所未有的样式自由度。
极致的开发体验
ini
import { Button, Input, Form } from 'metis-ui';
// 简洁的 API,强大的功能
<Button
type="primary"
className="hover:scale-105 transition-transform"
>
自定义样式,轻而易举
</Button>
无需学习复杂的主题配置,直接使用 Tailwind 类名即可实现个性化定制。
技术亮点
1. 完美的 TypeScript 支持
css
interface ButtonProps {
type?: 'primary' | 'default' | 'dashed';
size?: 'small' | 'middle' | 'large';
loading?: boolean;
...
}
每个组件都提供完整的类型定义,让你的开发过程更加安全和高效。
2. Tailwind CSS 深度集成
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 文档
- 🎮 可交互的代码示例
- 🌐 多语言支持
- 📱 移动端友好的浏览体验
快速开始
安装
csharp
# npm
npm install metis-ui
# pnpm (推荐)
pnpm add metis-ui
# yarn
yarn add metis-ui
配置
向你的入口 CSS 文件添加一个 @plugin
以导入 Metis UI。
scss
@import 'tailwindcss';
@source './node_modules/metis-ui/es';
@plugin 'metis-ui/plugin';
开始使用
javascript
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 等技术栈构建。它内置了开箱即用的数据流、国际化、菜单、模拟数据、权限管理、主题切换等功能,助力企业快速搭建高质量的中后台应用。
bash
├── .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, 访问可能需要梯子