🧱 A Retro Pixel-Style Component Library for Vue 3, Powered by TypeScript & CSS Houdini
Pixel UI - A Vue 3 UI library
Pixel UI 是一个基于 Vue 3 + TypeScript + CSS Houdini 打造的像素风组件库。
从像素边框到复古字体, 力求还原游戏机时代的像素艺术，
为现代 Web 应用注入复古科技感 🎮✨。
Pixel UI 基于 CSS Houdini 实现像素风格渲染, 因此要求浏览器支持 Paint Worklet (CSS.paintWorklet) 能力
⚠️ 实验性警告
CSS.paintWorklet静态属性是一项实验性技术，在将其用于生产之前，请仔细检查浏览器兼容性表格
🚨 安全上下文要求
此项功能仅在一些支持的浏览器的安全上下文 (HTTPS、localhost) 中可用。
# 使用 npm
npm i @mmt817/pixel-ui
# 或使用 pnpm / yarn
pnpm add @mmt817/pixel-ui
yarn add @mmt817/pixel-ui# 1. 安装依赖
pnpm i
# 2. 项目打包
# 注意: 这里是对 hooks 及 components 分包进行打包, 请预先检查 libs 下插件是否已有打包
pnpm build
# 3. 项目运行
pnpm dev # 启动 playground
pnpm docs:dev # 启动 vitepress 文档
pnpm docs:storybook # 启动 storybook
# 其他
pnpm test # 对 utils, hooks, components 分包进行单元测试-
🎨 Pixel-Art 风格渲染
使用 CSS Houdini Paint Worklet 实现像素化边框、阴影、装饰等复古风格特效 -
🧩 Vue 3 + TypeScript 全面支持
使用 Composition API 与类型推导提升 DX，支持智能提示与类型校验 -
💡 CSS 自定义属性调控
可动态配置像素大小、颜色主题、边角样式，打造专属 UI 风格 -
🧪 100% 覆盖率的单元测试
每个组件都经过 Vitest 驱动的严格测试，保障稳定性与可维护性 -
📦 Tree-shakable 与按需加载
支持全量引入与 ES Module 按需加载，极致优化打包体积 -
📖 双文档系统：VitePress + Storybook
Markdown 文档 + 组件交互演示，一站式了解与使用
| 副产物 | 状态 | 描述 |
|---|---|---|
| super-gif | GIF 帧控制器 |
Pixel UI 采用以下字体
| Language | Font |
|---|---|
| English | |
| Chinese |