当前位置: 首页 > news >正文

前端复古风选型必看!像素UI 、精简复古风UI

原文: https://juejin.cn/post/7625209638578569235

一、像素风 · 复古风(8-bit/街机游戏/精简粗犷主义)

1. NES.css(8-bit 像素/红白机风)

官方文档(官网) :https://nostalgic-css.github.io/NES.css/

GitHub:https://github.com/nostalgic-css/NES.css

适用技术栈:无限制(纯 CSS,任意框架可用)

风格:很经典的一个UI库。纯正8-bit像素风格,还原经典红白机、复古游戏的视觉质感,自带怀旧游戏氛围。
在这里插入图片描述

2. Pixel-UI(Vue3专用像素风)

官方文档(官网) :https://maomentai817.github.io/pixel-ui/

作者:猫闷台817

适用技术栈:Vue3 专用

风格:基于CSS Houdini的复古像素风格,Vue3专用像素风。
在这里插入图片描述

3. Pixel RetroUI

官方文档(官网) :https://retroui.io/

GitHub:https://github.com/Dksie09/RetroUI

适用技术栈:React / Next.js

风格:我觉得很平庸😂。

在这里插入图片描述

4. Pxlkit(最强像素组件+图标库)

官方文档(官网) :https://pxlkit.xyz/

GitHub:https://github.com/joangeldelarosa/pxlkit

适用技术栈:React / Next.js

风格:兼顾复古像素感与3D效果实用性,可适配多种像素风项目场景。主要是该组件的像素风还不像老式的像素风,更像高清版像素风🐱我确实很喜欢
在这里插入图片描述

5. 8bitcn(像素风资源站)

官方文档(官网) :https://www.8bitcn.com/

GitHub:https://github.com/TheOrcDev/8bitcn-ui

适用技术栈:React

风格:纯像素游戏街机风,聚焦8-bit复古游戏视觉风格。

在这里插入图片描述

6. RetroUI(精简线条复古+Next.js友好)

官方文档(官网) :https://retroui.dev/

GitHub:https://github.com/logging-studio/retroui

适用技术栈:React + TailwindCSS

风格:精简复古风格,融合现代简约设计,摒弃冗余细节,兼顾复古感与实用性,适配现代Web开发场景。
在这里插入图片描述

7. Neobrutalism Components(新粗野主义=精简复古)

官方文档(官网) :https://www.neobrutalism.dev/docs

GitHub:https://github.com/rikschennink/neobrutalism-components

适用技术栈:React / Next.js

风格:新粗野主义风格,属于精简复古的一种,继承粗野主义的粗犷、原始美学,结合现代排版与动画标准,视觉冲击强。很像动漫😂
在这里插入图片描述

二、其他复古风格 · 经典老库(基本无限制)

1. 98.css(Win95/Win98 复古风格)

官方文档(官网) :https://jdan.github.io/98.css/

GitHub:https://github.com/jdan/98.css

风格:还原Windows 95/Windows 98经典系统界面风格,复古怀旧,自带年代感。

2. XP.css(Windows XP 复古风格基本都是纯css)

官方文档(官网) :https://botoxparty.github.io/XP.css/

GitHub:https://github.com/botoxparty/XP.css

风格:复刻Windows XP系统经典界面风格,还原XP系统的窗口、按钮等视觉特征,怀旧感拉满。

3. 7.css(Windows 7 Aero 毛玻璃风格)

官方文档(官网) :https://khang-nd.github.io/7.css/

GitHub:https://github.com/khang-nd/7.css

风格:还原Windows 7系统Aero毛玻璃风格,主打透明窗口、玻璃质感,兼具复古与精致感。

4. System.css(复古 Mac OS 风格)

官方文档(官网) :https://sakofchit.github.io/system.css/

GitHub:https://github.com/sakofchit/system.css

风格:经典复古Mac OS风格,以黑白配色为主,还原早期Mac系统的窗口、菜单等视觉设计,简约且有年代感。

5. PaperCSS(手绘/草稿风)

官方文档(官网) :https://www.getpapercss.com/

GitHub:https://github.com/papercss/papercss

风格:手绘、草稿风格,模拟手写草稿的笔触与质感,视觉活泼,自带随性、自然的复古感。

三、选型总结(推荐这3个)

组件库 技术栈 风格
RetroUI React / Next.js 精简复古
Pxlkit React / Next.js 像素3D组件+图标
Neobrutalism React / Next.js 新粗野主义
http://www.jsqmd.com/news/604455/

相关文章:

  • 基于Transformer-BiGRU 5模型多变量时序预测一键对比 (多输入单输出)附Matlab代码
  • NeRF在游戏开发中的5个神级应用:从场景重建到角色动画
  • Java NIO Files 类
  • 2026实测|6款主流PPT生成软件横评,打工人再也不用熬到深夜做PPT - 品牌测评鉴赏家
  • WithClock 桌面时钟,极致轻量化,鼠标穿透无打扰,自定义皮肤,双模式时钟,打造沉浸式桌面时间体验
  • Swagger中常用注解
  • 基于FPGA XDMA中断与双缓存架构的PCIE 3.0性能实测与优化
  • python sendgrid
  • 2026年AI PPT工具大揭秘,轻松解锁高效创作 - 品牌测评鉴赏家
  • 视频批量裁剪助手 - 支持 AVI、MKV 等多格式批量处理,精准设置裁剪时间
  • 【企业级MCP微服务基座】:基于FastAPI+Pydantic+Structured Logging的Python模板,已通过金融级压测(QPS 12,800+)
  • 滑模控制、反步控制、传统PID四旋翼无人机轨迹跟踪控制仿真
  • Taskwarrior钩子脚本开发终极指南:如何扩展你的任务管理功能
  • 如何用抖音下载器实现内容创作效率提升300%?一个开源工具的全方位指南
  • 硬字幕去除难题终结者:AI驱动的Video-subtitle-remover如何重新定义视频修复
  • D3作业1-K8s 存储与服务实验手册(实验1-4)
  • 智能保险箱WiFi配网总失败?保姆级排查指南(附双频路由器设置)
  • 博主实测|5款PPT生成网站,告别熬夜抠图,新手也能一键出片 - 品牌测评鉴赏家
  • 分布式一致性动态事件触发+线性多智能体系统仿真(复现参考文献)Matlab实现
  • 告别混乱依赖!用Melos管理Flutter多包项目的5个关键技巧
  • WebRTC+FFmpeg实战:如何用C++开发一个低延迟视频会议Demo?
  • 揭秘蒸发冷省电空调,成车间降温设备优选
  • 6个宝藏PPT模板网站,告别熬夜改稿,小白也能出质感大片 - 品牌测评鉴赏家
  • 基于串口(COM 口)同一时刻只能访问一次的独占特性,结合上文讨论的串口事件驱动编程、异步操作、读写锁和线程同步,本节将重点探讨如何优化串口事件驱动的性能和鲁棒性
  • 终极PoWFaucet会话管理完整指南:从启动到完成的6个关键步骤
  • AI博主实测3款PPT一键制作工具|告别熬夜排版,新手也能秒出大片 - 品牌测评鉴赏家
  • 手把手教你用Cherry Studio搭建一个‘全栈’AI助手:从聊天、翻译到文生图
  • 用树莓派Pico和电位计式传感器,5分钟做个简易角度测量仪(附完整Python代码)
  • IDM无限试用完全指南:突破30天限制的技术实现方案
  • 终极指南:Retrieval-based-Voice-Conversion-WebUI扩展开发与自定义模块设计