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

在快速发展的前端生态中,开发者们一直在寻找既能提高开发效率,又能保证代码质量和用户体验的解决方案。今天,我们很兴奋地向大家介绍 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 只针对颜色进行主题定制,默认提供了两套主题:lightdark。您还可以创建自己的自定义主题或修改内置主题。

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

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

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

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 配

官方资源

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

相关推荐
伍哥的传说1 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
前端小盆友7 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
Cacciatore->9 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~9 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末9 小时前
React——基础
前端·react.js·前端框架
爱学习的茄子9 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
10年前端老司机10 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
sophie旭10 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
轻语呢喃10 小时前
React智能前端:从零开始写的图片分析页面实战
前端·react.js·aigc