❌

普通视图

发现新文章，点击刷新页面。
昨天以前首页

🎮 从 NES 到现代 Web —— 像素风组件库 Pixel UI React 版本，欢迎大家一起参与这个项目

✇掘金 前端
作者 小肚肚肚肚肚哦
2025年11月19日 10:51

还记得几个月前，掘金作者 @猫闷台817 的 Vue3 版上线了，地址是这个：github.com/maomentai81… 。现在我与他合作的 React 版也来了，github 地址：github.com/maomentai81…

image.png

1️⃣ 项目初衷

红白机、GameBoy 游戏，那种块状像素 UI 总让人心驰神往。现在虽然是现代 Web 时代，但像素风 UI 的美学依然令人着迷。

现有的 8-bit 风组件库 NES.css 是一个 CSS 框架, 它只需要 CSS，不依赖于任何 JavaScript, 核心绘制逻辑都是基于 box-shadow 实现, 但在不同浏览器环境, 浏览器缩放时，box-shadow 的浮点偏移值经过缩放后无法精准对齐物理像素网格，导致渲染出现间隙。子像素定位、像素舍入误差和 box-shadow 本身不适合精细拼接渲染等原因造成了一些困扰

QQ_1747188289846.png

NES.css

于是就有了基于 Vue 3 / React + TypeScript + UnoCSS + CSS Houdini 打造的一款组件库 —— 让像素风重回前端视野。

Vue3 项目地址👇
📦 pixel-ui

React 项目地址👇
📦 pixel-ui-react

组件库首页👇
📎 Home

2️⃣ 技术选型

技术栈 用途
React19 + Hooks 组件化开发核心
TypeScript 类型系统增强开发体验
UnoCSS 原子化 CSS，灵活配置样式类
CSS Houdini 自定义 Paint Worklet 渲染像素边框
Dumi 组件展示 + 文档系统
Vitest 测试组件逻辑与渲染
pnpm + Monorepo 高效构建与多包管理

3️⃣ 项目目前进度

已迁移上线组件：

  • ✅ Button 按钮
  • ✅ Icon 图标
  • ✅ Overlay 遮罩层
  • ✅ Text 文本
  • ✅ ConfigProvider 全局配置
  • ✅ Input 输入框
  • ✅ Popconfirm 气泡确认框
  • ✅ Tooltip 文字提示

已发布 npm，可供下载。

更过规划见 vue 版：juejin.cn/post/750384…

4️⃣ 效果预览

image.png

image.png

image.png

欢迎大家：

  • 🌟 点个 Star
  • 🐛 提 Issue，有什么好的点子和想法都可以提
  • 🤝 提 PR，增强完善功能
  • 📢 分享给像素控朋友！

项目地址：github.com/maomentai81…

❌
❌