一、像素风 · 复古风(8-bit/街机游戏/精简粗犷主义)
1. NES.css(8-bit 像素/红白机风)
官方文档(官网) :nostalgic-css.github.io/NES.css/
GitHub:github.com/nostalgic-c…
适用技术栈:无限制(纯 CSS,任意框架可用)
风格:很经典的一个UI库。纯正8-bit像素风格,还原经典红白机、复古游戏的视觉质感,自带怀旧游戏氛围。
2. Pixel-UI(Vue3专用像素风)
官方文档(官网) :maomentai817.github.io/pixel-ui/
作者:猫闷台817
适用技术栈:Vue3 专用
风格:基于CSS Houdini的复古像素风格,Vue3专用像素风。
3. Pixel RetroUI
官方文档(官网) :retroui.io/
GitHub:github.com/Dksie09/Ret…
适用技术栈:React / Next.js
风格:我觉得很平庸😂。
4. Pxlkit(最强像素组件+图标库)
官方文档(官网) :pxlkit.xyz/
GitHub:github.com/joangeldela…
适用技术栈:React / Next.js
风格:兼顾复古像素感与3D效果实用性,可适配多种像素风项目场景。主要是该组件的像素风还不像老式的像素风,更像高清版像素风🐱我确实很喜欢
5. 8bitcn(像素风资源站)
官方文档(官网) :www.8bitcn.com/
GitHub:github.com/TheOrcDev/8…
适用技术栈:React
风格:纯像素游戏街机风,聚焦8-bit复古游戏视觉风格。
6. RetroUI(精简线条复古+Next.js友好)
官方文档(官网) :retroui.dev/
GitHub:github.com/logging-stu…
适用技术栈:React + TailwindCSS
风格:精简复古风格,融合现代简约设计,摒弃冗余细节,兼顾复古感与实用性,适配现代Web开发场景。
7. Neobrutalism Components(新粗野主义=精简复古)
官方文档(官网) :www.neobrutalism.dev/docs
GitHub:github.com/rikschennin…
适用技术栈:React / Next.js
风格:新粗野主义风格,属于精简复古的一种,继承粗野主义的粗犷、原始美学,结合现代排版与动画标准,视觉冲击强。很像动漫😂
二、其他复古风格 · 经典老库(基本无限制)
1. 98.css(Win95/Win98 复古风格)
官方文档(官网) :jdan.github.io/98.css/
GitHub:github.com/jdan/98.css
风格:还原Windows 95/Windows 98经典系统界面风格,复古怀旧,自带年代感。
2. XP.css(Windows XP 复古风格基本都是纯css)
官方文档(官网) :botoxparty.github.io/XP.css/
GitHub:github.com/botoxparty/…
风格:复刻Windows XP系统经典界面风格,还原XP系统的窗口、按钮等视觉特征,怀旧感拉满。
3. 7.css(Windows 7 Aero 毛玻璃风格)
官方文档(官网) :khang-nd.github.io/7.css/
GitHub:github.com/khang-nd/7.…
风格:还原Windows 7系统Aero毛玻璃风格,主打透明窗口、玻璃质感,兼具复古与精致感。
4. System.css(复古 Mac OS 风格)
官方文档(官网) :sakofchit.github.io/system.css/
GitHub:github.com/sakofchit/s…
风格:经典复古Mac OS风格,以黑白配色为主,还原早期Mac系统的窗口、菜单等视觉设计,简约且有年代感。
5. PaperCSS(手绘/草稿风)
官方文档(官网) :www.getpapercss.com/
GitHub:github.com/papercss/pa…
风格:手绘、草稿风格,模拟手写草稿的笔触与质感,视觉活泼,自带随性、自然的复古感。
三、选型总结(推荐这3个)
| 组件库 | 技术栈 | 风格 |
|---|---|---|
| RetroUI | React / Next.js | 精简复古 |
| Pxlkit | React / Next.js | 像素3D组件+图标 |
| Neobrutalism | React / Next.js | 新粗野主义 |